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

【问题标题】：Can't test validation error-message element using protractor无法使用量角器测试验证错误消息元素
【发布时间】：2017-09-18 19:38:16
【问题描述】：

我正在尝试为登录编写 e2e 测试，但我在检查此错误消息时遇到问题，尝试了许多不同的 css 定位器，但始终没有成功。

截图：

错误信息：

失败：使用定位器找不到元素：By(css selector, *[id="validation"])

在 chrome 中运行 e2e 测试时似乎不会显示错误消息。

我的代码：

//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>

【问题讨论】：

标签： angular protractor e2e-testing

【解决方案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);
    });

希望对其他人有所帮助。

【讨论】：