Как найти в транспортире элементы, которые находятся в других видах и не видны при просмотре исходного кода страницы

Я новичок в Angular и Protractor (и в веб-разработке, если на то пошло), поэтому приношу извинения за этот очевидный вопрос.

Я пытаюсь протестировать наше угловое приложение с транспортиром, и кажется, что я могу найти первый элемент на странице. Но не могу найти другие элементы, используя (id, name, model, css). Я попытался связать первый элемент, но всегда получаю ошибку «Элемент не найден» для второго элемента в цепочке. Я трижды проверил орфографию, поэтому уверен, что все правильно.

Наша страница состоит из нескольких разделов, и когда я «просматриваю исходный код», я вижу только корневой раздел.

<head>
</head>
<body>

<div ng-app="app" id="wrap">
    <div ui-view></div>
</div>

</body>
</html>

Но когда я проверяю элементы с помощью инструментов разработчика (F12), они существуют в DOM, я просто не знаю, как к ним добраться.

<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">

Я попытался получить доступ к элементу управления, указанному выше, используя следующее:

browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");

Я также создал одну кнопку и использовал partialButtonText и buttonText, ни один из которых не работал.

Я также пытался добавить некоторые асинхронные функции с помощью «тогда», но это тоже не сработало. Как получить доступ к этим элементам, если они не содержатся в одном html-файле?

Благодарность.....


person Donald Bardinelli    schedule 19.11.2015    source источник
comment
Было бы полезно увидеть фактический тест и вывод из Protractor.   -  person Jacek Ciolek    schedule 21.11.2015
comment
попробуйте это: browser.element(by.id(searchText)).sendKeys(test); browser.element(by.model(vm.searchText)).sendKeys(test); элемент (by.id (текст поиска)). sendKeys (тест); элемент (by.model (vm.searchText)). sendKeys (тест);   -  person rajana sekhar    schedule 24.11.2015


Ответы (2)


Если элемент не виден, я считаю, что транспортир не может с ним взаимодействовать. Он не может щелкнуть или получить текст или что-то еще, если он не виден, что фактически проверяется, прежде чем он сможет выполнить действие.

Что вы можете сделать, так это проверить наличие элемента, чтобы убедиться, что он находится где-то в html.

var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');

Это найдет элемент с селектором css id searchText, а затем проверит, присутствует ли он (существует в html).

Если вы хотите взаимодействовать с ним, помните, что транспортир смотрит вокруг, как человек. Если человек не может щелкнуть по нему, то и транспортир не сможет! Убедитесь, что он есть на странице и виден.

person user2020347    schedule 19.11.2015
comment
Я не думаю, что это проблема видимости, поскольку элементы, которые я ищу, находятся на экране, но не существуют в источнике представления текущей страницы, поскольку они разбиты на отдельные html (представления) и js (контроллеры) файлы. - person Donald Bardinelli; 23.11.2015
comment
Можете ли вы настроить пример plunkr? Насколько я знаю, любой элемент на странице должен существовать в источнике страницы. Его можно динамически добавлять и удалять, но в то время, когда он присутствует на вашем экране, он ДОЛЖЕН присутствовать в DOM и быть видимым при просмотре источника. Даже с отдельными html-представлениями и контроллерами они добавляются в DOM при вызове, а затем становятся видимыми и работоспособными с помощью транспортира. - person user2020347; 23.11.2015

У вас нет очков репутации, чтобы добавить это в комментарии к ответу пользователя 2020347, поэтому ... Когда вы говорите не в «просмотре исходного кода», я предполагаю, что вы говорите о динамически генерируемом контенте. Вместо использования источника просмотра используйте инструменты разработчика Chrome или Firefox, чтобы убедиться, что вы используете правильные локаторы.

Например, в консоли Chrome следующее должно возвращать результат после загрузки страницы: $$('#searchText') $$('input[data-ng-model="vm.searchText"]')

Также похоже, что вы отправляете ключи одному и тому же элементу.

Поскольку у вас есть транспортир углового приложения, следует дождаться загрузки всех элементов, но на всякий случай вы можете дождаться, пока элемент будет присутствовать и/или отображаться на странице.

person user2157249    schedule 23.11.2015