量角器基本错误消息 E2E

Question

刚开始学习角度，现在专注于自动化测试。我有一个非常简单的应用程序，它包含一个基本表单，要求用户输入他们的电子邮件。我有一个验证器.必需附加到电子邮件，因此用户必须输入一些文本。如果用户未输入任何文本，则输入字段下方将显示一条消息，指出表单是必需的。我正在尝试在量角器中测试此消息是否出现，但遇到错误。我认为这只是我的代码中非常简单的错误。我正在使用角度和茉莉花的最新版本。谢谢。任何指导都会很棒，因为我在使用 Angular2+ 时找不到好的资源。

.HTML：

<div *ngIf="!email; else forminfo">
<form [formGroup]="rForm" (ngSubmit)="submitEmail(rForm.value)">
<div class="form-container">
<div class="row columns">
<h1>{{title}}</h1>
<label>Email
<input type="text" formControlName="email">
</label>
<div class="alert" *ngIf="!rForm.controls['email'].valid && rForm.controls['email'].touched">{{ titleAlert }}</div>
<input type="submit" class="button expanded" value="Submit Form" [disabled]="!rForm.valid">
<button (click)="clickBtn()">test</button>
<br>
<p>{{msg}}</p>

</div>
</div>
</form>
</div>
<ng-template #forminfo>
<div class="form-container">
<div class="row columns">
<h1>Thank you for subscribing!</h1>
<p>Email you have subscribed with: {{ email }}</p> <br> 
</div>
</div>
</ng-template>

组件类

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {Location} from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Enter email to subscribe';
private location: Location;
rForm: FormGroup;
submit: any;
email:string = '';
titleAlert:string = 'This field is required';
titleEmail:string = "Email required";
titleLength: string = 'Min of 7 Characters'
msg: string;
constructor(private fb: FormBuilder) {
this.rForm = fb.group( {
'email': [null, [Validators.required, Validators.minLength(7),Validators.email]]
})
}
points = 1;

ngOnInit() {
}
clickBtn() {
this.msg = 'test'
}
submitEmail(submit) {
this.email = submit.email;
}
}

对象类

import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getTitle() {
return element(by.css('h1')).getText();
}
getTestBtn() {
return element(by.cssContainingText('button', 'test'));
}
getErrorMsg() {
return element(by.cssContainingText('div', 'alert')).getText();
}
getInputField() {
return element(by.cssContainingText('input', 'email'));
}

}

规格类

import { AppPage } from './app.po';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('Should display the correct title', () => {
page.navigateTo();
expect(page.getTitle()).toEqual('Enter email to subscribe')
});
it('should display an input field', () => {
page.navigateTo();
expect(page.getInputField()).toBeTruthy();
})
it('return an error if text box is left empty', () => {
page.navigateTo();
page.getInputField().sendKeys('');
page.getTestBtn().click();
expect(page.getErrorMsg()).toBeTruthy();
})
});

编辑：通过这样做让它工作：

Object Class
titleAlert = element(by.className('alert');
}
Spec Class
expect(page.titleAlert.isDisplayed()).toBe(true);

谢谢你 特胡桃酮

Answer 1

你的问题在这里：

getErrorMsg() {
return element(by.cssContainingText('div', 'alert')).getText();
}

在组件中，您已将错误消息的文本设置为：

titleAlert: string = 'This field is required';

您应该查找包含该文本的元素。不适用于包含alert.或者更好的是，只需使用by.className('alert')

更好的选择是验证当您尝试提交无效表单时是否确实显示错误消息。

查找元素的方法：

export class AppPage {
titleAlert = element(by.className('alert'));
// or ...
titleAlert = element(by.cssContainingText('div', 'This field is required'));
}

然后在测试中，您可以这样做：

it('return an error if text box is left empty', () => {
page.navigateTo();
page.getInputField().sendKeys('');
page.getTestBtn().click();
expect(page.titleAlert.isDisplayed()).toBe(true);
});

另外，您可能想看看量角器风格指南。特别是关于页面对象的部分。您目前正在沿着为测试增加不必要的复杂性的道路前进。我的意思是，像page.getInputField().sendKeys('');这样的东西是不必要的，而你可以只做page.myInputElement.sendKeys()。