Обработка popup окон

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

Создание и обработка popup окна

Появление всплывающего окна можно отслеживать с помощью события targetcreated. Оно срабатывает, когда создается новый target, который может быть как новое окно, так и новый iframe. Если этот target представляет собой новое окно (popup), его можно перехватить и работать с ним. Для этого необходимо использовать метод page.waitForEvent() для ожидания появления окна и получения соответствующего объекта.

Пример перехвата и работы с popup окном: 

const puppeteer = require(&

async function handlePopup() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  page.on('popup', async popup => {
    console.log('New popup window opened');
    // Действия с popup окном
    await popup.waitForSelector('h1');
    const title = await popup.$eval('h1', h => h.innerText);
    console.log('Popup title:', title);
  });

  await page.goto('https://example.com');
  // Инициация действия, которое откроет popup окно
  await page.click('#openPopupButton');

  await browser.close();
}

handlePopup();

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

Ожидание появления popup окна

Иногда нужно дождаться, пока окно появится и станет доступным для взаимодействия. Это можно сделать с помощью метода page.waitForEvent(‘popup’), который приостанавливает выполнение до тех пор, пока не откроется новое окно.

Пример: 

const puppeteer = require('puppeteer');

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

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

  // Ожидание появления popup окна
  const [popup] = await Promise.all([
    page.waitForEvent('popup'),
    page.click('#openPopupButton')
  ]);

  console.log('Popup opened');
  // Действия с popup
  await popup.waitForSelector('h1');
  const title = await popup.$eval('h1', h => h.innerText);
  console.log('Popup title:', title);

  await browser.close();
}

waitForPopup();

Здесь page.waitForEvent(‘popup’) будет ждать, пока не откроется новое окно, после чего можно работать с этим окном.

Взаимодействие с элементами внутри popup окна

После того как окно перехвачено и доступно для работы, можно взаимодействовать с элементами внутри popup. Для этого необходимо использовать методы взаимодействия с элементами, как для обычных страниц: click, type, waitForSelector, evaluate и другие.

Пример взаимодействия с элементами в popup окне: 

const puppeteer = require('puppeteer');

async function interactWithPopup() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  page.on('popup', async popup => {
    // Ждём, пока окно полностью загрузится
    await popup.waitForSelector('button.submit');

    // Взаимодействуем с элементами внутри popup окна
    await popup.click('button.submit');
    await popup.type('input[name="name"]', 'Test User');

    const result = await popup.$eval('h1', h => h.innerText);
    console.log('Result from popup:', result);
  });

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

  await browser.close();
}

interactWithPopup();

В данном примере происходит клик по кнопке и ввод текста в поле на странице popup. Эти действия выполняются так же, как и на основной странице.

Закрытие popup окна

После того как все действия с popup окном выполнены, его необходимо закрыть. Это можно сделать с помощью метода popup.close(). Он закрывает окно, с которым ассоциирован объект popup.

Пример: 

const puppeteer = require('puppeteer');

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

  page.on('popup', async popup => {
    // Действия с popup окном
    await popup.close();
    console.log('Popup window closed');
  });

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

  await browser.close();
}

closePopup();

Метод popup.close() закрывает всплывающее окно, и тест может продолжиться.

Обработка окон с несколькими вкладками

Иногда в приложении может быть несколько открытых окон или вкладок, и нужно отслеживать, с какой из них происходит взаимодействие. Для этого можно работать с объектами типа page, каждому из которых соответствует конкретная вкладка или окно. В случае нескольких popup окон можно их обрабатывать поочередно, обращая внимание на количество вкладок или открытых окон.

Пример: 

const puppeteer = require('puppeteer');

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

  // Ожидание первого popup окна
  const [popup1] = await Promise.all([
    page.waitForEvent('popup'),
    page.click('#openFirstPopupButton')
  ]);

  console.log('First popup opened');
  await popup1.waitForSelector('button#firstAction');
  await popup1.click('button#firstAction');

  // Ожидание второго popup окна
  const [popup2] = await Promise.all([
    page.waitForEvent('popup'),
    page.click('#openSecondPopupButton')
  ]);

  console.log('Second popup opened');
  await popup2.waitForSelector('button#secondAction');
  await popup2.click('button#secondAction');

  await browser.close();
}

handleMultiplePopups();

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

Проблемы при работе с popup окнами

При работе с popup окнами могут возникать различные проблемы, например, окна, не открывающиеся в headless режиме, или проблемы с блокировкой всплывающих окон в браузере. Чтобы избежать таких проблем, рекомендуется запускать браузер в режиме с графическим интерфейсом (не headless) при тестировании с использованием popup окон, а также проверять настройки браузера для разрешения всплывающих окон.

Для предотвращения блокировки popup окон можно использовать опцию args: [‘–disable-popup-blocking’] при запуске Puppeteer: 

const browser = await puppeteer.launch({
  headless: false,
  args: ['--disable-popup-blocking']
});

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

Оглавление