protractor e2e tests element is not interactable

Question

While trying to setup e2e tests for an angular app with protractor i come across this issue that the sendKeys() method from protractor is not working correctly. My tests contain not much logic yet as only clicking on elements is possible. after that every interaction throws the error "Failed: element is not interactable". waht i have tried so far.

i setup a login-page.po.ts file with functions returning the elements i need in my e2e spec file.

// login-page.po.ts

    import { browser, by, element } from 'protractor';
    
    export class LoginPage {
      navigateTo() {
        return browser.get('/login');
      }
    
      getEmailField() {
        return element(by.css('.email'));
      }
    
      getPasswordField() {
        return element(by.css('.password'));
      }
    
      getCookieConsentButton() {
        return element(by.css('.cookieButton'));
      }
    
    }

// login-page-e2e-spec.ts

import { browser, protractor } from 'protractor';
import { LoginPage } from './login-page.po';

describe('Login tests', () => {
  let page: LoginPage; beforeEach(() => {
    page = new LoginPage();
    page.navigateTo();
    browser.waitForAngularEnabled(false);
  });

  it('route to register page', async () => {
    const EC = protractor.ExpectedConditions;

    browser.wait(EC.visibilityOf(cookieButton), 20000).then(async function () {
      page.getCookieConsentButton().click().then(async function () {
        page.getEmailField().click();
        browser.sleep(5000);
        await getEmailField.sendKeys('12222');
      });
    });

  });

});

what i have also tried is without the then and async blocks like this:

page.getCookieConsentButton().click();
browser.sleep(5000);
page.getEmailField().click();
page.getEmailField().sendKeys('[email protected]');

but it keeps throwing the same error. im stuck at this point and i cant continue testing more of the app without making the sendkeys functionality work. unfortunately im looking for a ghost it seems.

also i have tried working with the presenceOf functionality of protractor waiting for elements to be present but with no success.

const EC = protractor.ExpectedConditions;
await browser.wait(EC.presenceOf(page.getCookieConsentButton()));
page.getCookieConsentButton().click();
await browser.wait(EC.presenceOf(page.getEmailField())).then(function () {
page.getEmailField().sendKeys('[email protected]');
});

here is my protractor config which is the default config mainly

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () { }
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayErrorMessages: true } }));
  }
};

any hints or tips are much appreciated.

Not helping but Protractor is deprecated, consider using something else if you just start setting up the tests. You can find alternatives on the web quite easily with the keywords "angular protractor replacement". — Gaël J
thanks i wasnt aware. good thing i didn invest much time into this yet — Fiehra

Afaq Ahmad Afaq Ahmad · Accepted Answer · 2021-08-14T21:13:48

Yes, Protractor will end its development by the end of 2022. Cypress seems to be a good thing. But, I think you should currently try to update it

beforeEach(() => {
    page = new LoginPage();
    page.navigateTo();
    browser.waitForAngularEnabled(false);
  });

to

beforeEach(() => {
    browser.waitForAngularEnabled(false);
    page = new LoginPage();
    page.navigateTo();
  });

OR You can also try to use browser.waitForAngularEnabled(false); in the protractor config file's onPrepare() method.

protractor e2e tests element is not interactable

1 Answers