Home

Автор: Кристин Джеквони (Kristin Jackvony)
Оригинал статьи
Перевод: Ольга Алифанова

Недавно я прошла этот отличный курс по поиску веб-элементов от Эндрю Найта в Test Automation University. Вдобавок к полезному синтаксису доступа к элементам, я также выучила еще один способ с пользой применить инструменты разработчика!

Один из самых раздражающих моментов UI-автоматизации заключается в попытке выяснить, как найти на странице элемент без идентификатора автоматизации. Возможно, вы знаете, что если открыть инструменты разработчика в Chrome, то можно кликнуть правой клавишей на элемент страницы, выбрать Inspect, и этот элемент подсветится в DOM. Это полезно, но тут скрыто нечто еще более полезное: там есть строка поиска, позволяющая вам увидеть, правильно ли сработает локатор, который вы планируете использовать в тесте. Разберем на конкретном примере, как использовать этот ценный инструмент.

Откройте эту страницу – часть проекта Дейва Хэффнера "Welcome to the Internet", где можно попрактиковаться в поиске веб-элементов. На странице Challenging DOM есть таблица с элементами, которые трудно найти. Мы попробуем найти элемент таблицы с текстом “Iuvaret4”.

Для начала откроем инструменты разработчика. Самый простой способ это сделать – кликнуть правой кнопкой по одному из элементов на странице и выбрать "Inspect". Инструменты разработчика откроются справа или внизу страницы, и секция Elements будет отображать DOM.

Теперь откроем панель поиска. Кликните в любом месте секции Elements, и нажмите Ctrl+F. Внизу секции откроется панель поиска с текстом “Find by string, selector, or XPath”.

Мы воспользуемся этим инструментом для поиска элемента "Iuvaret4" через CSS. Кликните правой кнопкой по этому элементу в таблице и выберите Inspect. Элемент подсветится в DOM. Изучая DOM, можно увидеть, что это элемент <td> (данные таблицы), часть элемента <tr> (строка таблицы). Давайте посмотрим, что будет, если ввести tr в строку поиска и нажать Enter. Вернется 13 элементов. Сбоку от поисковой панели можно нажимать на кнопки "вверх" и "вниз", чтобы подсвечивать каждый найденный элемент. Первый tr в результатах – всего лишь часть слова "demonstrates". Следующий – часть заголовка таблицы. Все прочие tr – части тела таблицы, и там же находится и нужный нам элемент. Введем в поиск запрос tbody tr и нажмем Enter. Выдача сократилась до 10 результатов – рядов тела таблицы.

Мы знаем, что нам нужен пятый ряд в теле таблицы, поэтому поищем tbody tr:nth-child(5). Выдача сократилась до нужного ряда. Теперь найдем нужный <td>-элемент. Это первый элемент в ряду, поэтому если искать tbody tr:nth-child(5) td:nth-child(1), поиск выдаст только нужный нам элемент.

Это хороший CSS-селектор, но можно ли его сократить? Попробуйте убрать "tbody" из поиска. Оказывается, элемент отлично находится и по запросу tr:nth-child(5) td:nth-child(1).

Теперь мы знаем хороший способ найти нужный элемент через CSS, но что будет, если в таблицу добавят новую строку, или строки находятся в случайном порядке? Как только строки изменятся, мы уткнемся в неправильный элемент. Куда лучше искать точный текст. CSS этого не позволяет, поэтому попробуем найти элемент через XPath.

Удалите содержимое поисковой строки. Начнем с поиска тела таблицы. Введите в поиск //tbody и нажмите Enter. Наведясь на подсвеченную секцию DOM, вы увидите, что на странице подсветилась вся таблица целиком.

Внутри тела таблицы находится строка с нужным элементом, поэтому теперь поищем //tbody/tr. Мы получим десять результатов – десять рядов таблицы.

Мы знаем, что нам нужно выбрать специфический <td>-элемент тела: элемент, содержащий “Iuvaret4”. Поэтому введем в поиск запрос //tbody/tr/td[contains(text(), “Iuavaret4”)]. Мы получим нужный нам результат, а также XPath-выражение, которым можем пользоваться.

Но его, как и наш CSS-селектор, можно сократить. Попробуйте убрать оттуда “tbody” и “tr”. Оказывается, что все, что нам нужно для XPath – это //td[contains(text(), “Iuvaret4”)].

Без этого полезного поиска мы бы перепробовали кучу разных комбинаций CSS и XPath в тест-коде, вновь и вновь прогоняя тесты, чтобы увидеть, что сработает. Эта функция инструментов разработчика позволяет экспериментировать с разными стратегиями локаторов, получая немедленные результаты!

Обсудить в форуме