QA-SDET

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

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

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

Основы локаторов

Playwright поддерживает различные типы локаторов, каждый из которых имеет свои преимущества в зависимости от ситуации:

CSS-селекторы

Наиболее распространенный тип локаторов, позволяющий выбирать элементы по их CSS-атрибутам. Пример:

const button = page.locator('button.submit');

XPath

Мощный язык запросов для выбора узлов в XML и HTML документах. XPath позволяет формировать сложные запросы к DOM. Пример:

const heading = page.locator('//h1[contains(text(), "Welcome")]');

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

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

const loginButton = page.locator('text=Login');

Продвинутое использование локаторов

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

Локаторы можно комбинировать, используя разделители, чтобы уточнить выборку. Это особенно полезно, когда один селектор недостаточно специфичен:

const item = page.locator('.list >> .item >> text="Details"');

Ожидание элементов

Playwright предоставляет методы для ожидания элементов перед взаимодействием с ними, что повышает надежность тестов:

const button = page.locator('button.submit');
await button.waitFor();

Работа с коллекциями элементов

Часто нужно работать с группами элементов, например, со списками или таблицами:

const rows = page.locator('table >> tbody >> tr');
await rows.nth(2).click(); // Клик по третьей строке таблицы

Работа с псевдоэлементами и теневым DOM

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

Псевдоэлементы

Псевдоэлементы CSS, такие как ::before и ::after, часто используются для стилизации, но они не доступны в DOM-дереве как обычные элементы. Playwright может взаимодействовать с такими элементами через специальные селекторы или JavaScript:

await page.evaluate(() => { document.querySelector('button::before').click(); });

Теневой DOM (Shadow DOM)

Теневой DOM используется для инкапсуляции стилей и разметки в веб-компонентах. Playwright позволяет напрямую взаимодействовать с элементами в теневом DOM:

const shadowHost = page.locator('#shadow-host');
const shadowButton = shadowHost.locator('shadow=button.submit');
await shadowButton.click();

Динамические элементы и AJAX-загрузки

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

Ожидание загрузки элементов

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

const dynamicElement = page.locator('text="Load More"');
await dynamicElement.waitFor({ state: 'attached' });
await dynamicElement.click();

Использование локаторов в условиях с высокой конкуренцией элементов

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

Контекстные локаторы

Использование родительских или соседних элементов для уточнения выбора:

const userProfile = page.locator('.user-profile').locator('text="John Doe"');
const editButton = userProfile.locator('button >> text="Edit"');
await editButton.click();

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

Минимизация зависимости от структуры DOM: Стремитесь использовать локаторы, которые не сильно зависят от иерархии DOM, чтобы тесты оставались устойчивыми при изменениях дизайна страницы.

Использование текстовых селекторов для интерактивных элементов: Текстовые селекторы делают тесты более понятными и легко читаемыми, особенно когда речь идет о кнопках и ссылках.

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

Заключение

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