Взятие ссылки на элементы HTML в тестировании транспортира

Question

Я тестирую угловое приложение в Protractor. И я пытаюсь получить доступ к элементам HTML-формы.

У меня есть эта метка в моей форме:

 <label  #name   class="form-control-label" id='#name'  for="field_nombre" >Nombre</label>

И этоКомпонент, который вызывает URL-адрес шаблона следующим образом:

   template: require('./paciente-dialog.component.html'),

Теперь URL-адрес приложения, когда я перехожу на эту HTML-форму, равен 'http://localhost:8080/#/paciente'

Поэтому я создаю этот po.tsфайл, который выводит меня на этот URL и хочет вывести имеющуюся у меня метку:

import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('http://localhost:8080/#/paciente');
  }

  getParagraphText() {
    //return element(by.css('app-root h1')).getText();
    return element(by.css('#name')).getInnerHtml;
  }
}

import { AppPage } from './app.po';


describe('Second  Test', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });
  it('should display welcome message', () => {


    page.navigateTo();

    console.log('This is the label'+ page.getParagraphText() );

    }

Теперь он печатает неопределенное имя вместо названия метки.Я делаю то же самое в тестировании жасмина, и это работает.Я сделал что-то не так?

Answer 1

Может быть, вы упускаете что-то, чего я не вижу, поскольку ваш пример сокращен.Вот полный пример, содержащий все необходимое для одного теста.

У меня есть мнимый компонент foo, расположенный в папке foo.В этой папке у меня также есть PO-файл.

Foo Component (символическая структура папок)

• foo.component.ts
• foo.component.css
• foo.component.html
• foo.component.po.ts

foo.component.html

Содержит метку, о которой мы говорим

<label  #name  class="form-control-label" id="foo-name"  for="field_nombre" >Nombre</label>
...
<label  #age  class="form-control-label" id="foo-age"  for="field_edad" >Edad</label>

foo.component.po.ts

Константы являются заменой полей id элементов вHTML-шаблоны.

import { ElementFinder, element, by, browser } from 'protractor';

const nameInputField = 'foo-name';
const ageInputField = 'foo-age';

export class FooComponentPO {

    getNameInputField(): ElemenFinder {
        return element(by.id(nameInputField));
    }

    // just for the example
    getAgeInputField(): ElemenFinder {
        return element(by.id(ageInputField));
    }

}

foo.test.e2e.ts (находится где-то еще в вашей иерархии каталогов)

Импортируйте ваш PO-файл в свой тестовый файл исоздать локальный экземпляр этого.Тогда используйте это в своих тестах.Именно так я делаю это каждый день.

import { FooComponentPO } from '../../src/app/components/foo/foo.component.po.ts';
import { ElementFinder, element, by, browser } from 'protractor';

const fooComponentPO = new FooComponentPO();

it('calls the browser-link', () => {
    page.navigateTo(); // this is your call.

    // now the browser needs a while until the page is build up.
    // wait some time
    browser.waitForAngular();
    browser.sleep(2000);
});

// Now give it a try
it('should contain the text foo', () => {

     fooComponentPO.getNameInputField().getAttribute('value').then( text => {
         console.log('This is the label ' + text);
         expect<any>(text).toContain('foo');
     });

});

Answer 2

Транспортир может действовать и реагировать немного иначе, чем Жасмин.Попробуйте это так:

HTML (обратите внимание на атрибут id без хэша)

<label  #name  class="form-control-label" id="name"  for="field_nombre" >Nombre</label>

AppPagePO

import { ElementFinder, browser, by, element } from 'protractor';

getParagraphText(): ElementFinder {
    return element(by.id(name));
}

Тест

page.getParagraphText().getAttribute('value').then( text => {
    console.log('This is the label ' + text);
});