Приоритизация задач

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

Установка и настройка

Для начала проект должен использовать Node.js версии 14 и выше. Установка Puppeteer осуществляется через npm: 

npm install puppeteer

По умолчанию Puppeteer загружает встроенную версию Chromium. Для работы с уже установленным браузером можно использовать опцию executablePath: 

const browser = await puppeteer.launch({
  executablePath: &
  headless: true
});

Ключевые параметры при запуске браузера:

  • headless: запуск без графического интерфейса (true по умолчанию);
  • slowMo: замедление действий для визуальной отладки;
  • args: дополнительные флаги Chromium (например, –no-sandbox, –disable-setuid-sandbox).

Основные объекты и методы

Puppeteer оперирует несколькими ключевыми объектами:

  1. Browser — экземпляр браузера. Позволяет открывать новые вкладки и управлять процессами.
  2. Page — отдельная вкладка браузера. Основной объект для тестирования.
  3. ElementHandle — ссылка на элемент DOM, с которым можно выполнять действия.
  4. Frame — фреймы страницы, включая iframe.

Примеры базовой работы с Page: 

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

Метод goto позволяет загрузить страницу и дождаться завершения сетевых запросов. Параметр waitUntil: ‘networkidle2’ гарантирует, что страница полностью загружена.

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

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

  • page.(selector) < /code > —первыйэлемент, соответствующийселектору;  < /li >  < li >  < code > page.(selector) < /code > —всеэлементы, соответствующиеселектору;  < /li >  < li >  < code > page.eval(selector, callback) — выполняет функцию над найденным элементом;
  • page.$$eval(selector, callback) — выполняет функцию над массивом элементов.

Примеры действий: 

await page.type('#username', 'testuser');
await page.click('#submit');
await page.waitForSelector('.success-message');

Метод type симулирует ввод текста, click — нажатие кнопки, waitForSelector — ожидание появления элемента на странице.

Работа с событиями и задержками

Puppeteer поддерживает события браузера:

  • page.on(‘dialog’, callback) — обработка alert, confirm и prompt;
  • page.on(‘console’, callback) — перехват сообщений console.log;
  • page.on(‘request’, callback) — перехват сетевых запросов.

Пример с ожиданием навигации после клика: 

await Promise.all([
  page.waitForNavigation({ waitUntil: 'networkidle2' }),
  page.click('a.next-page')
]);

Использование Promise.all гарантирует, что клик не произойдет до ожидания загрузки новой страницы.

Скриншоты и PDF

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

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

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

Тестирование и приоритизация задач

При автоматизации тестов важно структурировать сценарии и определять приоритет выполнения. Основные критерии:

  1. Критические пути (Critical Path) — базовые функции, которые должны работать всегда (авторизация, оформление заказа).
  2. Часто используемые функции — элементы, с которыми взаимодействуют большинство пользователей.
  3. Редкие сценарии — тесты для нестандартных действий, которые могут выполняться реже, но выявляют сложные баги.
  4. Регрессионные тесты — проверка ранее исправленных ошибок.

Стратегия приоритизации:

  • Сначала проверка критических функций;
  • Затем тесты с высокой пользовательской активностью;
  • Далее — менее важные сценарии;
  • В конце — вспомогательные и дополнительные проверки.

Советы по оптимизации тестов

  • Использовать headless: true для ускорения;
  • Минимизировать задержки и таймауты;
  • Группировать действия в логические блоки;
  • Использовать селекторы с уникальными идентификаторами (id или data-testid);
  • Логировать шаги для упрощения диагностики.

Параллельное тестирование

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

const pages = await Promise.all([
  browser.newPage(),
  browser.newPage()
]);

await Promise.all(pages.map(page => page.goto('https://example.com')));

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

Работа с асинхронностью

Все методы Puppeteer возвращают промисы, что требует корректного использования async/await: 

async function runTest() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  // действия с элементами
  await browser.close();
}

runTest();

Неправильная обработка промисов может привести к зависанию тестов или ложным результатам.

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

Puppeteer легко интегрируется с Jest, Mocha или Jasmine. Пример с Jest: 

describe('Login page', () => {
  let browser;
  let page;

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

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

  test('User can login', async () => {
    await page.goto('https://example.com/login');
    await page.type('#username', 'testuser');
    await page.type('#password', 'password');
    await Promise.all([
      page.waitForNavigation(),
      page.click('#login')
    ]);
    const successMessage = await page.$eval('.success', el => el.textContent);
    expect(successMessage).toContain('Welcome');
  });
});

Такая интеграция позволяет использовать мощные средства отчётности и мокирования.

Работа с сетью и API

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

await page.setRequestInterception(true);
page.on('request', request => {
  if (request.url().includes('analytics')) {
    request.abort();
  } else {
    request.continue();
  }
});

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

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

Оглавление