- Абсолютные пути
- Индексы
- Многочисленные классы
- Динамические и автогенерируемые ID
- Уникальность
- Скрытые элементы
- Текст
- ИИ-генерация
Хрупкие селекторы часто приводят к сбоям в тестах и могут стать причиной проблем с их обслуживанием. В этой статье мы рассмотрим лучшие практики, которые помогут вам избежать распространенных ловушек и разработать стабильные, эффективные селекторы.
Избегайте абсолютных путей в XPath и CSS
Абсолютные пути легко «ломаются» с изменением структуры страницы при добавлении или удалении элементов, что приводит к большим затратам времени на обслуживание.
В то время как относительные локаторы дают некоторые преимущества:
- Остаются стабильными даже при незначительных изменениях структуры страницы, поскольку не зависят от точной иерархии элементов.
- Легко читаются и поддерживаются. Если элемент изменит положение в DOM, вам не нужно будет обновлять локатор.
XPath
ПРАВИЛЬНО: /html/body/div[1]/div[2]/button НЕПРАВИЛЬНО: //button[@data-qa='submit-button']
CSS
ПРАВИЛЬНО: html>body>div:nth-child(2)>button НЕПРАВИЛЬНО: button[data-qa='submit-button']
Избегайте индексов в локаторах
Использование индексов в локаторах может сделать тесты нестабильными, поскольку добавление или удаление элементов изменяет точность локатора, что приводит к сбоям в тестах. Кроме того, индексы затрудняют определение элемента, на который идет ссылка.
С другой стороны, локаторы без индексов менее склонны к поломкам из-за незначительных структурных изменений. Кроме того, их легко поддерживать даже при добавлении или удалении дополнительных элементов.
XPath
НЕПРАВИЛЬНО: //div[2]/div[5]
CSS
НЕПРАВИЛЬНО: div:nth-child(7)
Не используйте несколько классов в локаторах
Классы CSS могут часто изменяться из-за стилизации, респонсивного дизайна, обновления фреймворка и рефакторинга кода. Поэтому использование множества классов в локаторах повышает сложность обслуживания. Также, многочисленные классы в локаторах затрудняют понимание. Вместо этого используйте более устойчивый локатор, сосредоточившись на уникальных атрибутах или одном классе, если он согласованный.
XPath
НЕПРАВИЛЬНО: //div[@class='col-xs-1 col-sm-7 col-md-5 itemx ng-scope input-large'] ПРАВИЛЬНО: //div[contains(@class, 'input-large')]
CSS
НЕПРАВИЛЬНО: div.col-xs-1.col-sm-7.col-md-5.itemx.ng-scope.input-large ПРАВИЛЬНО: div[class*="input-large"]
Избегайте динамических и автоматически генерируемых ID в локаторах
Фреймворки генерируют динамические ID для элементов сложных приложений или приложений на основе компонентов.
Автоматически генерируемые идентификаторы сложны при автоматизации тестирования, поскольку их значения могут меняться при каждой загрузке страницы, новых сессиях или изменении последовательности компонентов. Одним из решений может быть использование кастомных атрибутов, созданных для тестирования, если это возможно. Или использование значимых и уникальных атрибутов.
XPath
НЕПРАВИЛЬНО: //button[@class='btn-primary-1850'] ПРАВИЛЬНО: //button[@data-qa='submit-button']
CSS
НЕПРАВИЛЬНО: button.btn-primary-1850 ПРАВИЛЬНО: button[data-qa="submit-button"]
Случайные числа могут быть полезны, если они представляют собой значимые значения в системе, такие как уникальные идентификаторы. При использовании стратегии предварительной загрузки тестовых данных случайные числа можно использовать для создания стабильных локаторов.
Гарантируйте уникальность локаторов
Неуникальные локаторы — это те, которые соответствуют нескольким элементам на странице. Это может привести к сбоям при тестировании, поскольку сценарий автоматизации может выбрать не тот элемент: например, нажать не ту кнопку, или взаимодействовать со скрытыми или отключенными элементами, которые не предназначены для взаимодействия с ними. Убедитесь, что каждый локатор уникально идентифицирует элемент. Ниже приведены некоторые стратегии для решения распространенных проблем.
Используйте отношения «родитель-ребенок» для настройки элементов по отношению друг к другу. Перемещайтесь по DOM, работая с элементами по их иерархической структуре:
<!-- Первая форма с id "login-form" -->
<form id="login-form">
<input type="email" id="email" />
<input type="password" id="password" />
<button id="submit-button">Log In</button>
</form>
<!-- Вторая форма с id "signup-form" -->
<form id="signup-form">
<input type="email" id="email" />
<input type="password" id="password" />
<button id="submit-button">Sign Up</button>
</form>
- Проверьте оба элемента: Откройте инспектор страниц и изучите HTML-структуру видимых и скрытых элементов.
- Сравните атрибуты: Найдите различия в атрибутах, индикаторах видимости, таких как aria-hidden или display.
- Создайте локатор с помощью атрибута видимости: Используйте уникальный атрибут для выбора видимого элемента.
<button class="submit-button hidden" data-qa="submit-button">Submit</button> <button class="submit-button" data-qa="submit-button">Submit</button>
CSS: button.submit-button:not(.hidden)
Если нужно оценить уникальность атрибутов нескольких родительских узлов, можно воспользоваться опцией ‘Copy OuterHTML‘ в Developer Tools. Затем вставьте HTML-код в инструмент сравнения, например diffchecker.com, чтобы быстро выявить различия между ними.
Альтернативное решение — хранить все элементы (как видимые, так и скрытые) в коллекции веб-элементов, а затем программно отфильтровать видимые.
Осторожно используйте локаторы, связанные с текстом
Локаторы на основе текста, типа тех, которые полагаются на видимый текст внутри элементов (например, button[text()=’Submit’]), следует использовать внимательно, поскольку текстовый контент на странице может весьма часто меняться. Некоторые причины, по которым текст может меняться:
- Локализация: Контент на нескольких языках.
- Обновление контента: Веб-сайты регулярно обновляют свой контент, включая метки, описания и другие элементы, чтобы дать новую информацию или изменить дизайн.
- Персонализированный контент: Некоторые сайты персонализируют контент и текст на основе предпочтений пользователей (клиентов).
Текстовые локаторы эффективны при стратегии предварительной загрузки тестовых данных, когда ожидаемый текст известен заранее.
Использование ИИ для создания локаторов
Также можно использовать ИИ для создания стабильных локаторов. Такой подход продемонстрировал Марк Винтерингем во время сессии 60 Seconds на YouTube-канале @test-automation-experience.
Вот такой промпт:
Вы являетесь экспертом в области автоматизации тестирования на Java. Возьми html-файл, указанный в поле, разделенном тремя хэшами, и преобразуй его в Java Selenium page object. Перед выводом класса проверь правильность всех CSS-селекторов.
###
(Здесь HTML-код)
###
