clickMouseButton always clicks the left button

Consider the following test case:

In tests/page.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <style>html, body { width: 100%; height: 100% }</style>
  </head>
  <body>
    <script>
      function putBlock(x, y, color, val) {
        const div = document.createElement('div');
        div.style = 'width:30px;height:30px;display:flex;align-items:center;' +
          `justify-content:center;position:absolute;top:${y}px;left:${x}px;` +
          `background:${color};color:white;`;
        div.textContent = val;
        document.body.appendChild(div);
      }

      document.body.addEventListener('contextmenu', event => {
        console.log(event.button);
        putBlock(event.clientX, event.clientY, 'red', event.button);
      });
      document.body.addEventListener('click', event => {
        console.log(event.button);
        putBlock(event.clientX, event.clientY, 'green', event.button);
      });
    </script>
  </body>
</html>

In tests/hello.ts:

import { suite, test } from 'intern/lib/interfaces/tdd';

suite('functional', () => {
  test('find link', test => {
    return test.remote
       .setFindTimeout(5000)
       .get('/tests/functional/page.html')
       .moveMouseTo(50, 50)
       .clickMouseButton()
       .moveMouseTo(100, 100)
       .clickMouseButton(2)
       .sleep(5000);
  });
});

When running this test in both Chrome and FF, both clicks register as a left click, creating green boxes in the document area. When serving the page from a static server and using actual mouse clicks, left clicks produce green boxes and right clicks produce red boxes.

The necessary pieces to resolve this will likely be added in #1027.

theintern / intern

clickMouseButton always clicks the left button #1036