Element displays in chromedriver DOM, but Protractor says Failed: element not interactable

Question

I'm getting the error Failed: element not interactable in my Protractor test suite.

Essentially, I'm trying to click on a checkbox but it's telling me I can't do that because the element isn't displayed on the DOM. However, when I run my test suite and the Chromedriver browser pops up and runs through simulating the tests, I can see the element that I'm trying to click right there on the screen!

Here's a screenshot of what the browser looks like when it's running through the tests.

I've validated that the element is indeed present on the DOM with something to the effect of expect(elementToTest.isPresent()).toBe(true) and it passes just fine. When I do expect(elementToTest.isDisplayed()).toBe(true), it returns false.

Now, I've tried to solve this problem by maximizing the browser window with browser.driver.manage().window().maximize();, but that didn't do anything.

I've tried mouse overing and scrolling to the element, waiting for it to be clickable, waiting for it to display, sleeping the browser, but then those return Timeout errors.

So, I don't know what to do. Any help would be greatly helpful.

describe('purposes page', () => {
  beforeEach(() => {
    utils.clearCookies();
    browser.driver.manage().window().maximize();
    browser.waitForAngularEnabled(false);
    browser.get("/");
    browser.sleep(800);
    element(by.css('[class*=introV2_rejectAll]')).click();
  });

  describe('purpose controls', () => {
    it('clicking a toggle works', () => {
      const switchEl = element(by.css('[class*=switch_switch]'));
      const parentEl = element(by.css('[class*=purposes_active]'));
      expect(switchEl.getAttribute('class')).toContain('switch_isSelected');
      expect(parentEl.getText()).not.toContain('Inactive');

      switchEl.click();
      browser.sleep(800);
      expect(switchEl.getAttribute('class')).not.toContain('switch_isSelected');
      expect(parentEl.getText()).toContain('Inactive');
    });
  }

The switchEl.click(); statement is the test that's failing. The error message returned looks like this:

Failures:
1) purposes page purpose controls clicking a toggle works
  Message:
    Failed: element not interactable
      (Session info: chrome=77.0.3865.120)
    Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
    System info: host: 'IAB-MAC-00012.local', ip: '2601:600:8180:1d50:c88e:3c0c:171c:663e%en0', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.14.6', java.version: '13'
    Driver info: driver.version: unknown
  Stack:
    WebDriverError: element not interactable
      (Session info: chrome=77.0.3865.120)
    Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
    System info: host: 'IAB-MAC-00012.local', ip: '2601:600:8180:1d50:c88e:3c0c:171c:663e%en0', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.14.6', java.version: '13'
    Driver info: driver.version: unknown
        at Object.checkLegacyResponse (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/error.js:546:15)
        at parseHttpResponse (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/http.js:509:13)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/http.js:441:30
        at processTicksAndRejections (internal/process/task_queues.js:85:5)
    From: Task: WebElement.click()
        at thenableWebDriverProxy.schedule (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/webdriver.js:807:17)
        at WebElement.schedule_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/webdriver.js:2010:25)
        at WebElement.click (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/webdriver.js:2092:17)
        at actionFn (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:89:44)
        at Array.map (<anonymous>)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:461:65
        at ManagedPromise.invokeCallback_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:1376:14)
        at TaskQueue.execute_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3084:14)
        at TaskQueue.executeNext_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3067:27)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2927:27Error
        at ElementArrayFinder.applyAction_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:459:27)
        at ElementArrayFinder.<computed> [as click] (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:91:29)
        at ElementFinder.<computed> [as click] (/Users/zackcarlson/Desktop/Git/cmp/node_modules/protractor/built/element.js:831:22)
        at UserContext.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:103:15)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:112:25
        at new ManagedPromise (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:1077:7)
        at ControlFlow.promise (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2505:12)
        at schedulerExecute (/Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:95:18)
        at TaskQueue.execute_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3084:14)
        at TaskQueue.executeNext_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:3067:27)
    From: Task: Run it("clicking a toggle works") in control flow
        at UserContext.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:94:19)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/jasminewd2/index.js:64:48
        at ControlFlow.emit (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/events.js:62:21)
        at ControlFlow.shutdown_ (/Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2674:10)
        at /Users/zackcarlson/Desktop/Git/cmp/node_modules/selenium-webdriver/lib/promise.js:2599:53
    From asynchronous test: 
    Error
        at Suite.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:96:5)
        at Suite.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:95:3)
        at Object.<anonymous> (/Users/zackcarlson/Desktop/Git/cmp/spec/purposes.spec.js:3:1)

Is that an iframe? If it is an iframe, you need to switch to it. — cnishina

Madhan Raj Madhan Raj · Accepted Answer · 2019-10-11T05:23:48

The problem is because the element is in the DOM but it takes some time to render in the UI. So you should add some wait before accessing the element.

if the wait does not help try the javascript executor below

ele = element(by.css('[class*=switch_switch]'));
await browser.executeScript('arguments[0].click()', ele);

Hope it helps you

Element displays in chromedriver DOM, but Protractor says Failed: element not interactable

1 Answers