Protractor: ExpectedConditions.elementToBeClickable doesn't account for other elements covering the target

Created on 13 May 2015 · 11Comments · Source: angular/protractor

In the following:

var element = $('#div');
browser.wait(protractor.ExpectedConditions.elementToBeClickable(element), 5000, 'Element not clickable');
element.click();

If $('#div') is covered by another element element.click() results in a selenium error:

unknown error: Element is not clickable at point (10, 10). Other element would receive the click:
...

Even through browser.wait(protractor.ExpectedConditions.elementToBeClickable(element), 5000, 'Element not clickable') does not result in an error.

bug discussion

Source

hgted

👍4

Most helpful comment

I have wrote small check utility method, keep in mind it will click on element immediately when it become clickable:

import { ElementFinder, promise } from 'protractor';
export let testHelpers = {
  isClickable(el: ElementFinder): promise.Promise<boolean> {
    return new promise.Promise(resolve => {
      let interval = setInterval(() => {
        el.click().then(() => {
          clearInterval(interval);
          setTimeout(() => {
            resolve(true);
          }, 500);
        }, () => { });
      }, 100);
    });
  }
}

In your test code:

import { testHelpers } from '../src/core/e2e/helpers';
describe('App', () => {
  it('should do something', () {
    let btn = $('.cls');
    browser.wait(testHelpers.isClickable(btn), 3000);
  });
});

alllx on 8 Sep 2017

👍4 ❤3 🎉3

All 11 comments

I definitely see this behavior as well and want to see this fixed.
Currently, I use EC.and(EC.elementToBeClickable(element),
EC.invisibleOf(overlayElement)) as a workaround.

On Wed, May 13, 2015 at 9:05 AM, hgted [email protected] wrote:

In the following:

var element = $('#div');
browser.wait(protractor.ExpectedConditions.elementToBeClickable(element), 5000, 'Element not clickable');
element.click();

If $('#div') is covered by another element element.click() results in a
selenium error:

unknown error: Element is not clickable at point (10, 10). Other element
would receive the click:
...

Even through browser.wait(protractor.ExpectedConditions.elementToBeClickable(element),
5000, 'Element not clickable') does not result in an error.

—
Reply to this email directly or view it on GitHub
https://github.com/angular/protractor/issues/2139.

jlin412 on 13 May 2015

👍2

Correct, right now elementToBeClickable just checks that it's visible and enabled.

juliemr on 15 May 2015

👍1

I don't think there is anything that can be done here unless webdriver exposes an API that returns all elements for a particular coordinate. Also, for reference, the behavior is consistent with Java and Python's expected condition libraries (i.e. https://code.google.com/p/selenium/source/browse/java/client/src/org/openqa/selenium/support/ui/ExpectedConditions.java)

hankduan on 3 Jun 2015

We would address this using document.elementFromPoint and element.getBoundingClientRect pretty easily actually. elementFromPoint isn't totally standard at this point, though it appears to be supported by all browsers. The consistency issue is real though. Donno if we should leave this the way it is or "fix" it

sjelin on 7 Jun 2015

Hi there, I ran into the same issue. How about adding something like elementNotToBeCovered? That way the functionality would be easily available without creating inconsistencies :-)

dbartholomae on 5 Jul 2015

@hankduan thoughts on @dbartholomae's suggestion?

sjelin on 7 Jul 2015

Closing this issue in favor of the more specific issue https://github.com/angular/protractor/issues/2313

hankduan on 7 Jul 2015

I have wrote small check utility method, keep in mind it will click on element immediately when it become clickable:

import { ElementFinder, promise } from 'protractor';
export let testHelpers = {
  isClickable(el: ElementFinder): promise.Promise<boolean> {
    return new promise.Promise(resolve => {
      let interval = setInterval(() => {
        el.click().then(() => {
          clearInterval(interval);
          setTimeout(() => {
            resolve(true);
          }, 500);
        }, () => { });
      }, 100);
    });
  }
}

In your test code:

import { testHelpers } from '../src/core/e2e/helpers';
describe('App', () => {
  it('should do something', () {
    let btn = $('.cls');
    browser.wait(testHelpers.isClickable(btn), 3000);
  });
});

alllx on 8 Sep 2017

👍4 ❤3 🎉3

@alllx Out of curiousity, why are you resolving inside the setTimeout? I think you're solution will work for what I'm trying to do with a slight modification. Just curious why you are resolving the promise this way before I implement.

amilbeck on 16 May 2018

Hi @amilbeck sorry, for now, I don't remember there was some delay needed, was tested only in Chrome. Maybe now in newer versions, this delay is not needed.

alllx on 16 May 2018

use internet explorer ,meet this problem
Failed: Cannot click on element
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
System info: host: 'DESKTOP-RPOSEHB', ip: '192.168.12.227', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '11.0.2'
Driver info: driver.version: unknown
Stack:
MoveTargetOutOfBoundsError: Cannot click on element
who can help me