离子输入端到端测试导致元素不可交互

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 (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 在其中创建输入，您需要一种方法将输入元素引用到 sendKeys。

您可以通过以下方式实现：

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

获取您可以与之交互的 ion-input 的输入。

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。

离子输入端到端测试导致元素不可交互

ion-input e2e test results in element not interactable

selenium

protractor

ionic-framework

angular

ionic4

html