user1559625
user1559625

Reputation: 2673

Why is protractor 'EC.elementToBeClickable' not implemented as it declares to be?

I have a element (button 'che-in/boarding pass') that class is 'disabled' at first, then enabled after another element (button 'check eligibility') is clicked. Please refer to the screenshots.

Before:

enter image description here

After:

enter image description here

My protractor test step is:

1) click 'check eligibility' button, and then

2) click 'check-in / boarding pass' button

And i am using standard wait function before clicking 'check-in / boarding pass' button, like:

var elm = element(by.id('xxxxxx'));
var EC = protractor.ExpectedConditions;

browser.wait(EC.elementToBeClickable(elm), 5000);
elm.click();

But it does work at all. it's giving error 'WebDriverError: unknown error: Element xxx is not clickable at point (759, 725). Other element would receive the click'

Then i go to check the definition of 'EC.elementToBeClickable', it says,

 /**
 * An Expectation for checking an element is visible and enabled such that you
 * can click it.
 *
 * @example
 * var EC = protractor.ExpectedConditions;
 * // Waits for the element with id 'abc' to be clickable.
 * browser.wait(EC.elementToBeClickable($('#abc')), 5000);
 *
 * @alias ExpectedConditions.elementToBeClickable
 * @param {!ElementFinder} elementFinder The element to check
 *
 * @returns {!function} An expected condition that returns a promise
 *     representing whether the element is clickable.
 */
elementToBeClickable(elementFinder: ElementFinder): Function;

which specifically says it will check if element is 'visible and enabled'. Then why is my code snippet not working?

P.S.

  1. The element locator I use is correct, because if I add a hard coded wait of 5sec before clicking first button and second button, then everything works

  2. elementToBeClickable() does not seem to wait at all. it throw error almost immediately.

Upvotes: 0

Views: 1344

Answers (1)

yong
yong

Reputation: 13712

I think you issue related to how Selenium determine an element is enable or disable. According to WebDriver W3C Sepcification I found Selenium use below rules to determine element is enable or disable.

Your button use CSS pointer-events: none to archive disable effect which Selenium not take it into calculation logic.

Actually, you can try to get the disabled attribute of your button, it will be false event you can't click on it. I think Selenium use the disabled attribute as the result of element enabled or not.

So you need to wait the CSS value of pointer-events is not none, rather than call EC.elementToBeClickable

enter image description here enter image description here

Upvotes: 2

Related Questions