Playwright предоставляет несколько инструментов для взаимодействия с элементами на странице, включая возможность фокусировки на элементах. Фокусировка — это важный аспект в тестировании, особенно при работе с элементами форм, модальными окнами, элементами управления, такими как поля ввода или кнопки. В этом разделе будет рассмотрено, как работать с фокусировкой с помощью Playwright, включая различные способы установки фокуса и проверки, что элемент действительно получил фокус.
Фокусировка на элементе веб-страницы позволяет пользователю или тестовому скрипту взаимодействовать с элементом, например, вводить текст в текстовое поле или нажимать кнопку. Для тестов важно, чтобы в нужный момент фокус был на нужном элементе. Это можно достичь с помощью методов Playwright.
Playwright предоставляет несколько способов установить фокус на
элемент. Для этого можно использовать метод focus(),
который позволяет программно установить фокус на элементе, с которым
нужно взаимодействовать.
Пример установки фокуса:
const { test, expect } = require('@playwright/test');
test('Установка фокуса на поле ввода', async ({ page }) => {
await page.goto('https://example.com');
const inputField = await page.locator('input[name="username"]');
await inputField.focus(); // Установка фокуса на поле ввода
await expect(inputField).toHaveFocus(); // Проверка, что поле ввода получило фокус
});В этом примере с помощью метода focus() фокусируется на
поле ввода с атрибутом name="username". После этого
выполняется проверка с помощью toHaveFocus(), чтобы
убедиться, что фокус был успешно установлен.
Для проверки, что элемент действительно получил фокус, используется
метод toHaveFocus(), который является частью библиотеки
Playwright. Этот метод проверяет, что на момент выполнения теста элемент
находится в состоянии фокуса.
Пример использования:
await expect(inputField).toHaveFocus();Этот метод полезен для проверки, что в нужный момент фокус установлен на элемент. Он работает не только для полей ввода, но и для любых элементов, которые могут быть в фокусе.
В процессе тестирования могут возникать ситуации, когда установка фокуса не срабатывает. Это может происходить по ряду причин:
tabindex, то
фокусировка на нем может быть невозможной.Чтобы избежать этих проблем, необходимо убедиться, что элемент доступен для фокусировки и видим на странице.
Иногда для корректной работы теста необходимо, чтобы элемент был
готов к взаимодействию. Это может требовать небольшого времени ожидания
после загрузки страницы или появления элемента. В Playwright для этого
можно использовать методы waitForSelector() или
waitFor().
Пример с ожиданием:
await page.waitForSelector('input[name="username"]'); // Ожидание появления элемента
await inputField.focus(); // Установка фокуса после появления элементаМетод waitForSelector() будет ждать, пока элемент не
станет доступен на странице, прежде чем выполнить дальнейшие
действия.
В случае с динамическими веб-страницами (например, когда элементы добавляются или изменяются через JavaScript) установка фокуса может потребовать дополнительного внимания. Playwright позволяет работать с такими элементами с помощью ожиданий или событий, что помогает избегать ошибок фокусировки.
Пример с динамическим контентом:
await page.click('button#open-modal'); // Открытие модального окна
const modalInput = await page.locator('input#modal-input');
await modalInput.waitFor({ state: 'visible' }); // Ожидание, пока поле ввода станет видимым
await modalInput.focus(); // Установка фокусаВ данном случае с помощью waitFor() ожидание
завершается, когда элемент становится видимым на странице, что позволяет
безопасно установить фокус на поле ввода.
Фокусировка на полях ввода особенно важна при тестировании форм. Например, для проверки последовательности фокуса на различных элементах формы (например, на текстовых полях, кнопках и т.д.) можно использовать Playwright для моделирования ввода данных в форму.
Пример фокусировки на нескольких элементах формы:
test('Фокусировка на полях формы', async ({ page }) => {
await page.goto('https://example.com/form');
const usernameField = await page.locator('input[name="username"]');
const passwordField = await page.locator('input[name="password"]');
await usernameField.focus(); // Установка фокуса на поле ввода имени пользователя
await passwordField.focus(); // Переключение фокуса на поле ввода пароля
await expect(usernameField).toHaveFocus(); // Проверка фокуса на поле имени пользователя
await expect(passwordField).toHaveFocus(); // Проверка фокуса на поле пароля
});Этот подход полезен для тестирования ввода данных в форму, в частности, чтобы убедиться, что поля ввода правильно принимают фокус в нужной последовательности.
Одной из распространенных ситуаций в тестировании является необходимость работы с элементами, которые поначалу скрыты или находятся вне области видимости. В таких случаях Playwright предоставляет методы для взаимодействия с элементами, даже если они скрыты.
Пример работы с элементом, который скрыт:
const hiddenElement = await page.locator('#hidden-button');
await page.evaluate((el) => el.style.display = 'block', hiddenElement); // Делаем элемент видимым
await hiddenElement.focus(); // Установка фокуса на скрытый элемент после его отображенияЗдесь элемент изначально скрыт с помощью стилей, и только после его отображения с помощью JavaScript происходит установка фокуса.
Модальные окна и диалоги требуют особого внимания при фокусировке. Обычно фокус на модальном окне устанавливается автоматически, но в некоторых случаях его нужно задавать вручную. Например, если окно появляется динамически, следует убедиться, что фокус на нем установлен.
Пример с модальным окном:
await page.click('#open-modal'); // Открытие модального окна
const modalDialog = await page.locator('.modal-dialog');
await modalDialog.waitFor({ state: 'visible' });
await modalDialog.focus(); // Установка фокуса на модальное окноЭтот пример демонстрирует, как установить фокус на модальное окно после его появления.
Работа с фокусировкой на элементах в Playwright — это важный аспект тестирования веб-приложений, особенно для элементов формы, динамического контента и модальных окон. Понимание того, как правильно установить и проверить фокус, позволяет повысить точность тестов и избежать ошибок взаимодействия с элементами на странице.