Search code examples
javascriptjquerytestingcapybaraunity-webgl

Clicking on choosen coordinates in WebGL (canvas)

I am working with an app which embeds a WebGL Player. 

<body>
  <div class="application_layout">
    <header class="header clearfix">
      <nav class="header__left">
        <ul class="clearfix">
          <li class="menu__item menu__item--back">
            <a title="Back" class="link--back"></a>
          </li>
        </ul>
      </nav>
    </header>
    <div id="unity-webgl">
      <canvas style="cursor: default;" id="#canvas" width="1596" height="386"></canvas>
    </div>
  </div>
</body>

In my acceptance tests with RSpec and capybara I'm trying to simulate the click action on the page.

When doing

execute_script("$(document.elementFromPoint(100, 20).click();")
# the position of the "Back" link

everything is obviously working fine and the script is correctly clicking on the "Back" link.

But when trying to click on any area of the WebGL div with something like

var event = $.Event('click');
event.clientX = 200;
event.clientY = 100;
$('#canvas).trigger(event);

nothing is happening.

Is there any way to simulate the mouse click on the WebGL div?

Solution

  • You shouldn't be trying to simulate clicks - you should just tell Capybara to do the click. If you need the click to be offset use the options available to the click method.

    element.click(x: 200, y: 100)

    Any time you resort to using JS to fire events on the page you're making your tests less useful/valid since it allows for doing things a user never could.