Обработка alert

Puppeteer предоставляет удобный API для работы с браузером Chrome или Chromium, позволяя автоматизировать взаимодействие с веб-страницами. Одной из задач, с которой часто сталкиваются разработчики при тестировании веб-приложений, является обработка всплывающих окон, таких как alert, confirm и prompt. В этой статье подробно рассматривается, как работать с alert в Puppeteer.

Всплывающее окно alert

alert — это стандартное всплывающее окно, которое появляется в браузере с сообщением для пользователя. Оно не имеет полей для ввода данных и просто информирует о каком-либо событии или предупреждает пользователя.

При автоматизированном тестировании важно иметь возможность перехватывать и обрабатывать такие окна, чтобы не блокировать тесты и обеспечивать корректную работу скриптов.

Перехват alert

В Puppeteer для перехвата всплывающих окон alert используется событие dialog. Это событие срабатывает каждый раз, когда появляется одно из окон (alert, confirm, prompt). Чтобы обработать это событие, нужно добавить обработчик, который будет реагировать на его появление.

Пример перехвата alert: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Обработчик события dialog
  page.on('dialog', async dialog => {
    console.log(dialog.message()); // Выводим сообщение из alert
    await dialog.accept(); // Закрываем alert
  });

  await page.goto('https://example.com'); // URL с alert
  await page.click('#buttonWithAlert'); // Клик по элементу, который вызывает alert

  await browser.close();
})();

В этом примере:

  1. Мы подписываемся на событие dialog на странице.
  2. Когда возникает всплывающее окно, получаем его сообщение с помощью метода message().
  3. Закрываем окно с помощью метода accept().

Метод accept() автоматически подтверждает появление окна, аналогично нажатию кнопки «Ок». Для окон типа confirm и prompt существует дополнительная возможность взаимодействия, например, с помощью метода dismiss() для отказа от действия.

Обработка alert с данными

Если необходимо не только закрыть окно, но и взаимодействовать с его содержимым, это можно сделать с помощью других методов:

  • accept(): закрывает окно и принимает его действия (для alert или confirm).
  • dismiss(): отменяет действия окна (для confirm).
  • sendText(text): позволяет отправить текст в окно типа prompt.

Пример с использованием sendText() для окна типа prompt: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  page.on('dialog', async dialog => {
    if (dialog.type() === 'prompt') {
      console.log(dialog.message()); // Сообщение из prompt
      await dialog.sendText('Test input'); // Отправляем текст
      await dialog.accept(); // Закрываем окно
    }
  });

  await page.goto('https://example.com');
  await page.click('#buttonWithPrompt'); // Клик по элементу, вызывающему prompt

  await browser.close();
})();

Особенности работы с alert

  1. Асинхронность. Все операции с диалоговыми окнами в Puppeteer асинхронны. Это означает, что необходимо использовать await для правильного выполнения операций, таких как accept() или dismiss(). Отсутствие правильного ожидания может привести к ошибкам.

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

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

Взаимодействие с alert в тестах

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

Пример с верификацией сообщения в alert: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  page.on('dialog', async dialog => {
    const message = dialog.message();
    console.log(`Message in alert: ${message}`);

    if (message === 'Expected message') {
      await dialog.accept();
    } else {
      await dialog.dismiss();
    }
  });

  await page.goto('https://example.com');
  await page.click('#buttonWithAlert');

  await browser.close();
})();

В данном примере скрипт проверяет, соответствует ли сообщение в alert ожидаемому. Если сообщение верное, окно подтверждается, если нет — отклоняется.

Проблемы при тестировании с alert

  1. Сложности с синхронизацией. Поскольку окно alert появляется и исчезает очень быстро, важно правильно синхронизировать действия, чтобы избежать ошибок, связанных с попыткой закрыть окно до его появления.

  2. Невозможность проверки DOM. В отличие от обычных элементов, которые можно найти в DOM с помощью page.() < /code > или < code > page.$(), окна alert не имеют прямого представления в структуре документа, что затрудняет их проверку через стандартные методы поиска элементов.

  3. Блокировка тестов. В случае некорректной работы с alert тест может быть заблокирован, так как окно будет висеть, ожидая действий, которые не были выполнены.

Заключение

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

Оглавление