量角器基本错误消息 E2E

Question

刚开始学习angular，现在专注于自动化测试。我有一个非常简单的应用程序，它包含一个要求用户输入电子邮件的基本表单。我有一个 validators.required 附加到电子邮件，因此用户必须输入一些文本。如果用户未输入任何文本，则在输入字段下方会出现一条消息，说明该表单是必需的。我正在尝试在 Protractor 中测试此消息是否出现，但运行出错了。我认为这只是我的代码的一些非常简单的错误。我使用的是 angular 和 Jasmine 的最新版本。谢谢你。任何指导都会很棒，因为我在使用 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>

组件Class

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;
  }
}

对象Class

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'));
  }



}

规格Class

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);

谢谢 tehbeardedone

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);
});

此外，您可能想看看 protractor style guide。特别是关于页面对象的部分。您目前正朝着向测试添加不必要的复杂性的方向前进。我的意思是 page.getInputField().sendKeys(''); 之类的东西是不必要的，你可以用 page.myInputElement.sendKeys() 代替。

量角器基本错误消息 E2E

Protractor Basic Error Message E2E

jasmine

typescript

protractor

angular

angular6