Cloud Storage

Puppeteer — это библиотека Node.js, предоставляющая высокий уровень управления браузером Chrome или Chromium через API. Она позволяет автоматизировать браузерные действия: навигацию, заполнение форм, снятие скриншотов, генерацию PDF, тестирование пользовательского интерфейса и взаимодействие с элементами страницы. Puppeteer используется в тестировании как альтернатива Selenium, обладая высокой скоростью и интеграцией с современными фреймворками JavaScript.

Установка Puppeteer выполняется через npm: 

npm install puppeteer

По умолчанию Puppeteer скачивает последнюю стабильную версию Chromium. Для экономии места или использования существующего браузера можно настроить параметр executablePath при запуске. 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
})();

Навигация и управление страницами

Puppeteer предоставляет методы для навигации и управления вкладками. Основные методы:

  • page.goto(url, options) — загрузка страницы с опциональными параметрами ожидания;
  • page.waitForSelector(selector) — ожидание появления элемента в DOM;
  • page.reload(options) — перезагрузка страницы;
  • page.url() — получение текущего URL.

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

await page.goto('https://example.com/login');
await page.type('#username', 'user123');
await page.type('#password', 'securepass');
await page.click('#submit');
await page.waitForNavigation();

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

Работа с формами и событиями

Для тестирования форм Puppeteer поддерживает:

  • page.type(selector, text, options) — ввод текста;
  • page.click(selector, options) — клик по элементу;
  • page.select(selector, values) — выбор опции в <select>;
  • page.evaluate(pageFunction, …args) — выполнение произвольного JavaScript на странице.

События браузера можно отслеживать через page.on, например: 

page.on('console', msg => console.log('PAGE LOG:', msg.text()));
page.on('response', response => console.log(`Response: ${response.url()} ${response.status()}`));

Это позволяет анализировать сетевой трафик и вывод консоли при автоматизированных тестах.

Скриншоты и генерация PDF

Puppeteer предоставляет инструменты визуальной проверки интерфейса: 

await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.pdf({ path: 'page.pdf', format: 'A4' });

Параметр fullPage: true позволяет захватить всю страницу целиком. PDF поддерживает настройку размеров, полей и ориентации.

Эмуляция устройств и пользовательских действий

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

const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);
await page.setGeolocation({ latitude: 55.751244, longitude: 37.618423 });
await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)');

Для тестирования медленных сетей можно использовать: 

await page.emulateNetworkConditions(puppeteer.networkConditions['Slow 3G']);

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

Навигация по элементам и их взаимодействие

Puppeteer позволяет работать с DOM как через селекторы, так и через XPath: 

const element = await page.$('#elementId'); // по CSS-селектору
const elements = await page.$$('div.item'); // массив элементов
const elementByXPath = await page.$x('//div[@class="item"]');

Методы для взаимодействия с элементами:

  • element.click() — клик по элементу;
  • element.type(‘text’) — ввод текста;
  • element.hover() — наведение курсора;
  • element.screenshot() — скриншот отдельного элемента.

page.evaluate позволяет выполнять сложные манипуляции с DOM: 

const innerText = await page.evaluate(el => el.innerText, element);

Работа с API и сетевыми запросами

Puppeteer предоставляет возможность перехвата и анализа сетевых запросов: 

await page.setRequestInterception(true);
page.on('request', request => {
  if (request.url().endsWith('.png')) {
    request.abort(); // блокировка изображений
  } else {
    request.continue();
  }
});

Перехват запросов полезен для тестирования API, анализа производительности и эмуляции ошибок сервера.

Тестирование на основе сценариев

Puppeteer идеально подходит для сценарного тестирования: 

async function loginTest() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  
  await page.goto('https://example.com/login');
  await page.type('#username', 'user123');
  await page.type('#password', 'securepass');
  await page.click('#submit');
  
  await page.waitForSelector('#welcomeMessage');
  const welcomeText = await page.$eval('#welcomeMessage', el => el.textContent);
  console.log(welcomeText);
  
  await browser.close();
}

loginTest();

Каждый тест можно интегрировать с Jest, Mocha или другими фреймворками для автоматизации и отчетности.

Управление состоянием браузера и сохранение сессий

Puppeteer поддерживает работу с cookies, localStorage и sessionStorage: 

await page.setCookie({ name: 'session', value: 'abc123' });
const cookies = await page.cookies();
console.log(cookies);

Можно сохранять состояние между запусками для тестирования аутентификации и сложных сценариев: 

const fs = require('fs');
await fs.promises.writeFile('cookies.json', JSON.stringify(cookies));
const savedCookies = JSON.parse(await fs.promises.readFile('cookies.json'));
await page.setCookie(...savedCookies);

Распараллеливание тестов и управление браузером

Для масштабного тестирования Puppeteer позволяет запускать несколько экземпляров браузера: 

const browsers = await Promise.all([
  puppeteer.launch(),
  puppeteer.launch(),
  puppeteer.launch()
]);

const pages = await Promise.all(browsers.map(browser => browser.newPage()));

Такой подход ускоряет нагрузочные тесты и проверку работы приложения в разных условиях.

Интеграция с облачными хранилищами

С помощью Puppeteer можно сохранять артефакты тестов (скриншоты, PDF, логи) в облачные хранилища, такие как AWS S3 или Google Cloud Storage: 

const { Storage } = require('@google-cloud/storage');
const storage = new Storage();
const bucket = storage.bucket('my-bucket');

await bucket.upload('screenshot.png', { destination: 'tests/screenshots/screenshot.png' });

Интеграция с облаком позволяет централизованно хранить результаты тестов, вести историю изменений и использовать их для CI/CD процессов.

Полезные практики

  • Использовать headless: true для CI/CD и headless: false при локальной отладке.
  • Разделять сценарии на модули для повторного использования.
  • Оборачивать асинхронные операции в try/catch для обработки ошибок.
  • Настраивать таймауты через page.setDefaultTimeout и page.setDefaultNavigationTimeout.
  • Логировать ключевые шаги теста для последующего анализа.

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

Оглавление