Модальные окна и их обработка

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

Модальные окна могут быть разных типов, например, alert (оповещения), confirm (подтверждения) и prompt (ввод текста). Playwright предоставляет встроенные методы для работы с ними.

Обработка алертов (Alert)

Модальные окна типа alert обычно отображают только текстовое сообщение с кнопкой для закрытия. В Playwright обработка таких окон сводится к прослушиванию события и его принудительному закрытию.

Пример кода для обработки алерта:

// Ожидание появления алерта и его принятие
page.on('dialog', async dialog => {
  await dialog.accept(); // Закрытие алерта
});

// Тест, в котором вызывается alert
await page.click('button#showAlert'); // Кнопка, вызывающая alert

В этом примере при появлении алерта срабатывает событие dialog, и с помощью метода accept окно закрывается.

Обработка подтверждения (Confirm)

Модальные окна типа confirm содержат две кнопки: «OK» и «Cancel». В зависимости от того, какое действие необходимо имитировать в тесте, можно либо подтвердить (нажать «OK»), либо отменить (нажать «Cancel»).

Пример кода для обработки подтверждения:

// Ожидание появления confirm и принятие
page.on('dialog', async dialog => {
  await dialog.accept(); // Нажатие "OK"
});

// Тест, в котором вызывается confirm
await page.click('button#showConfirm'); // Кнопка, вызывающая confirm

Если необходимо отменить действие, используется метод dismiss:

// Ожидание появления confirm и отмена
page.on('dialog', async dialog => {
  await dialog.dismiss(); // Нажатие "Cancel"
});

// Тест, в котором вызывается confirm
await page.click('button#showConfirm'); // Кнопка, вызывающая confirm

Обработка ввода текста (Prompt)

Модальные окна типа prompt содержат текстовое поле, в которое пользователь может ввести значение. В тестах часто возникает необходимость не только подтвердить или отменить prompt, но и ввести текст.

Пример кода для обработки prompt:

// Ожидание появления prompt и ввод текста
page.on('dialog', async dialog => {
  await dialog.accept('Текст для ввода'); // Ввод текста в поле prompt
});

// Тест, в котором вызывается prompt
await page.click('button#showPrompt'); // Кнопка, вызывающая prompt

Вместо того чтобы оставить поле пустым, можно передать в метод accept строку, которая будет введена в поле.

Ожидания и таймауты

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

Пример с явным ожиданием модального окна:

// Ожидание появления алерта с таймаутом
await page.waitForEvent('dialog', { timeout: 5000 }); // Ожидание до 5 секунд

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

Перехват событий и обработка ошибок

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

Пример перехвата ошибок:

// Обработка ошибок с логированием
try {
  await page.click('button#showAlert');
  await page.waitForEvent('dialog');
} catch (error) {
  console.error('Ошибка при обработке модального окна:', error);
}

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

Модальные окна и асинхронность

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

Пример асинхронной обработки:

// Ожидание появления окна и принятие
await page.on('dialog', async dialog => {
  await dialog.accept(); // Ожидаем, что окно появится и сразу его закроем
});

// Вызываем действие, которое вызывает окно
await page.click('button#showAlert');

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

Обработка кастомных модальных окон

Помимо стандартных типов окон (alert, confirm, prompt), на страницах могут быть реализованы кастомные модальные окна, которые не используют стандартные API браузера. Такие окна могут быть элементами HTML, которые открываются с помощью JavaScript.

Для работы с кастомными окнами необходимо использовать стандартные селекторы и методы Playwright, такие как page.click, page.waitForSelector, page.locator и другие.

Пример обработки кастомного модального окна:

// Ожидание появления кастомного окна
await page.waitForSelector('.custom-modal');

// Закрытие кастомного окна
await page.click('.custom-modal .close-button');

Здесь окно отображается как обычный HTML-элемент с классом custom-modal, и для его закрытия достаточно кликнуть по кнопке с классом .close-button.

Лучшие практики

  1. Раннее закрытие модальных окон. Важно всегда закрывать модальные окна в конце каждого теста. Оставленные окна могут повлиять на последующие тесты.

  2. Использование ожиданий. Ожидайте появления модальных окон перед тем, как взаимодействовать с ними, чтобы избежать ошибок синхронизации.

  3. Обработка ошибок и исключений. Убедитесь, что вы правильно обрабатываете ошибки, возникающие при взаимодействии с окнами, чтобы тесты не прерывались без объяснения причины.

  4. Тестирование в разных браузерах. Модальные окна могут вести себя немного по-разному в различных браузерах, поэтому всегда тестируйте их в нескольких средах.

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

Оглавление