Встроенные матчеры для UI тестирования

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

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

1. toHaveText

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

Пример использования:

const button = await page.locator('button#submit');
await expect(button).toHaveText('Отправить');

Этот тест проверяет, что текст кнопки с id submit равен “Отправить”. Если текст отличается, тест не пройдёт.

2. toHaveClass

С помощью этого матча можно проверять, что элемент содержит определённый CSS-класс. Это полезно для проверки, изменился ли стиль элемента в ответ на действие пользователя.

Пример использования:

const button = await page.locator('button#submit');
await expect(button).toHaveClass(/btn-primary/);

Этот тест проверяет, что кнопка с id submit имеет CSS-класс, содержащий btn-primary. Регулярные выражения могут быть использованы для более гибкой проверки классов.

3. toBeVisible

Проверяет, что элемент видим на странице. Этот матч часто используется, чтобы удостовериться, что элемент не скрыт стилями (например, с помощью display: none) или не находится за пределами области видимости.

Пример использования:

const notification = await page.locator('.notification');
await expect(notification).toBeVisible();

Тест проверяет, что уведомление с классом notification отображается на экране.

4. toBeHidden

Противоположный матчеру toBeVisible — проверяет, что элемент скрыт. Используется для проверки, что элементы скрыты в определённых условиях, например, после закрытия модальных окон или меню.

Пример использования:

const modal = await page.locator('.modal');
await expect(modal).toBeHidden();

Этот тест проверяет, что элемент с классом .modal скрыт.

5. toBeChecked

Этот матч используется для проверки состояния флажков и радио-кнопок. Он проверяет, что элемент находится в состоянии “выбран” или “не выбран”.

Пример использования:

const checkbox = await page.locator('input[type="checkbox"]');
await expect(checkbox).toBeChecked();

Этот тест проверяет, что флажок установлен. Если флажок не выбран, тест завершится с ошибкой.

6. toHaveValue

Позволяет проверять, что значение элемента ввода (например, поля формы) соответствует ожидаемому. Это полезно для тестирования форм и других элементов, с которыми пользователи взаимодействуют, вводя данные.

Пример использования:

const input = await page.locator('input[name="email"]');
await expect(input).toHaveValue('test@example.com');

Тест проверяет, что в поле ввода с именем email содержится строка test@example.com.

7. toBeEnabled / toBeDisabled

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

Пример использования:

const button = await page.locator('button#submit');
await expect(button).toBeEnabled();

Этот тест проверяет, что кнопка с id submit доступна для взаимодействия.

8. toHaveAttribute

Этот матч позволяет проверять, что у элемента есть атрибут с заданным значением. Это полезно для проверки различных атрибутов HTML-элементов, таких как href, src, alt и другие.

Пример использования:

const link = await page.locator('a#home');
await expect(link).toHaveAttribute('href', '/home');

Тест проверяет, что ссылка с id home имеет атрибут href, равный /home.

9. toContainText

В отличие от toHaveText, который проверяет точное совпадение текста, toContainText позволяет проверять, что элемент содержит хотя бы часть строки. Это полезно, если точное значение текста может изменяться, но нужно убедиться в наличии определённой информации.

Пример использования:

const message = await page.locator('.alert');
await expect(message).toContainText('Ошибка');

Этот тест проверяет, что в сообщении с классом alert присутствует слово “Ошибка”.

Гибкость матчеров

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

const button = await page.locator('button#submit');
await expect(button).toBeVisible().toBeEnabled().toHaveText('Отправить');

В данном примере проверяется сразу несколько условий для кнопки: она должна быть видимой, доступной для взаимодействия и содержать текст “Отправить”.

Синхронность матчеров

Важно отметить, что матчеры в Playwright работают асинхронно. Это означает, что проверка состояния элемента не будет выполняться сразу, а будет ожидать, пока элемент не достигнет нужного состояния. Это важно при тестировании приложений с динамическими обновлениями, таких как одностраничные приложения (SPA).

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

Поддержка регулярных выражений

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

Пример:

const button = await page.locator('button');
await expect(button).toHaveText(/Отправить/);

В данном случае, матчер проверяет, что текст кнопки содержит подстроку “Отправить”, но допускает наличие других символов или слов в тексте.

Резюме

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