ion-input e2e test results in element not interactable


I’m currently running an protractor e2e and running into something similar to : trying simply to send keys e.g element('username')).sendKeys(this.username); to an ion-input gives - Failed: element not interactable (Session info: chrome=75.0.3770.80) .

My setup uses the latest version of ionic my details are:


   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.5.1


   cordova (Cordova CLI) : 9.0.0 ([email protected])
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 15 other plugins)


   Android SDK Tools : 26.1.1 (/home/***/Android/Sdk)
   NodeJS            : v10.15.3 (/home/***/nodejs/node-v10.15.3-linux-x64/bin/node)
   npm               : 6.9.0
   OS                : Linux 4.18

This is the e2e test:

        await page.fillCredentialsWrong();

with the method

 async fillCredentialsWrong() {
        await element(by.css('ion-input[formControlName="email"]')).sendKeys(this.validUsername);
        await element(by.css('ion-input[formControlName="password"]')).sendKeys(this.validPassword + 1);
        await element(by.css('.login-btn')).click();


 <form *ngIf="loginSelector === true" [formGroup]="loginFormGroup">
                <ion-label position="stacked">Email</ion-label>
                <ion-input name="username" type="email" formControlName="email" required></ion-input>

                <ion-label position="stacked">Password</ion-label>
                <ion-input name="password" type="password" formControlName="password" required></ion-input>

I’ve even tried without the ngIf and with await on all sendkey operations

The ion-text should be populated but it fails with:

Failed: element not interactable
       (Session info: chrome=75.0.3770.80)
       (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.18.0-1015-gcp x86_64)
       (Session info: chrome=75.0.3770.80)
       (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.18.0-1015-gcp x86_64)
         at Object.checkLegacyResponse (/home/dev/workspace/autoreport/node_modules/selenium-webdriver/lib/error.js:546:15)
         at parseHttpResponse (/home/dev/workspace/autoreport/node_modules/selenium-webdriver/lib/http.js:509:13)
         at doSend.then.response (/home/dev/workspace/autoreport/node_modules/selenium-webdriver/lib/http.js:441:30)
         at process._tickCallback (internal/process/next_tick.js:68:7)


As ion-input creates an input within, you need a way to reference the input element to sendKeys.

You can achieve this by:

await element(by.css('ion-input[formControlName="email"] input')).sendKeys(this.validUsername); 

To get the input of the ion-input which you can interact with.

Answered By – Ben

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published