Stack: WebDriverError: element not interactable - Protractor e2e

Question

I get this error when testing for a button that i want to click, and i dont know what to do.

Message: WebDriverError: element not interactable

I cant seem to click on the button when testing with e2e. Or i get this button is not interactable or i get that it cant find the button or i get time out.

My code:

   const inputEmail = element(by.css('input[type=\'email\']'));
const inputPassword = element(by.css('input[type=\'password\']'));
const loginButton = element(by.xpath('//button[.=\'LOGIN\']'));
const googleSignInButton = element(by.xpath('//button[.=\'GOOGLE SIGN-IN\']'));

browser.ignoreSynchronization = true


const elm = element(by.css('ion-header button'));


 //const menuButton = element(by.className('bar-buttons bar-buttons-md bar-button bar-button-md bar-button-default bar-button-default-md bar-button-menutoggle bar-button-menutoggle-md'));
const menuButton = element(by.xpath('/html/body/ion-app/ng-component/ion-nav/page-home-tutor/ion-header/ion-header/ion-navbar/button[2]'));
// const navigateTo = navigateToPage() => {
 // return browser.get()
//}

const login = () => {

};

describe('Navigation test', function () {



  it('Logging in to the Tutor page', async function () {



    browser.get('http://localhost:8100/#/login');




    inputEmail.sendKeys('');

    inputPassword.sendKeys('');

    loginButton.click();

    browser.sleep(6000);

    //const EC = protractor.ExpectedConditions;

    //browser.wait(EC.elementToBeClickable(elm), 15000);

    await browser.executeScript('arguments[0].click()', elm);

    //menuButton.click();
    browser.sleep(6000);
    // element(by.css('ion-header button')).click();
    elm.click();

    //element(by.xpath('/html/body/ion-app/ng-component/ion-nav/page-home-tutor/ion-header/ion-header/ion-navbar/button[1]')).click();
    // element(by.css('body > ion-app > ng-component > ion-nav > page-home-tutor > ion-header > ion-header > ion-navbar > button.bar-buttons.bar-buttons-md.bar-button.bar-button-md.bar-button-default.bar-button-default-md.bar-button-menutoggle.bar-button-menutoggle-md > span > ion-icon')).click();
    //element(by.css('session-item button')).getText('BEGIN').click();
    //browser.sleep(6000);
    //body > ion-app > ng-component > ion-nav > page-home-tutor > ion-header > ion-header > ion-navbar > button.back-button.bar-button.bar-button-md.back-button-md.bar-button-default.bar-button-default-md


    expect(element(by.css('page-home-tutor p')).getText()).toEqual('COMPLETED SESSIONS');
   // ((expect(page.getParagraphText()).toEqual('Welcome to app!');
  });



});

The comments are code that i tested to see if works but nothing is helping.

The button i want to test:

Button

button code

What should i do or what should i add or take to make it work?

there are multiple buttons inside ion-header which one you want to click? — Aakash Garg

Aakash Garg Aakash Garg · Accepted Answer · 2020-06-04T17:43:04

Try this :-

let elem = element(by.css('.bar-button-menutoggle'));
browser.sleep(6000);
elem.click();

Stack: WebDriverError: element not interactable - Protractor e2e

1 Answers