Serverless Framework

Puppeteer — это библиотека для управления браузером Chromium или Chrome через протокол DevTools. Для начала работы необходимо установить пакет через npm: 

npm install puppeteer

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

const puppeteer = require(&


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



const browser = await puppeteer.launch({
  executablePath: '/usr/bin/google-chrome',
  headless: true
});



Опция headless: true позволяет запускать браузер без
графического интерфейса, что критично для серверных и CI/CD окружений.






Основные методы Puppeteer




Создание страницы и навигация:



const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });



waitUntil: ‘networkidle2’ гарантирует, что страница
полностью загрузилась и активные сетевые соединения практически
завершены. Это уменьшает вероятность ошибок при взаимодействии с DOM.




Работа с элементами DOM:



    

  • 
Поиск элементов:

    • 



const button = await page.$('button#submit');
const links = await page.$$('a');


    

  • 
Взаимодействие с элементами:

    • 



await button.click();
await page.type('input[name="email"]', 'test@example.com');
await page.select('select#country', 'RU');


    

  • 
Получение данных:

    • 



const title = await page.title();
const text = await page.$eval('h1', el => el.textContent);



Методы  < /code > и < code> < /code > позволяютискатьодинилинесколькоэлементов, а < code>eval
выполняет функцию в контексте страницы, возвращая результат напрямую в
Node.js.






Работа с событиями и ожиданиями




Для стабильного тестирования важно правильно управлять асинхронными
событиями. Puppeteer предоставляет несколько способов:



    

  • 
Ожидание элемента:

    • 



await page.waitForSelector('#success', { timeout: 5000 });


    

  • 
Ожидание навигации после действия:

    • 



await Promise.all([
  page.click('a#nextPage'),
  page.waitForNavigation({ waitUntil: 'networkidle0' })
]);



Использование Promise.all гарантирует, что клик и переход
будут синхронизированы, предотвращая ошибки из-за преждевременного
обращения к DOM.



    

  • 
Обработка сетевых событий:

    • 



page.on('request', request => console.log('Request:', request.url()));
page.on('response', response => console.log('Response:', response.status(), response.url()));



Эти события позволяют анализировать трафик и проверять корректность
запросов API при тестировании.






Скриншоты и PDF




Для визуального тестирования Puppeteer предоставляет встроенные функции
создания скриншотов и PDF:



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



Опция fullPage: true позволяет захватывать весь контент
страницы, а не только видимую область.






Работа с серверными и безголовыми сценариями




Для использования в серверной среде (например, Node.js на AWS Lambda или
Vercel), рекомендуется:



    

  1. 
Использовать puppeteer-core вместо полного
пакета, чтобы не загружать Chromium.

    2. 

  2. 
Подключать Chromium через
chrome-aws-lambda, оптимизированный под
serverless.

    3. 




Пример настройки для AWS Lambda:



const chromium = require('chrome-aws-lambda');
const puppeteer = require('puppeteer-core');

exports.handler = async (event) => {
  const browser = await puppeteer.launch({
    args: chromium.args,
    executablePath: await chromium.executablePath,
    headless: chromium.headless
  });

  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });
  
  const content = await page.content();
  await browser.close();
  return content;
};



Такая конфигурация минимизирует вес пакета и ускоряет запуск функций в
serverless-окружении.






Настройка таймаутов и обработка ошибок




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



page.setDefaultTimeout(10000); // 10 секунд для всех операций
page.setDefaultNavigationTimeout(20000); // 20 секунд для навигации



Ошибки обрабатываются стандартными try/catch блоками:



try {
  await page.click('#nonexistent');
} catch (error) {
  console.error('Элемент не найден:', error.message);
}



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






Автоматизация пользовательских сценариев




Puppeteer удобно использовать для имитации действий пользователя:



    

  • 
Логин и работа с формами:

    • 



await page.type('#username', 'admin');
await page.type('#password', 'secret');
await page.click('#loginButton');
await page.waitForNavigation({ waitUntil: 'networkidle0' });


    

  • 
Навигация по SPA:

    • 



await page.click('nav a#dashboard');
await page.waitForSelector('#dashboardContent');


    

  • 
Загрузка и анализ данных:

    • 



const items = await page.$$eval('.item', nodes => nodes.map(n => n.textContent));



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






Интеграция с тестовыми фреймворками




Puppeteer легко интегрируется с Jest, Mocha или другими фреймворками:



describe('Тестирование сайта', () => {
  let browser, page;

  beforeAll(async () => {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  test('Заголовок страницы корректен', async () => {
    await page.goto('https://example.com');
    const title = await page.title();
    expect(title).toBe('Example Domain');
  });
});



Такой подход позволяет строить полноценные e2e-тесты и интеграционные
сценарии, комбинируя Puppeteer с проверками через assertion-библиотеки.
Оглавление