无法使用量角器测试验证错误消息元素

Question

我正在尝试为登录编写e2e测试，但是我在检查这个错误消息时遇到了问题，尝试了许多css定位器不同的方式，但它从未起作用。

截图：

​

错误消息：

失败:没有使用定位器:By找到任何元素(css选择器，*id=“验证”)

当e2e测试在chrome中运行时，错误信息似乎不会显示出来。

我的代码：

​

//login.po.ts

validationMessage() {
        return element(by.id('validation'));
    }

//login.e2e-spec.ts

 it('should not login with wrong email and password', () => {
        page.navigateTo();
        page.inputLogin().sendKeys(fakeLogin);
        expect(page.buttonSubmit().isEnabled()).toBe(false);
        page.inputPassword().sendKeys(fakePass);
        expect(page.buttonSubmit().isEnabled()).toBe(true);
        page.buttonSubmit().click().then(() => {
             browser.wait(protractor.ExpectedConditions.visibilityOf(page.validationMessage()), 5000); //If the error span takes time to be visible, use wait() function
             expect(page.validationMessage().getText()).toEqual('User not found');
        });

​

我的HTML代码：

​

<div *ngIf="!submitted">
    <h1 class="inner-main-title">Login</h1>
    <form novalidate (ngSubmit)="login()" [formGroup]="signinForm">
        <md-input-container>
            <input mdInput placeholder="E-Mail" formControlName="email" type="email" required/>
        </md-input-container>
        <app-control-messages [control]="signinForm.controls.email"></app-control-messages>
        <md-input-container>
            <input mdInput placeholder="Password" formControlName="password" type="password"/>
        </md-input-container>
        <div *ngIf="formErrors" class="validation-message">
            <h3 class="error-message" [innerHTML]="formErrors" id="validation"></h3>
        </div>
        <div class="link"><a routerLink="./account-recovery">Forgot password?</a></div>
        <button id="login-button" class="cta-green" type="submit" md-raised-button [disabled]="!signinForm.valid"
                color="primary">login
        </button>
    </form>
</div>
<div *ngIf="submitted">
    <h1 class="inner-main-title">Please wait...</h1>
    <md-spinner></md-spinner>
</div>

​

Answer 1

已经解决了。

问题在于量角器没有等待页面完全加载。

browser.waitForAngular()；只是等待页面重定向，而不是完全加载其内容。加入browser.sleep(1000)解决了问题。不同的情况需要更长的等待时间。

以下是工作代码：

it('should not login with wrong password', () => {
    page.navigateTo();
    page.inputLogin().sendKeys(fakeLogin);
    expect(page.buttonSubmit().isEnabled()).toBe(false);
    page.inputPassword().sendKeys(fakePass);
    expect(page.buttonSubmit().isEnabled()).toBe(true);
    page.buttonSubmit().click().then(() => {
        browser.waitForAngular();
        browser.sleep(1000);
        expect(page.validationMessage().isDisplayed()).toBe(true);
    });

希望它能帮到别人。