Управление вкладками

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

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

В Puppeteer вкладки представлены объектами Page. Каждый объект Page соответствует одной вкладке в браузере. После запуска браузера с помощью метода launch(), можно открыть первую вкладку с помощью метода browser.newPage(). Чтобы начать работать с несколькими вкладками, достаточно создать новые страницы, как только это потребуется.

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

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page1 = await browser.newPage();  // Создание первой вкладки
  const page2 = await browser.newPage();  // Создание второй вкладки

  await page1.goto('https://example.com');
  await page2.goto('https://google.com');
  
  // Ожидание загрузки страниц и выполнение тестов
  await page1.waitForSelector('h1');
  await page2.waitForSelector('input[name="q"]');

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

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

Переключение между вкладками

Puppeteer автоматически управляет вкладками в браузере, и для переключения между ними достаточно работать с нужным объектом Page. Это упрощает процесс выполнения действий на различных вкладках. Каждая операция, такая как ввод текста или клик по элементу, выполняется в контексте текущей активной вкладки.

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

Пример: 

const puppeteer = require('puppeteer');

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

  await page1.goto('https://example.com');
  await page2.goto('https://google.com');
  
  // Переключение между вкладками
  await page1.waitForSelector('h1');
  await page2.type('input[name="q"]', 'Puppeteer');

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

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

Закрытие вкладок

Закрытие вкладки в Puppeteer также реализуется с помощью метода close(). Каждый объект Page имеет такой метод, который позволяет закрыть вкладку, с которой в данный момент работает скрипт. После вызова метода close() объект страницы больше не доступен, и его нужно будет пересоздавать при необходимости.

Пример: 

const puppeteer = require('puppeteer');

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

  await page1.goto('https://example.com');
  await page2.goto('https://google.com');
  
  await page1.close();  // Закрытие первой вкладки
  await page2.close();  // Закрытие второй вкладки

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

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

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

Иногда тестирование требует выполнения нескольких задач параллельно, например, открытие одной вкладки для ввода данных, а другой — для выполнения запроса или проверки изменений. Для такого рода задач в Puppeteer можно использовать асинхронное выполнение с помощью Promise.all, что позволит работать с несколькими вкладками одновременно, не блокируя основной поток.

Пример: 

const puppeteer = require('puppeteer');

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

  await Promise.all([
    page1.goto('https://example.com'),
    page2.goto('https://google.com')
  ]);

  // Дополнительные действия на каждой вкладке
  await Promise.all([
    page1.waitForSelector('h1'),
    page2.waitForSelector('input[name="q"]')
  ]);

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

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

Управление вкладками с помощью URL

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

Пример: 

const puppeteer = require('puppeteer');

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

  await page.goto('https://example.com');
  await page.goto('https://google.com');  // Переход на другую страницу

  await page.waitForSelector('input[name="q"]');
  
  await browser.close();
})();

Ожидания и взаимодействия с вкладками

Как и в случае с одной вкладкой, для взаимодействия с элементами на различных страницах можно использовать методы ожидания, такие как waitForSelector(), а также методы для взаимодействия с элементами, например, click(), type(), и другие. При этом важно помнить, что каждый объект Page работает независимо, и можно выполнять действия на одной вкладке, пока другая загружает информацию.

Пример: 

const puppeteer = require('puppeteer');

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

  await page1.goto('https://example.com');
  await page2.goto('https://google.com');

  await page1.waitForSelector('h1');
  await page2.type('input[name="q"]', 'Puppeteer');
  await page2.press('Enter');

  await page2.waitForSelector('#search');
  
  await browser.close();
})();

Здесь на одной вкладке выполняется поиск в Google, в то время как на другой проверяется наличие заголовка на странице.

Управление вкладками при выполнении тестов

В тестах на Puppeteer важно учитывать, что каждая вкладка может быть в своём собственном состоянии и с собственным набором данных. Таким образом, необходимо тщательно управлять их состоянием, чтобы избежать ошибок. Особенно важно следить за состоянием вкладок при многократных переходах, закрытии страниц и синхронизации задач.

Для этого часто используют следующие подходы:

  • Использование метода waitForSelector() для синхронизации выполнения тестов.
  • Применение асинхронных функций для выполнения параллельных задач.
  • Строгая обработка ошибок и закрытие вкладок после завершения тестов.

Таким образом, Puppeteer предоставляет все необходимые инструменты для удобного и эффективного управления вкладками в процессе тестирования веб-приложений.

Оглавление