Построение локаторов для web-приложений

t.me/qa_chillout

При покрытии автотестами web-приложения, одной из важных задач является обеспечение доступа к элементам пользовательского интерфейса. Иными словами, чтобы взаимодействовать с элементами интерфейса, необходимо к ним как-то обращаться. Для этого используют локаторы. В этой статье мы рассмотрим, что такое локаторы, как они используются в тестировании web-приложений, и как составить эффективные локаторы для тестов.

Что же такое локаторы? Основные определения

Давайте мы с вами представим город, например “Солнечный”, в котором есть несколько районов, например “Северный”, “Центральный”, “Южный”. В каждом районе есть улица, на улице находятся дома, которые имеют нумерацию, например 11ый дом или 56ой дом и так далее. А в каждом доме имеются квартиры. У каждой квартиры есть свой номер, например, это 503ая, 286ая, 759ая и так далее. Каждая квартира расположена на определенном этаже, например, 759ая квартира находится на 7ом этаже, а 503ая на 5ом.

Например, у вас в другом районе живет дедушка и вы хотите хотите отправить письмо ему. Вы указываете адрес: город Солнечный, район центральный, улица Пушкина, дом 11, квартира 759. Мы взяли большую сущность – город, а далее стали перемещаться к частному - квартире.

В автоматизации тестирования web-приложений, локатором называется путь к определенному элементу в интерфейсе, с помощью которого автоматизированный тест сможет найти этот элемент. Иными словами, локатор это адрес до определенного элемента, как в нашем примере с квартирой в городе, только квартира – сам элемент (это может быть кнопка, текст, поле и многие другие элементы экрана приложения), а город, улица, дом – все это те места, где наша “квартира” находится. Например, городом в приложении может быть какой-то модуль приложения, а улицей – часть экрана, а домом уже какой-либо конкретный раздел экрана.

Обратиться к квартире по одному только номеру не получится. Если мы захотим найти квартиру 759 в городе, то таких вариантов может быть несколько и тогда наше письмо до нашего дедушки не дойдет. В нашем приложении ровно все также. Если мы обращается к какому-либо элементу, который имеет название, например “Lable”, а таких элементов может быть в проекте много, то и обратиться мы к ним не сможем, будет найдено их несколько и программа выдаст ошибку. Дает такие названия элементам разработчик или же тестировщик, если имеет доступ к коду проекта. Делается это непосредственно в среде разработки, в коде самого проекта.

Веб-страница – ресурс, который открыт у пользователя в браузере (иными словами наш корабль).

Веб-элемент – это то, что пользователь видит на веб-странице (например, это могут быть названия, текст, кнопки, поля для ввода, различные ползунки и многое другое – иными словами, квартиры в нашем доме).

Локатор – объект, который находит и возвращает веб-элементы на странице по заданному запросу, другими словами это путь до элемента (как в нашем примере с домом).

Поиск локаторов в web-приложениях

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

CSS cелекторы, которые позволяют выбирать элементы на странице на основе их стилей и структуры. Они могут быть простыми (по тегу, классу, идентификатору) или сложными (с комбинацией условий).
XPath – это язык запросов для выбора элементов в XML-документах, таких как HTML-страницы. Он предоставляет широкие возможности для точного поиска элементов. В том числе позволяет обращаться к родительскому элементу через дочерний – т.е делать шаг назад в обращении к элементу.
Идентификаторы (ID) – уникальный номер (название), который можно использовать как локатор. Идентификаторы обычно являются наиболее стабильными локаторами.
Классы и атрибуты – выбор элементов по ним также является распространенным методом. Однако, классы могут повторяться, и изменение структуры страницы может повлиять на локатор.

Построение XPath

Если говорить про идентификаторы, css, классы и тд, то тут нет ничего сложного, достаточно просто найти нужное название, а вот с построением XPath несколько сложнее.

XPath (XML Path Language) – это язык запросов, который используется для навигации и выбора элементов в XML-документах, таких как HTML-страницы. В зависимости от конкретных ситуаций и задач, существует несколько видов XPath-выражений:

