Playwright — это мощный фреймворк для автоматизации тестирования, который позволяет пользователям управлять веб-приложениями и проводить сквозное (end-to-end) тестирование. Он поддерживает множество браузеров и предоставляет удобные инструменты для взаимодействия с элементами на веб-страницах. В этой статье мы рассмотрим функциональность и реализацию селекторов и локаторов в Playwright.
Содержание
- Селекторы в Playwright
- Использование селекторов и локаторов в Playwright
- Полная реализация селекторов и локаторов в Playwright
- Заключение
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Селекторы в Playwright
Селекторы являются важным компонентом фреймворка Playwright. Они позволяют автоматизированным тестам взаимодействовать с веб-приложениями, например, проверять существование элемента на веб-странице, щелкать по доступным опциям и вводить данные. Playwright предлагает несколько типов селекторов и хороший набор методов для выполнения действий с выбранными элементами. Рассмотрим их подробнее.
1. CSS селекторы
CSS селекторы позволяют находить веб-элементы по их атрибутам, ID, классам и другим характеристикам. Они широко используются в тестировании.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Находим элемент с помощью CSS селектора
const element = await page.locator('h1');
// Взаимодействуем с элементом (например, кликаем)
await element.click();
await browser.close();
})();
2. XPath селекторы
XPath подходит для поиска элементов, у которых нет уникальных атрибутов или которые являются вложенными. В таких случаях XPath — это лучшее решение.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Находим элемент с помощью XPath
const element = await page.locator('//h1');
// Взаимодействуем с элементом (например, кликаем)
await element.click();
await browser.close();
})();
3 . API локаторов
API локаторов предлагает упрощенный способ нахождения веб-элементов с использованием цепочечного интерфейса и выполнения действий с выбранными элементами. Они предоставляют высокоуровневый способ работы с элементами, отличаясь от традиционных методов выбора, таких как CSS и XPath.
const buttonLocator = page.locator('button');
await buttonLocator.click();
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Находим элемент по значению его атрибута
const element = await page.locator('[name="search"]');
// Взаимодействуем с элементом (например, вводим текст)
await element.type('Playwright');
await browser.close();
})();
4. Селекторы по тексту
Селекторы по тексту — это удобный способ находить элементы на веб-странице, основываясь на их видимом текстовом содержимом. Это особенно полезно для взаимодействия с кнопками, ссылками и другими элементами интерфейса, где текст играет ключевую роль.
const element = await page.locator('text=Click Here');
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Находим элемент по его текстовому содержимому
const element = await page.locator('text=Welcome');
// Взаимодействуем с элементом (например, кликаем)
await element.click();
await browser.close();
})();
5. Работа с теневым DOM (shadow DOM)
Playwright предлагает возможность находить и взаимодействовать с элементами, расположенными в теневом DOM. Теневой DOM — это технология, которая позволяет создавать инкапсулированные компоненты в веб-приложениях, обеспечивая изоляцию стилей и скриптов. Это помогает избежать конфликтов между различными частями приложения и улучшает его структуру.
Когда элементы находятся в теневом DOM, их может быть сложно найти с помощью стандартных селекторов, таких как CSS или XPath. Однако Playwright предоставляет специальный синтаксис, который позволяет легко взаимодействовать с этими элементами.
Чтобы найти элемент в теневом DOM, можно использовать специальный синтаксис, который позволяет обращаться к shadow-root. Например:
const shadowHost = await page.$('shadow-host-selector'); // Находим элемент-хост
const shadowRoot = await shadowHost.evaluateHandle(el => el.shadowRoot); // Получаем Shadow Root
const shadowElement = await shadowRoot.$('.shadow-element-selector'); // Находим элемент внутри Shadow DOM
6. Ожидание элементов
Playwright предлагает методы, которые позволяют ждать, пока элемент загрузится, станет видимым или выполнит другие условия перед тем, как его идентифицировать и выполнить действие.
await page.waitForSelector('button', { state: 'visible' });
7. Выбор опций в выпадающих списках
Playwright предоставляет методы для взаимодействия с меню опций в выпадающих списках.
await page.selectOption('select#myDropdown', 'Option 1');
8 . Селекторы для всплывающих окон и фреймов
Playwright предоставляет возможность взаимодействовать с элементами во всплывающих окнах и встроенных фреймах (iframe). Это позволяет пользователям легко выполнять действия с веб-элементами, которые находятся в отдельных контекстах, что особенно полезно для тестирования сложных интерфейсов.
const popup = await page.waitForPopup('https://example-popup.com');
const popupElement = await popup.$('div.popup-content');
Использование селекторов и локаторов в Playwright
Селекторы Playwright играют важную роль в выполнении задач автоматизации. С их помощью можно выполнять взаимодействие с элементами (выбор, клик, отправка веб-страниц и наведение курсора на элементы), проверку элементов (валидация видимости и наличия элемента на странице), извлечение данных (получение текста, файлов и другой информации из интерфейса для дальнейшей проверки) и ожидание, когда элементы станут доступны на экране.
Примечание редакции: вас также может заинтересовать статья “Быстрое и практическое введение в Playwright”
Что такое локаторы в Playwright?
Локаторы Playwright — это набор методов и API, которые позволяют выбирать и взаимодействовать с элементами на веб-странице. Они предоставляют более высокий уровень и более выразительный способ нахождения элементов по сравнению с традиционными селекторами, такими как CSS и XPath.
Типы локаторов Playwright
Playwright предлагает несколько типов локаторов для идентификации элементов и полей на веб-странице:
page.locator(): Используется для работы с несколькими элементами на веб-странице. Этот метод создает локатор, который позволяет находить элементы, после чего можно применять цепочку действий к набору этих элементов.locator.locator(): Для более точного выбора вы можете соединять методы локатора с уже существующими локаторами. Это позволяет уточнять поиск элементов, находящихся внутри других элементов.locator.locatorAll(): Этот метод используется для нахождения всех элементов, соответствующих заданному локатору.
Стратегии локаторов
Стратегии локаторов в Playwright помогают выбрать наиболее подходящий способ для нахождения и взаимодействия с элементами на веб-странице. Вот некоторые из наиболее популярных стратегий:
locator('text=Некоторый текст'): нахождение веб-элементов на основе видимого текста.locator('aria-label=Label'): нахождение веб-элементов на основе ARIA-метки. ARIA-метки (Accessible Rich Internet Applications) — это набор атрибутов, которые позволяют разработчикам улучшать доступность веб-приложений для пользователей с ограниченными возможностями.locator('aria-labelledby=ID'): нахождение веб-элементов на основе ID ARIA-метки.locator('css селектор'): для выбора элементов на основе CSS-атрибутов, нужно комбинировать CSS-селектор с локатором.locator('xpath селектор'): для нахождения сложных веб-элементов и выполнения сложных запросов, комбинируя XPath-селектор с локатором.
Пример реализации локатора
В этом примере код инициализирует браузер Chromium с помощью Playwright, открывает веб-страницу и ищет кнопку по тексту “Click Here”. Давайте разберём его.
const { chromium } = require('playwright'); // Импортируем библиотеку Playwright
(async () => {
const browser = await chromium.launch(); // Запускаем браузер Chromium
const page = await browser.newPage(); // Открываем новую вкладку
await page.goto('https://example.com'); // Переходим на указанную веб-страницу
const locator = page.locator('text=Click Here'); // Находим элемент с текстом "Click Here"
await locator.click(); // Кликаем по найденному элементу
})();
Обновление элементов
Каждый раз, когда локатор используется для выполнения действия, он ищет актуальный элемент в DOM. В приведённом ниже коде элемент будет найден дважды: в первый раз перед наведением курсора, а второй — перед кликом. Это означает, что если DOM изменится между вызовами из-за перерисовки, будет использован новый элемент, соответствующий локатору.
Этот подход помогает избежать распространённых ошибок, связанных с “устаревшими элементами”, которые часто возникают в других инструментах и фреймворках автоматизации. Playwright автоматически управляет состоянием DOM, обеспечивая более стабильное и надёжное взаимодействие с элементами на странице.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const locator = page.locator('text=Click Here');
// Наведение курсора на элемент
await locator.hover();
// Клик по элементу
await locator.click();
})();
Полная реализация селекторов и локаторов в Playwright
const { chromium } = require('playwright');
const { expect } = require('@playwright/test');
(async () => {
// Запускаем браузер
const browser = await chromium.launch();
const context = await browser.newContext();
// Создаем страницу
const page = await context.newPage();
await page.goto('https://example.com');
// Используем локатор для нахождения элемента по CSS-селектору
const searchInput = page.locator('input[type="text"]');
// Вводим текст в поле ввода
await searchInput.type('Playwright');
// Используем локатор для нахождения элемента по текстовому содержимому
const welcomeMessage = page.locator('text=Welcome');
// Проверяем, что элемент с текстом видим
expect(await welcomeMessage.isVisible()).toBeTruthy();
// Кликаем по элементу
await welcomeMessage.click();
// Используем локатор для нахождения элемента по XPath
const heading = page.locator('//h1');
// Проверяем, что элемент с XPath-селектором видим
expect(await heading.isVisible()).toBeTruthy();
// Делаем скриншот
await page.screenshot({ path: 'example.png' });
// Закрываем браузер
await browser.close();
})();
В этом примере:
- Мы запускаем браузер Chromium (браузер Chrome) и создаем новый контекст и страницу.
- Используем локаторы (селекторы) для нахождения элементов на странице с использованием CSS-селекторов, текстового содержимого и XPath.
- Выполняем действия, такие как ввод текста в поле, клик по элементу и создание скриншота.
- Используем утверждения из
@playwright/test(предполагая, что он установлен), чтобы проверить, видимы ли элементы. - В конце закрываем браузер.
Заключение
В заключение, селекторы и локаторы Playwright предлагают мощные и гибкие инструменты для взаимодействия с веб-элементами в процессе автоматизации и тестирования. Они обеспечивают высокую точность в различных браузерах и способны адаптироваться к разнообразным сценариям, что делает Playwright отличным выбором для автоматизации веб-приложений.
Перевод статьи «Playwright Selectors and Locators: Everything You Need to Know».