Использование правильных селекторов

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

Типы селекторов

Для поиска элементов на веб-странице WebdriverIO предоставляет различные способы выбора элементов. Основные типы селекторов включают:

  1. CSS-селекторы
  2. XPath-селекторы
  3. Текстовые селекторы
  4. Селекторы с использованием свойств
  5. Селекторы с использованием классов и идентификаторов

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

CSS-селекторы

CSS-селекторы являются одними из самых быстрых и популярных для поиска элементов. Они используют атрибуты HTML, такие как id, class, name, а также псевдоклассы и псевдоэлементы.

Пример CSS-селектора:

const element = $('#button-id');

Преимущества:

  • Быстродействие: браузеры оптимизированы для работы с CSS-селекторами.
  • Простой синтаксис.
  • Хорошая читаемость и поддерживаемость кода.

Недостатки:

  • Иногда трудно выбрать уникальный элемент, если структура HTML сложная.

Чтобы правильно использовать CSS-селекторы, следует избегать применения слишком общих или часто повторяющихся атрибутов, таких как class или name, если они используются для нескольких элементов на странице.

XPath-селекторы

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

Пример XPath-селектора:

const element = $('//button[@id="button-id"]');

Преимущества:

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

Недостатки:

  • Могут быть медленнее по сравнению с CSS-селекторами.
  • Сложный синтаксис, особенно при работе с длинными иерархиями DOM.

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

Текстовые селекторы

Текстовые селекторы позволяют находить элементы по тексту, который содержится внутри них. В WebdriverIO для этого можно использовать метод .getText().

Пример текстового селектора:

const element = $('=Текст на кнопке');

Преимущества:

  • Легко найти элементы, если их текст уникален и очевиден.
  • Хорошо подходит для поиска элементов с динамическим содержимым.

Недостатки:

  • Тексты могут меняться, что делает такие селекторы менее устойчивыми.
  • Трудно найти элемент, если текст не уникален.

Текстовые селекторы полезны, когда интерфейс содержит кнопки, ссылки или другие элементы, которые имеют понятные и уникальные надписи.

Селекторы с использованием свойств

Для поиска элементов можно также использовать их свойства. Это может быть полезно, если нужно взаимодействовать с элементами, которые не имеют уникальных классов или идентификаторов.

Пример:

const element = $('input[name="email"]');

Преимущества:

  • Позволяет искать элементы, основываясь на их атрибутах, таких как name, type, value.
  • Удобно для работы с формами и элементами ввода.

Недостатки:

  • Не всегда атрибуты элементов уникальны.
  • Требуется точное знание структуры HTML-формы.

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

Практика выбора селекторов

Уникальность и стабильность

Правильный селектор должен быть уникальным и стабильным, чтобы тесты не ломались при изменении других элементов на странице. Лучший способ достичь этого — использовать уникальные атрибуты, такие как id или уникальные data-* атрибуты. Если атрибуты, такие как class, используются для нескольких элементов, это может привести к нестабильности тестов.

Пример использования уникального атрибута:

const element = $('[data-testid="unique-element"]');

Минимизация зависимостей от внешних факторов

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

Пример:

const element = $('.login-button');  // Хорошо, если класс стабильный

Использование структуры DOM

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

Пример использования XPath:

const element = $('//div[@class="form"]/button[text()="Submit"]');

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

Советы по улучшению производительности селекторов

  1. Использование ID Применение id — один из самых быстрых методов, так как браузеры оптимизируют работу с ними. Если возможно, используйте атрибут id для выбора элементов.

  2. Сложные CSS-селекторы Использование длинных или сложных CSS-селекторов может замедлить выполнение тестов, так как браузер должен обработать множество атрибутов и псевдоклассов. Лучше избегать чрезмерно длинных цепочек селекторов.

  3. Избегайте использования * Селекторы типа * для поиска всех элементов на странице или в контейнере являются очень затратными по времени и могут существенно замедлить выполнение тестов.

  4. Ограничение поиска Чтобы улучшить производительность, можно ограничить область поиска элементов. Например, сначала получить родительский элемент, а потом искать в нем дочерние элементы.

Тестирование и отладка селекторов

При разработке тестов важно регулярно проверять правильность выбора селекторов. Для этого можно использовать инструменты разработчика в браузере (например, Chrome DevTools), чтобы убедиться в уникальности и правильности выбранных селекторов.

Пример проверки:

const element = $('#button-id');
console.log(element.isDisplayed());

Для отладки WebdriverIO поддерживает различные методы, такие как debug() и pause(), чтобы приостановить выполнение тестов и проверить состояние элементов на странице.

Рекомендации по выбору селекторов

  1. Используйте уникальные и стабильные атрибуты, такие как id или data-*.
  2. Избегайте зависимостей от текста, если он может изменяться.
  3. Для динамических элементов используйте data-* атрибуты или уникальные классы.
  4. Не полагайтесь на универсальные селекторы, такие как * или сложные XPath-выражения, если есть более быстрые и стабильные альтернативы.

Правильный выбор селектора — ключ к стабильным и быстрым тестам.

Оглавление