Транспортир основное сообщение об ошибке E2E

Question

Только начал изучать угловой и сейчас сосредоточен на автоматическом тестировании.У меня есть очень простое приложение, которое состоит из базовой формы, которая просит пользователя ввести свою электронную почту.У меня есть сообщение 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>

Класс компонента

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

Спасибо, Бородатый

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().