Element not clickable at point - works locally but not in production

Question

So I'm receiving this error while testing on Circle, but not while in production. I've npm installed, bower installed, npm updated, bower updated, and npm run update-webdriver.

[chrome #1a]   UnknownError: unknown error: Element is not clickable at point (1652, 61). Other element would receive the click: <div class="md-toolbar-tools">...</div>
[chrome #1a]   (Session info: chrome=43.0.2357.130)
[chrome #1a]   (Driver info: chromedriver=2.14.313457 (3d645c400edf2e2c500566c9aa096063e707c9cf),platform=Linux 3.13.0-76-generic x86_64

I'm not sure why the element wouldn't be clickable while in production but it would be fine for local. I tried adding in some waits but I don't think that's the issue. I've looked at other questions surrounding element not clickable at point but they all seem to be cases where it isn't working at all, not working only in select circumstances.

My page object looks like this:

'use strict';

var myObject = function () {
  this.thing1 = element(by.css('md-list'))
  this.thing2 = this.thing1.element(by.css('md-list-item'))
  this.thing3 = this.thing2.element(by.css('button div div h4'))
  this.thing4 = this.thing2.element(by.css('button div md-menu button'))
};

module.exports = new myObject();

and my spec looks like this, and the error is coming on the click line.

describe('Object directive', function () {
  var myObject;

  browser.driver.manage().window().setSize(1920, 1080);
  browser.get('/#/login');
  browser.waitForAngular();
  myObject = require('./myobject.po.js');

  it('should rename', function () {
    myObject.thing4.click();
    element(by.css('[aria-label=\'Rename Button\']')).click();
    element(by.css('input')).clear();
    element(by.css('input')).sendKeys('Test Name');
    element(by.css('[ng-click="saveName()"]')).click();
    expect(myObject.thing3.getText()).toBe('Test Name');
  });

  it('should delete', function () {
    myObject.thing4.click();
    element(by.css('[aria-label=\'Delete Button\']')).click();
    expect(element(by.css('md-dialog-content div p')).getText()).toBe('Do you want to permanently delete?');
    element(by.css('[ng-click="dialog.abort()"]')).click();
  });

});

My guess would be that it has something to do with different screen resolution when running tests locally vs. on CI. You are resizing your browser to 1920 x 1080 but depending on the actual browser it might or might not resize to the desired width. Have you tried taking a screenshot right before the failing click? — finspin, Jan 23 '16 at 20:38

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

It looks like selenium thinks some element overlaps the desired one, it happens.

There are multiple things you can try:

make the click via JS click() (see the difference: WebDriver click() vs JavaScript click()):
```
browser.executeScript("arguments[0].click()", elm.getWebElement());
```
use browser actions: move to element and then make the click:
```
browser.actions().mouseMove(elm).click().perform();
```

edited May 23 '17 at 11:59

Community

1
1

answered Jan 23 '16 at 18:49

alecxe

462,703
120
1,088
1,195

Hmm - I tried both of those options, putting in browser.actions().mouseMove(myObject.thing4).click(); as well as browser.actions().mouseMove(myObject.thing4).click(); – Stanley Jan 23 '16 at 19:11
1

@StanleyYuan don't forget the `perform()` after the `click()`. – alecxe Jan 23 '16 at 19:12
Ahh I didn't realize there was a perform, thanks! Locally, both options seem to work, but when put into production, only the former seems to do so properly - the latter works in one of the two cases where I use it in the app, but not both, so I'm still a little confused. (When it doesn't work, it seems to find the element okay, but I get a 'NoSuchElementError: No element found using locator: By.cssSelector("[aria-label='Delete']")' from an element that should exist after I click properly. Not sure if me using protractor.js changes anything? If you have any other thoughts would love to hear! – Stanley Jan 23 '16 at 19:32
@StanleyYuan yeah, things like this happen often. I'm afraid you would have to add `browser.wait()` to wait for the elements to be clickable, visible, present to make your tests more durable. Please see if it makes sense to make a separate follow-up question. Thanks. – alecxe Jan 23 '16 at 19:37

Element not clickable at point - works locally but not in production

1 Answers1