События — Тестирование с Playwright

• Клики
• Взаимодействие с формами
  • Заполнение текстовых полей
  • Чекбоксы и радиобатоны
  • Селекты
• Горячие клавиши

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

await page.getByRole('heading', { name: 'Хекслет' }).click()

Действия Playwright очень похожи на события браузера, но не являются ими. Когда пользователь взаимодействует со страницей, то его действия, часто представляют собой цепочку событий. Возьмем для примера набор текста в полях формы. Во время этого процесса вызывается множество событий разделенных во времени. В том числе потому, что человек, обычно, набирает текст постепенно. За это время вызывается череда событий, таких как keydown, keypress, input, keyup, причем для каждого символа индивидуально с определенной задержкой. А в Playwright мы используем действие "нажимать последовательно":

const locator = page.getByRole('textbox')
// Поиск элемента происходит в строке ниже
await locator.pressSequentially('Peter')
// Действие закончилось,
// но не факт что на странице произошли все нужные изменения

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

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

Клики

Основных видов кликов два: одинарный и двойной

await page.getByRole('button', { name: 'Открыть' }).click()
await page.getByText('Посмотреть').dblclick()

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

await page.getByText('Посмотреть').click({ button: 'right' })

// Shift + click
await page.getByText('Посмотреть').click({ modifiers: ['Shift'] })

// Ctrl + click or Windows and Linux
// Meta + click on macOS
await page.getByText('Посмотреть').click({ modifiers: ['ControlOrMeta'] })

Во время клика, Playwright выполняет множество действий под капотом. Вот их список:

1. Поиск элемента в DOM. Если элемент не найден, то локатор ожидает его появление в рамках заданного в конфигурации timeout.
2. Ожидание появления, то есть того, что у элемента не установлены стили display:none и visibility:hidden.
3. Ожидание остановки элемента, например, ожидание завершения css-трансформации.
4. Скролинг до элемента, чтобы он оказался в видимой части экрана.
5. Ожидание получения pointer events в точке действия, например, ожидание того, что элемент не будут перекрывать другие элементы.
6. Повтор этих действий, если во время проверок элемент пропал из DOM.

Взаимодействие с формами

Заполнение текстовых полей

В большинстве ситуаций для заполнения текстовых полей достаточно метода fill(), который фокусируется на нужном элементе и генерирует событие input.

await page.getByRole('textbox').fill('Святослав')
await page.getByLabel('Дата рождения').fill('1999-03-10')
await page.getByLabel('Время').fill('01:00')

Если текстовое поле обрабатывается посимвольно, то понадобится метод pressSequentially(), который вводит символы по одному с задержкой, порождая такие события как keypress, keyup и т.д.

await page.getByRole('textbox').pressSequentially('Святослав')

Чекбоксы и радиобатоны

Поля ввода с типами checkbox или radio отмечаются методом check(). Поведение метода на 100% совпадает с тем как это происходит со стороны пользователя, например, двойной check() на чекбоксе возвращает его в исходное состояние, которое было до первого check().

await page.getByLabel('Согласие с правилами').check()

Селекты

Значения в селектах выбираются методом selectOption(). Этот метод поддерживает выбор по значению и по лейблу.

// Одиночный выбор по значению или лейблу (что совпадет)
await page.getByLabel('Выберите сервис').selectOption('hexlet')

// Выбор только по лейблу
await page.getByLabel('Выберите сервис').selectOption({ label: 'Хекслет' })

// Множественный выбор по значению или лейблу
await page
  .getByLabel('Выберите сервис')
  .selectOption(['google', 'hexlet', 'youtube'])

Горячие клавиши

Для горячих клавиш используется метод press(), который фокусируется на выбранном элемент и производит одновременное одиночное нажатие всех перечисленных клавиш:

await page.getByText('Отправить').press('Enter')
await page.getByRole('textbox').press('Control+ArrowRight')
// Регистр важен: a и A это разные символы
await page.getByRole('textbox').press('Shift+A')

Дополнительные материалы

1. playwright.dev