CODEWITHSUNDEEP
angularprotractore2e-testing
Fiehra
Fiehra

Reputation: 797

protractor e2e tests element is not interactable

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.

error-message

Upvotes: 0

Views: 339

Answers (1)

Afaq Ahmad
Afaq Ahmad

Reputation: 29

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.

Upvotes: 1

Related Questions