How to check if an item is available using Protractor test
I have an element that prevents it from being pointer-events: none;
clickable using a CSS property How can I check if this element is clickable or not, since execution .click()
on the element throws an exception that I cannot catch UnknownError: unknown error: Element is not clickable at point
The element is a link, so I just want to check if it happened redirection, but because of this error, it ends the test immediately and the catch attempt cannot catch the exception.
source to share
I don't know about the protractor, but using simple JS you can do:
window.getComputedStyle(element).getPropertyValue('pointer-events') == 'none';
however, support for getComputedStyle may not be available in all browsers you want to support, see MDN Matrix Compatibility which does not indicate support in IE 8, however it may not support the CSS-event-pointer property anyway.
source to share
I wrote a small check utility method, keep in mind that it will immediately click on the element when it becomes 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: mport {testHelpers} from '../src/core/e2e/helpers';
describe('App', () => {
it('should do something', () {
let btn = $('.cls');
browser.wait(testHelpers.isClickable(btn), 3000);
});
});
source to share
There are actually two ways to check this.
1) Use ExpectedConditions
var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be clickable.
browser.wait(EC.elementToBeClickable($('#abc')), 5000);
If not found or not clickable, an error will be returned.
2) Using a protractor isEnabled
, isDisplayed
andisPresent
So, as I understand it, you can create isClickable
one that will return true if the element is present, displayed and enabled, and false otherwise:
function isClickable(element) {
return element.isPresent().then((isPresent) => {
if (isPresent) {
return element.isDisplayed().then((isDisplayed) => {
if (isDisplayed) {
return element.isEnabled();
}
return false;
});
}
return false;
});
}
source to share