Question

刚开始学习角度，我现在专注于自动化测试。我有一个非常简单的应用程序，它包含一个要求用户输入电子邮件的基本表单。我有一封附在电子邮件上的validators.required，因此用户必须输入一些文字。如果用户未输入任何文本，则输入字段下会显示一条消息，指出该表单是必需的。我试图在Protractor中测试此消息出现但遇到错误。我认为我的代码只是一个非常简单的错误。我正在使用角度和茉莉花的最新版本。谢谢。任何指导都会很棒，因为我在使用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'));
  }



}

Spec 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

1 个答案: