我的应用程序有问题..
office.components.html
<div class="form-group" [class.text-danger]="form.name?.invalid && (form.name?.dirty || form.name?.touched)">
<label for="name">OFFICE</label>
<input name="name" type="text" class="form-control input-lg" value="" formControlName="name"
[class.border-danger]="form.name?.invalid && (form.name?.dirty || form.name?.touched)" required />
<div *ngIf="form.name?.errors && (form.name?.dirty || form.name?.touched)">
<div [hidden]="!form.name?.errors.required">Office required</div>
<div [hidden]="!form.name?.errors.minlength">Office is too short</div>
<div [hidden]="!form.name?.errors.maxlength">Office is too long</div>
</div>
</div>
office.components.ts
officeForm = this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(250)]],
});
ngOnInit() {
this.store.dispatch(new FetchOffice());
this.officeSubscription = this.store.select('office').subscribe((officeState: OfficeState) => {
this.officeForm.patchValue(officeState);
});
}
office.e2e-spec.ts
it('check error message for required input', () => {
const formNameElement = element(by.name('name'));
formNameElement.clear();
formNameElement.sendKeys(protractor.Key.TAB);
const formNameElementParent = formNameElement.element(by.xpath('..'));
const formNameElementError = formNameElementParent.element(by.xpath('div/div[1]'));
expect(formNameElementError.getText()).toEqual('Office required');
});
错误失败:找不到使用定位器的元素:By(xpath,div / div [1])
但下面的测试有效
it('check error message for required input', () => {
const formNameElement = element(by.name('name'));
formNameElement.clear();
formNameElement.sendKeys('1');
formNameElement.sendKeys(protractor.Key.TAB);
const formNameElementParent = formNameElement.element(by.xpath('..'));
const formNameElementError = formNameElementParent.element(by.xpath('div/div[2]'));
expect(formNameElementError.getText()).toEqual('Office is too short');
});
当我删除
this.officeForm.patchValue(officeState);
所有测试工作
链接xpath定位器时,需要在定位器前面加上./
或.//
语法。这表示您要查找相对于要链接的元素的元素。
虽然您的整个代码可以通过使用xpath axes来识别那些相关元素来简化。
例如,而不是你原来的
const formNameElement = element(by.name('name'));
const formNameElementParent = formNameElement.element(by.xpath('..'));
const formNameElementError = formNameElementParent.element(by.xpath('div/div[2]'));
您可以使用父轴实现相同(使用follow-sibling更新)
const formNameElement = element(by.name('name'));
const formNameElementError = element(by.xpath('//[@name="name]/following-sibling::div[1]'));
我找到了解决方案。我不得不替换:
formNameElement.clear();
formNameElement.sendKeys(protractor.Key.TAB);
上
formNameElement.clear();
formNameElement.sendKeys('1');
formNameElement.sendKeys(protractor.Key.BACK_SPACE);
formNameElement.sendKeys(protractor.Key.TAB);