Селекторы и локаторы в Playwright

Селекторы и локаторы в Playwright

Playwright — это мощный фреймворк для автоматизации тестирования, который позволяет пользователям управлять веб-приложениями и проводить сквозное (end-to-end) тестирование. Он поддерживает множество браузеров и предоставляет удобные инструменты для взаимодействия с элементами на веб-страницах. В этой статье мы рассмотрим функциональность и реализацию селекторов и локаторов в 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();
})();

В этом примере:

  1. Мы запускаем браузер Chromium (браузер Chrome) и создаем новый контекст и страницу.
  2. Используем локаторы (селекторы) для нахождения элементов на странице с использованием CSS-селекторов, текстового содержимого и XPath.
  3. Выполняем действия, такие как ввод текста в поле, клик по элементу и создание скриншота.
  4. Используем утверждения из @playwright/test (предполагая, что он установлен), чтобы проверить, видимы ли элементы.
  5. В конце закрываем браузер.

Заключение

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

Перевод статьи «Playwright Selectors and Locators: Everything You Need to Know».

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *