离子输入 E2E 测试结果显示元素不可交互

Question

我目前正在运行一个量角器 e2e 并遇到类似于 https://github.com/ionic-team/ionic/issues/15956 的东西：尝试简单地发送密钥，例如element(by.name('username')).sendKeys(this.username);到ion-input会给出- Failed: element not interactable (Session info: chrome=75.0.3770.80)。

我的设置使用最新版本的离子，我的详细信息是：

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 (cordova-lib@9.0.1)
   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

这是 e2e 测试：

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

用方法

 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>

我什至尝试过没有ngIf并且所有发送密钥操作都带有await

应填充ion-text，但失败并显示：

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)

Answer 1

由于 ion-input 在其中创建输入，因此您需要一种方法来引用输入元素来发送密钥。

您可以通过以下方式实现此目的：

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

获取可以与之交互的离子输入的输入。

Answer 2

@Ben是正确的，因为ion-input内部创建一个输入。我发现使用以下//ion-input[@id='my-id']/input XPath 进行搜索更容易：在 java 中，它将是：

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

您所要做的就是分配并id ion-input。