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

时间:2017-09-18 19:38:16

标签: angular protractor e2e-testing

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

截图:
error message

错误讯息:

  

失败:找不到使用定位器的元素: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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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);
    });

希望它可以帮助别人。