Прежде чем перейти к написанию кода, давайте вспомним с чего мы начинали написание автотеста, а именно тест-дизайн.
В шагах итогового сценария присутсвуют шаги, начинающиеся со слов “Найти на странице поле/кнопку”. То есть, прежде чем совершать какие-то действия с элементом на странице (заполнять поле, нажимать кнопку и тд) нужно этот элемент на странице найти.
Для этого используются локаторы - это запросы, которые ищут элементы страницы по их характеристикам (например, по тексту, по классу или по id).
Локаторы миогут находить один элемент, например, кнопку “Войти” или несколько, например, все ссылки на странице.
От того, насколько правильно и точно задан локатор зависит точность писка, можно найти именно тот элемент, который нужен, а можно не найти ни одного или найти больше одного.
Один из наиболее популярных способов поиска элементов на странице это XPath. Именно его мы будем в дальнейшем использовать в наших автотестах.
XPath — это язык, на котором можно написать запрос, который поможет найти любой элемент на странице путем описания пути до него.
Путь до элемента можно задавать по разному.
Абсолютный путь до элемента.
Абсолютный путь до элемента - это полный путь от корневого элемента жо целевого. Например, путь до логотиа компании в хидере страницы будетт выглядеть так: html/body/div/header/div[3]/div[2]/div/div/a/img
Этот способ не является оптимальным, поскольку любое изменение верстки страницы приведет к тому, что элементы по таким локаторам не будут найдены. Поэтому используется другой способ.
Поиск элементов по атрибутам
Можно искать элемент по любому из его атрибутов, но лучше выбрать какой-то уникальный атрибут - атрибут значение которого единственное на странице, например, только на одной кнопке на странице написано “Обсудить проект”. Но чаще всего такой атрибут - это id.
Синтаксис поиска элемента по id будет такой $xpath("html/body/div[@id='1']").
Часто испрользуется поиск элементов с использованием относитьельного пути и атрибутов. Весь путь до корневого элемента заменяется символами .//. Например, для ссылки пункта меню “О компании” запрос получится таким: $xpath(".//a[contains(text(),'О компании')]").
Более подробно про xpath можно почитать тут.
Кроме того для большинства популярных браузеров существуют специальные плагины, которые помогают работать с локаторами xpath.
Кроме xpath, другим популярным методом поиска элементов на стрнанице является поиск по css. В данном случае применяют CSS-селекторы - это специальные выражения, которые указывают на тот или иной элемент на странице. Например, [class='logo'] - найти элемент, у которого знацение атрибута class = logo. Более подробно тут.
При построении XPath важно с одной стороны добавить в запрос достаточно, чтобы элемент был найден односзначно, с другой стороны - не добавлять ничего лишнего, чтобы при изменении верстки страницы XPath не перестал работать.
Потренироваться искать элементы страницы с помощью xpath или css можно используя инструменты разработчика браузера.
Например, чтобы найти кнопку “Оставить заявку” на главной странице сайта Softwarecats нам понадобится такой xpath-локатор: $xpath(".//a[contains(text(),'Оставить заявку')]").
Нужно ввести его в строку поиска в консоли браузера и если локатор составлен правильно, элемент будет найден.
Так.
Потренироваться искать элементы страницы с помощью xpath или css можно используя инструменты разработчика браузера.
Например, чтобы найти кнопку “Оставить заявку” на главной странице сайта Softwarecats нам понадобится такой xpath-локатор: $xpath(".//a[contains(text(),'Оставить заявку')]").
Нужно ввести его в строку поиска в консоли браузера и если локатор составлен правильно, элемент будет найден.
Так.
Или так.
Часто приходится работать со сложными случаями: найти несколько элементов, выбрать только определенные элементы из списка, найти скрытые элементы и т.д. Главное не боятся и использовать все возможности xpath для составления локаторов.
Google и немного упорства, и я уверена - все получится. А вот здесь можно посмотреть несколько примеров.
Google и немного упорства, и я уверена - все получится. А вот здесь можно посмотреть несколько примеров.