Clicking on given coordinates of element in protractor

Question

I want to click on a specific location of my canvas element, so I wrote the following Protractor code:

var canvas = element(by.id("canvas"));

var clickCanvas = function(toRight, toBottom) { 
  browser.actions()
    .mouseMove(canvas, -toRight, -toBottom)
    .click();
}

toRight/toBottom are the numbers of pixels where the click should be made, relative the top left corner of my canvas.

However, the click does not seem to be executed at the given coordinates. I got the snippet from a related question on the Software Quality Assurance & Testing stack exchange.

Can you confirm that this snippet works?
Can you suggest alternatives?

Have you looked into [`browser.executeScript()`](http://angular.github.io/protractor/#/api?view=webdriver.WebDriver.prototype.executeScript) at all? — Aaron, Feb 19 '15 at 22:56

score 22 · Answer 1 · answered May 20 '15 at 13:04

22

I made this work, passing an object representing the coordinate as the second argument of mouseMove:

var canvas = element(by.id("canvas"));

var clickCanvas = function (toRight, toBottom) { 
    browser.actions()
      .mouseMove(canvas, {x: toRight, y: toBottom})
      .click()
      .perform();
};

answered May 20 '15 at 13:04

Olov

1,103
11
27

@Olov as a consolation you get an up-vote from me ;-) does this work only with canvas elements or with any element? – Besnik Apr 11 '16 at 10:31
@Besnik Well, it should work with any ElementFinder (look it up in the Protractor API reference if you haven't heared it before), thus should any element work fine. – Olov May 28 '16 at 17:14

score 3 · Answer 2 · answered Feb 20 '15 at 11:37

3

you missed out .perform()

browser.actions().mouseMove(canvas, -toRight, -toBottom).click().perform();

I use this a few times in my tests and confirm this works

answered Feb 20 '15 at 11:37

Sirk

1,547
2
12
18

score 3 · Answer 3 · answered Apr 12 '16 at 13:37

In this case, you have missed the perform() call:

 browser.actions()
  .mouseMove(canvas, -toRight, -toBottom)
  .click();  // < no .perform() HERE

This is one of the common mistakes when writing e2e tests in Protractor/WebDriverJS.

To prevent these errors from happening, there is a eslint-plugin-protractor plugin to ESLint that would warn you if perform() was no called on browser.actions() chain.

Clicking on given coordinates of element in protractor

3 Answers3

Linked