Понимание селекторов Playwright Руководство

Понимание селекторов Playwright

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

Это руководство углубляется в селекторы в Playwright, демонстрируя их важность, типы и лучшие практики.

Что такое селекторы в Playwright?

Селекторы в Playwright – это строки, которые идентифицируют определенные элементы на веб-странице. Они используются для выбора этих элементов для взаимодействия, таких как щелчок, набор текста или чтение текста. Селекторы делают ваши тесты более читаемыми и устойчивыми к изменениям, а также помогают поддерживать фокус на поведении, которое вы хотите протестировать.

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

В Playwright доступно несколько типов селекторов. Среди них CSS-селекторы, XPath-селекторы, селекторы текста и селекторы атрибутов. Давайте рассмотрим каждый из них.

• Топ-10 генераторов QR-кодов на основе искусственного интеллекта в 2023 году
• Сила генеративного искусственного интеллекта в Snapchat
• Что такое искусственный узкий интеллект (ANI)?

CSS-селекторы

CSS-селекторы основаны на языке CSS, используемом для создания веб-страниц. Они позволяют нам идентифицировать элементы на веб-странице с помощью CSS-свойств. CSS-селекторы могут нацелиться на элементы по их типу (например, div, button, a), классу (.classname), идентификатору (#idname), атрибуту ([attribute=value]) или их комбинации.

Например, в Playwright вы можете нацелиться на кнопку с идентификатором submit, используя page.click(‘#submit’). Если у вас есть уникальный класс или атрибут, вы можете выбрать их аналогичным образом. CSS-селекторы также позволяют делать более сложные запросы, например, выбирать первый дочерний элемент узла (:first-child), выбирать элементы с определенными отношениями между соседними элементами (+, ~) или выбирать элементы, находящиеся в определенном состоянии (:hover, :focus).

XPath-селекторы

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

Например, page.click(‘//button[normalize-space(.)=”Sign Up”]’) нацеливается на кнопку с точным текстом “Sign Up”. Выражение / / указывает XPath на то, чтобы искать по всему HTML-документу. button говорит XPath искать только элементы button. Часть normalize-space(.)=”Sign Up” является функцией, которая удаляет ведущие и завершающие пробелы из строки и заменяет последовательности пробелов одним пробелом. Это может быть очень полезно при работе с непредсказуемым форматированием.

Селекторы текста

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

Например, с помощью команды page.click(‘text=”Sign Up”’) Playwright будет искать элемент, который отображает текст “Sign Up” и нажимать на него. Это работает для кнопок, ссылок, div’ов, span’ов и других элементов, которые могут содержать видимый текст.

Селекторы атрибутов

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

Например, команда page.click(‘[disabled]’) нацеливается на элемент с атрибутом disabled, независимо от его типа, класса или идентификатора. Вы также можете нацеливаться на конкретные значения атрибутов – например, page.click(‘[value=”Submit”]’) нажмет на элемент с атрибутом value со значением Submit.

Работа с составными селекторами

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

Составные селекторы в Playwright представляют собой комбинацию различных типов селекторов, объединенных с помощью оператора >>. Этот оператор указывает, что целевой элемент должен соответствовать всем объединенным селекторам в последовательности.

Разберем данный пример: page.click(‘css=.container >> text=Submit’). В этой команде:

• css=.container использует CSS-селектор для выбора элемента с классом container. CSS-селекторы часто используются из-за их всеобщего присутствия в веб-разработке, их точности и читаемости.
• >> – это оператор, который объединяет селекторы. Он создает отношение между селекторами, указывая, что элемент text=Submit должен быть потомком (прямым или косвенным) элемента .container.
• text=Submit использует селектор текста для выбора элемента, отображающего видимый текст “Submit”. Это пример выбора элементов с точки зрения пользователя, поскольку пользователи часто взаимодействуют с элементами, основываясь на видимом тексте.

В практическом сценарии предположим, что у вас есть несколько кнопок “Submit” на веб-странице, каждая из которых находится в различном .container. Составной селектор позволяет взаимодействовать с конкретной кнопкой “Submit” в нужном .container.

Необходимо учитывать, что составные селекторы требуют тщательного рассмотрения. Их точность зависит от структуры веб-страницы; любые изменения в структуре могут потребовать обновления составных селекторов. Таким образом, хотя они обеспечивают более точное выбор элементов, они могут потенциально увеличить затраты на обслуживание, если структура веб-страницы часто меняется.

Пользовательские селекторы в Playwright

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

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

Вот концептуальный пример для иллюстрации:

Предположим, у вас есть пользовательский веб-компонент <my-component> с уникальным свойством data-state:

<my-component data-state=”active”>…</my-component>

Для выбора этого активного состояния вы можете создать пользовательский селектор в Playwright, который понимает это атрибут data-state:

 <span class="pre--content">playwright.<span class="hljs-property">selectors</span>.<span class="hljs-title function_">register</span>(<span class="hljs-string">'mySelector'</span>, {  <span class="hljs-comment">// Метод create используется для создания пользовательского селектора.</span>  <span class="hljs-title function_">create</span>(<span class="hljs-params">root, target</span>) {    <span class="hljs-keyword">return</span> root.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">`[data-state=<span class="hljs-subst">${target}</span>]`</span>);  },});</span>

Затем вы можете использовать этот пользовательский селектор в ваших командах Playwright:

await page.click(‘mySelector=active’);

Эта команда будет нажимать на <my-component> только тогда, когда data-state будет “active”.

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

Лучшие практики использования селекторов в Playwright

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

1. Приоритет уточненности перед гибкостью: Старайтесь выбирать селекторы достаточно уникальные для идентификации целей, но гибкие, чтобы простить небольшие изменения на веб-странице. Чрезмерно точные селекторы часто перестают работать при незначительных изменениях в пользовательском интерфейсе.

2. Используйте значимые атрибуты: id, name или data-testid обычно являются уникальными и постоянными — ваш выбор для селекторов. Это помогает создавать устойчивые тестовые скрипты.

3. Уделяйте приоритет читаемости: Ваш код не только для вас; он для вашей команды и будущего вас. Делайте селекторы интуитивно понятными и ясными, дополняя их комментариями по необходимости.

4. Мудро используйте составные и пользовательские селекторы: Это мощные инструменты для создания точных селекторов с учетом контекста. Однако используйте их благоразумно, так как они могут стать головной болью при обслуживании, если их использовать слишком часто или неправильно.

Заключение

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