I have an element that does not allow it to be clickable using CSS property pointer-events: none; How can I check whether that element is clickable or not as doing a .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 the redirect happened but because of this error it ends the test right away and try catch cannot catch the exception.

I have an element that does not allow it to be clickable using CSS property pointer-events: none; How can I check whether that element is clickable or not as doing a .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 the redirect happened but because of this error it ends the test right away and try catch cannot catch the exception.

• javascript
• testing
• protractor

• Please try this: browser.driver.findElement(by.css('CSS_PATH')).then(function(element) { try { element.click(); } catch(err) { console.log('In catch block'); } }, function(err) { console.info('Element is not clickable'); }); – Sakshi Singla Commented Dec 3, 2014 at 4:08
• That does not work. Also the console.info('Element is not clickable') is not possible to reach as the element exist of page and that callback only gets called if it is missing from the page. – Encore PTL Commented Dec 3, 2014 at 14:54

4 Answers 4

I don't know about protractor, but using plain JS you can do:

window.getComputedStyle(element).getPropertyValue('pointer-events') == 'none';

however support for getComputedStyle may not be available in all browsers you wish to support, see MDN patibility matrix, which indicates no support in IE 8, however it may not support the pointer-events CSS property anyway.

if you really want to use protractor you can use the following:

expect( protractor.ExpectedConditions.elementToBeClickable(element)).not.toBe(true);

There are actually two methods to check it.

1) Using 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, will return error.

2) Using protractor's isEnabled, isDisplayed and isPresent

So as far as my understanding goes, you can create isClickable, which will return true if 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;
     });
}

I have wrote small check utility method, keep in mind it will click on element immediately when it bee 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);
  });
});