Абсолютный путь – начинается с корневого элемента и указывает полный путь к целевому элементу. Например: /html/body/div[1]/form/input.
Относительный путь – начинается с текущего контекста и более гибкий по сравнению с абсолютными. Относительные выражения начинаются с двойной косой черты (//). Например: //div[@class='container']//button.

Также существуют и другие типы построения XPath:

XPath с предикатами. Предикаты используются для добавления дополнительных условий к выбору элементов - это осуществляется с помощью указания предиката в скобках. Например: //input[@type='text'][@id='username']. Таким образом мы можем выбирать элемент по его атрибуту( id, class, name, data-* и другие).
Поиск по текстовому содержимому, например: //a[text()='Home']. Для поиска по тексту здесь используем встроенную функцию xpath - text().
А иногда нужно найти элемент по какой-то части текста. Для этого используют функцию contains(). Пример: //span[contains(text(), 'Welcome')].
Использование операторов сравнения, таких как >, <, =, для выбора элементов на основе числовых значений. Пример: //table[@rows > 5].
Также XPath предоставляет различные функции, такие как starts-with(), ends-with(), для более гибкого поиска. Пример: //input[starts-with(@name, 'user')].
Сочетание выражений с использованием логических операторов and, or, not. Пример: //input[@type='text' and @name='username'].
XPath также поддерживает псевдоэлементы, такие как last(), position(), following-sibling, для выбора элементов относительно других элементов.

Рассмотрим один пример:

//input[@type='phone']

данный xpath означает: “выбрать любой input-элемент, имеющий атрибут типа со значением 'phone' “.

где:

// — начать поиск с любого места на странице

input — HTML-тег, то есть на этом месте может быть любой тег в HTML (например p, button, span, div и тд)

type — атрибут, любой атрибут в HTML (class, checkbox, src, и тд)

phone — значение атрибута type.

Выбор видов XPath зависит от задачи и структуры страницы.

XPath, id или name - что лучше?

Выбор между XPath, id и name зависит от контекста и особенностей вашего проекта. Давайте поразмышляем что же лучше использовать.

ID (идентификатор) является уникальным идентификатором элемента, что делает его самым стабильным и быстрым локатором. Использование ID обычно рекомендуется, когда элемент имеет уникальный идентификатор.

Однако не все элементы имеют уникальные ID. В некоторых случаях, особенно на динамически генерируемых страницах, ID может быть динамическим или отсутствовать вообще.

Атрибут name часто используется для именования элементов в формах. Он может быть стабильным локатором, если элементы имеют уникальные имена.

Однако также, как и ID, не все элементы имеют уникальные имена. Некоторые элементы могут иметь одинаковые имена на странице.

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

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

Вывод:

Используйте ID, если элемент имеет уникальный идентификатор.
Используйте Name, если элементы имеют уникальные имена, особенно в формах.
Используйте XPath, когда нет уникальных ID или имен, и вы хотите выбрать элементы на основе их структуры, текста или других атрибутов.

Полезные советы

Вот некоторые советы по тому, как искать локаторы для элементов в веб-приложении:

если элемент имеет уникальные атрибуты, такие как id или name, используйте их как локаторы. Эти атрибуты обычно стабильны и позволяют точнее идентифицировать элемент;
избегайте длинных путей в XPath;
используйте CSS селекторы (они позволяют выбирать элементы на основе стилей и структуры);
иногда у элементов могут быть уникальные соседние, по которым вы можете ориентироваться;
если какие-либо атрибуты имеют динамические значения, такие как временные метки или уникальные идентификаторы сессии, избегайте их использования в локаторах, так как они будут меняться с каждой загрузкой страницы;
после построения локатора, всегда проверяйте, что по этому локатору стабильно ищется элемент;
структура приложения может меняться со временем. Периодически проверяйте и обновляйте локаторы, если это необходимо.

Важно учитывать стабильность элементов, читаемость кода и возможность переиспользования локаторов при выборе наилучшего способа идентификации элементов в веб-приложении.

DevTools и поиск локаторов. Практика

Для того, чтобы перейти непосредственно к построению локаторов, давайте откроем DevTools и перейдем в раздел Elements. А в качестве примера, мы возьмем главную страницу Google и кнопку “Мне повезет!”:

Откроем DevTools и попробуем построить XPath для кнопки Мне повезет. В дереве элементов (DOM) мы можем увидеть нашу кнопку:

Для построения полного (абсолютного) пути мы будем двигаться с самого начала:

/html/body/div[1]/div[3]/form/div[1]/div[1]/div[4]/center/input[2]

При построении полного пути стоит помнить о принципе матрешки, что внутри каждого элемента есть еще один и мы как бы раскрываем эту матрешку.

Относительный путь строится, например от ближайшего к нашему элементу класса:

//*[@class="FPdoLc lJ9FBc"]/center/input[2]

данный путь был построен от ближайшего класса "FPdoLc lJ9FBc"

Для того, чтобы проверить, верный ли XPath мы построили, стоит пользоваться поиском. Для этого нажмите сочетание клавиш CTRL+F и у вас появится внизу DevTools поисковая строка. Поместив в нее составленный XPath вы с легкостью сможете проверить верно ли он построен и нет ли более 1 совпадения. В нашем примере все построено верно и найден всего лишь один такой элемент:

Обратите внимание, что если у вас будет 1 из 2 или более найденных совпадений, то стоит изменить составленный XPath, выбрав другой ближайший класс, попробовать найти элемент по названию и так далее. В противном случае программа может использовать не тот элемент, который нужен вам, и выдаст ошибку.

Обсудить статью, узнать больше можно в телеграм канале «Тестировщики нужны».