CODEWITHSUNDEEP
angularseleniumionic-frameworkprotractorionic4
candccoder
candccoder

Reputation: 803

ion-input e2e test results in element not interactable

I'm currently running an protractor e2e and running into something similar to https://github.com/ionic-team/ionic/issues/15956 : trying simply to send keys e.g element(by.name('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 (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 (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)

System:

   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:

        page.navigateTo();
        await page.fillCredentialsWrong();
        expect(page.getParagraphText()).toContain('LOGIN');
    });

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();
    }

html

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

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

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)

Upvotes: 0

Views: 876

Answers (2)

Vivere
Vivere

Reputation: 2270

@Ben is right as that ion-input creates an input inside. I find it easier to search using this //ion-input[@id='my-id']/input XPath: In java it would be:

    @FindBy(xpath = "//ion-input[@id='my-id']/input")
    private WebElement myInput;

All you have to do is to assign and id to the ion-input.

Upvotes: 0

Ben
Ben

Reputation: 563

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.

Upvotes: 2

Related Questions