Ссылка на элементы html при тестировании транспортира
Я тестирую угловое приложение в Protractor и привязываю для доступа к элементам html-формы.
У меня есть этот ярлык в моей форме:
<label #name class = "form-control-label" id='#name' for = "field_nombre" >Nombre</label>
И этот компонент, который вызывает URL-адрес шаблона следующим образом:
template: require('./paciente-dialog.component.html'),
Теперь, когда я перехожу к этой html-форме, URL-адрес приложения - '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.info('This is the label'+ page.getParagraphText() );
}
Теперь вместо названия ярлыка выводится undefined. Я делаю то же самое при тестировании жасмина, и он работает. Я сделал что-то не так?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info('This is the label ' + text);
});
На самом деле, какой маршрут я должен ввести в метод навигации? Я указал маршрут, который вижу в браузере при развертывании приложения. Итак, как он должен знать, к какой форме он должен относиться? Я жасмин, например, ссылаюсь на компонентную сеть и работаю с объектами компонентной сети
Я отправил вам пример, содержащий все важные файлы и факты. Пожалуйста, поработайте над этим. Может быть, вам не хватает всего лишь небольшого кусочка головоломки.
Может быть, вы упускаете что-то, чего я не вижу, поскольку ваш пример сокращен. Вот полный пример, содержащий все необходимое для одного теста.
У меня есть воображаемый компонент foo, расположенный в папке foo. В этой же папке есть PO-файл.
Компонент Foo (символическая структура папок)
- 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-файл в свой Testfile и создайте его локальный экземпляр. Затем используйте его в своих тестах. Именно так я делаю это каждый день.
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.info('This is the label ' + text);
expect<any>(text).toContain('foo');
});
});
Я хочу сослаться на этикетку. Разве вы не печатаете здесь значение вашей константы, которое является в точности «name», или почему вы инициализируете ее для имени?
Как вы теперь можете ссылаться на один и тот же ярлык из этой HTML-формы, а не из другой?
Нет, вы действительно ссылаетесь на этикетку. Я переименовал поле id, чтобы прояснить это. На ваш второй вопрос легко ответить. Вы не можете знать этого с точки зрения PO-файла или среды тестирования. Это ваша работа, и не поймите неправильно. Вы должны выбрать абсолютно уникальные идентификаторы.
В моей компании мы следим за тем, чтобы идентификатор никогда не повторялся, давая ему имя компонента в качестве префикса и добавляя тип при необходимости. Например: foo-component-customer-name-label или foo-component-customer-address-input. Тогда вы можете быть уверены, что это поле уникально для вашего приложения. - Я действительно рекомендую вам подумать о хорошей схеме идентификаторов, потому что, когда дело доходит до тестирования, вам понадобятся уникальные идентификаторы повсюду, и вы очень скоро столкнетесь, когда идентификаторы будут повторяться.
Если бы это вам немного помогло, я был бы очень признателен, если бы вы отметили один из моих ответов как решение.
Я имею в виду, что у меня разные идентификаторы, но, поскольку он говорит undefined, возможно, это не относится к форме html. Есть способ узнать? Я ЖАСМИН, вы знаете это, потому что вы помещаете ссылку на компонент в свой тестовый стенд, который принадлежит этой компонентной сети. И он ссылается только на HTML-коды, принадлежащие этому компоненту. Между тем здесь у нас нет ссылки на HTML-форму. Может быть, поможет правильная навигация.
Конечно, но я должен убедиться, что это работает так. До сих пор там написано имя undefined
Затем воспользуйтесь инструментами разработчика своего браузера и проанализируйте HTML-DOM своей страницы. Посмотрите на id-тег ярлыка. - Обычно вы можете заставить транспортир открывать браузер во время тестирования. Тогда вы должны увидеть, правильно ли вы попали на страницу. Может, ты просто постишься. Тестирование с помощью транспортира означает всегда ждать angular или браузера. Я добавил еще один метод в свой пример выше. 'calls the browser-link' Пожалуйста, посмотрите.
Но браузер закрывается через одну секунду.
Извините, но это должно иметь какое-то отношение к настройке вашего транспортира. А как насчет теста? Теперь он работает так, как ожидалось?
Привет, теперь я думаю, что последняя проблема, которую вы должны отложить в сторону. Удалите метод beforeEach()! Создайте экземпляр page только один раз с помощью const page = new AppPage();, как я сделал в моем примере с fooComponentPO.
Он говорит, что имя не определено. Думаю, это проблема маршрутов. Потому что он не знает, на какое имя ссылаться.