Работа с popup окнами и новыми вкладками

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

Открытие новой вкладки

Когда веб-страница или действие в приложении открывает новую вкладку, Playwright может перехватить её и взаимодействовать с ней. Это часто используется в приложениях, где новые страницы открываются в отдельных вкладках, например, при нажатии на ссылку с атрибутом target="_blank" или при переходе через всплывающие окна.

Пример кода для работы с новой вкладкой:

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });
  const page = await browser.newPage();
  
  // Перехватываем создание новой вкладки
  page.on('popup', async popup => {
    console.log('Открыта новая вкладка');
    await popup.waitForLoadState();
    console.log('Вкладка загружена');
    await popup.close();
  });

  // Действие, которое открывает новую вкладку
  await page.goto('https://example.com');
  await page.click('a[target="_blank"]');
})();

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

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

Для того чтобы дождаться появления нового popup окна, можно использовать событие popup. Оно срабатывает, когда на странице открывается новое окно, и позволяет получить объект окна, с которым можно работать дальше.

Пример:

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });
  const page = await browser.newPage();

  page.on('popup', async popup => {
    await popup.waitForLoadState();
    console.log('Popup окно готово');
  });

  await page.goto('https://example.com');
  await page.click('button#open-popup');
})();

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

Перехват и взаимодействие с popup окнами

После того как popup окно открылось, Playwright предоставляет возможность взаимодействовать с ним, как с обычной страницей. Для этого можно использовать методы, такие как click(), fill(), type(), selectOption() и другие.

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

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });
  const page = await browser.newPage();

  page.on('popup', async popup => {
    await popup.fill('input[name="email"]', 'test@example.com');
    await popup.click('button[type="submit"]');
    await popup.close();
  });

  await page.goto('https://example.com');
  await page.click('button#open-popup');
})();

В данном примере Playwright заполняет форму на открывшемся popup окне, отправляет её и затем закрывает окно.

Ожидание закрытия popup окна

Для того чтобы дождаться закрытия popup окна, можно использовать метод waitForEvent() с событием close для окна, которое было открыто.

Пример:

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });
  const page = await browser.newPage();

  const popupPromise = page.waitForEvent('popup');
  
  await page.goto('https://example.com');
  await page.click('button#open-popup');
  
  const popup = await popupPromise;
  
  // Ожидаем закрытия popup окна
  await popup.waitForEvent('close');
  console.log('Popup окно закрыто');
})();

В этом примере происходит ожидание открытия нового popup окна, а затем тест ожидает его закрытия с помощью события close.

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

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

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

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });
  
  // Открываем две вкладки
  const page1 = await browser.newPage();
  const page2 = await browser.newPage();
  
  // Ожидаем, пока загрузится первая вкладка
  await page1.goto('https://example.com');
  
  // Ожидаем, пока загрузится вторая вкладка
  await page2.goto('https://example.com/another-page');
  
  // Взаимодействуем с двумя вкладками
  await page1.click('button#action');
  await page2.fill('input#search', 'Playwright');
  
  // Закрываем вкладки
  await page1.close();
  await page2.close();
})();

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

Сохранение состояния между вкладками

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

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

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });
  const page1 = await browser.newPage();
  
  // Открываем первую вкладку и выполняем действия
  await page1.goto('https://example.com');
  await page1.fill('input[name="username"]', 'user');
  
  // Получаем cookies и локальное хранилище
  const cookies = await page1.context().cookies();
  const localStorageData = await page1.evaluate(() => localStorage.getItem('session'));
  
  // Открываем вторую вкладку с сохраненным состоянием
  const page2 = await browser.newPage();
  await page2.context().addCookies(cookies);
  await page2.evaluate((session) => localStorage.setItem('session', session), localStorageData);
  
  // Действия на второй вкладке
  await page2.goto('https://example.com/dashboard');
})();

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

Советы и рекомендации

  1. Тестирование всплывающих окон: Для надежности тестов убедитесь, что ваши тестовые сценарии корректно обрабатывают ожидаемое поведение всплывающих окон, включая их ожидание и проверку загрузки содержимого.

  2. Управление временем ожидания: При работе с popup окнами и вкладками важно правильно управлять временем ожидания с помощью таких методов, как waitForLoadState(), чтобы гарантировать, что все элементы на странице загружены до начала взаимодействия.

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

  4. Ожидание событий: Использование событий, таких как popup, close, и load позволяет более точно синхронизировать тесты с изменениями в интерфейсе, что улучшает стабильность и предсказуемость тестов.

Оглавление