Playwright предоставляет мощные инструменты для взаимодействия с DOM на веб-страницах. Одной из основных задач тестирования является манипуляция элементами DOM, что позволяет имитировать действия пользователей, проверять корректность отображения контента и взаимодействовать с интерфейсами. Playwright использует стандартные методы JavaScript для работы с DOM, что делает его удобным для автоматизации тестов, имитирующих реальные пользовательские сценарии.
В Playwright для работы с элементами DOM используются методы,
аналогичные стандартному JavaScript. С помощью метода
page.locator(selector) можно найти элемент на странице.
Селектор может быть CSS-селектором, XPath или текстом. При этом
Playwright поддерживает возможность использовать текстовые метки
элементов для нахождения, что упрощает взаимодействие с интерфейсами,
где элементы могут изменяться динамически.
Пример:
const locator = page.locator('button.submit');Метод locator возвращает объект, с помощью которого
можно манипулировать элементом: кликать, вводить текст, проверять его
состояние и т.д.
Одной из самых часто используемых манипуляций с элементами является
клик. Для этого используется метод click():
await page.locator('button.submit').click();Playwright автоматически прокручивает страницу до элемента, если это необходимо, и ожидает его появления на странице, прежде чем выполнить клик. Это исключает проблемы с моментами, когда элемент ещё не загружен.
Для ввода текста в форму используется метод fill():
await page.locator('input[name="username"]').fill('testuser');Этот метод очищает поле ввода перед тем, как в него ввести новый текст, что помогает избежать проблем, связанных с неочищенными полями.
В случае с текстовыми полями или текстовыми областями можно также
использовать метод type(), который имитирует ввод символов
по одному:
await page.locator('input[name="password"]').type('securepassword');Важной частью манипуляций с DOM является правильная синхронизация с
элементами страницы. Playwright имеет встроенные механизмы для ожидания
появления элементов, их видимости или активации. Метод
waitForSelector() позволяет ожидать появления элемента на
странице:
await page.waitForSelector('div#content');Этот метод гарантирует, что скрипт не продолжит выполнение до тех пор, пока элемент не станет доступным. В случае с динамическими страницами это особенно полезно для предотвращения ошибок.
Playwright позволяет изменять атрибуты элементов, что бывает полезно
для настройки тестируемых страниц. Для этого можно использовать метод
setAttribute(). Он позволяет установить значения для
атрибутов элементов, таких как disabled,
checked, value и других:
await page.locator('input[type="checkbox"]').setAttribute('checked', 'true');Это может быть полезно, если необходимо настроить страницу для специфического теста или изменить состояние элементов перед запуском действий.
Иногда необходимо работать с элементами, которые скрыты на странице
или невидимы для пользователя. В Playwright есть возможность
взаимодействовать с такими элементами, используя методы
isVisible() или isHidden():
const isVisible = await page.locator('div.hidden').isVisible();
const isHidden = await page.locator('div.hidden').isHidden();Эти методы полезны для проверки состояний элементов, которые могут влиять на логику теста или пользовательские сценарии.
Для изменения внешнего вида элементов или манипуляций с классами
используется метод addClass(), removeClass() и
toggleClass(). Это позволяет на лету изменять поведение
элементов, чтобы проверить разные состояния страницы.
Пример добавления класса:
await page.locator('div.modal').addClass('open');Для динамической смены стилей, например, можно использовать метод
setStyle():
await page.locator('div.box').setStyle('background-color', 'red');Это дает возможность тестировать поведение интерфейсов с различными визуальными состояниями.
Иногда нужно удалить элемент из DOM для симуляции его исчезновения.
Для этого используется метод evaluate(), который выполняет
произвольный JavaScript-код на странице:
await page.locator('div#banner').evaluate(el => el.remove());Этот метод позволяет взаимодействовать с DOM напрямую и удалять элементы, как если бы это делал пользователь.
Для отслеживания изменений в DOM можно использовать функцию
page.on(), которая позволяет слушать события изменения DOM
или другие действия:
page.on('domcontentloaded', () => {
console.log('DOM загружен');
});Этот подход помогает отслеживать этапы загрузки страницы и изменения в её структуре.
Кроме стандартных манипуляций с DOM, Playwright позволяет выполнять
JavaScript-код непосредственно в контексте страницы. Для этого
используется метод evaluate(). Этот метод позволяет
получить доступ к объектам страницы, выполнять функции или
манипулировать данными.
Пример выполнения JavaScript на странице:
const pageTitle = await page.evaluate(() => document.title);
console.log(pageTitle);Этот код извлекает заголовок страницы и выводит его в консоль.
При манипуляциях с DOM важно учитывать возможные ошибки, которые
могут возникнуть, например, если элемент не найден или если действия с
ним невозможны. Playwright предоставляет механизмы для обработки таких
ошибок. Одним из таких методов является try-catch, который
помогает ловить исключения и предотвращать их:
try {
await page.locator('button.submit').click();
} catch (error) {
console.error('Ошибка при клике на кнопку:', error);
}Это позволяет тестам быть более устойчивыми к неожиданным ситуациям на странице.
Манипуляции с DOM через Playwright открывают широкие возможности для автоматизации тестирования веб-приложений. С помощью методов для получения, изменения и удаления элементов, а также для выполнения JavaScript на странице, можно эффективно имитировать действия пользователей и проверять корректность работы интерфейсов. Playwright предлагает гибкие инструменты для работы с динамическим контентом и создания надежных тестов.