APM решения

Для начала необходимо установить Puppeteer через npm: 

npm install puppeteer

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

const puppeteer = require(&

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        executablePath: '/usr/bin/chromium-browser', // путь к установленному браузеру
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await browser.close();
})();

Ключевой момент: параметр headless управляет режимом без графического интерфейса, что критично для CI/CD интеграций.

Навигация и работа с DOM

Puppeteer предоставляет мощные методы для навигации и взаимодействия с DOM: 

await page.goto('https://example.com', { waitUntil: 'networkidle2' });
const title = await page.title();
const content = await page.$eval('h1', el => el.textContent);
  • waitUntil: ‘networkidle2’ гарантирует, что страница полностью загрузилась.
  • eval < /code > позволяетвыполнитьфункциюнадвыбраннымэлементом. < /li >  < /ul >  < p > Дляпоисканесколькихэлементовиспользуетсяметод < code>$</code>:</p> <pre class="javascript"><code>const items = await page.$$('ul li'); for (const item of items) { const text = await item.evaluate(el => el.textContent); console.log(text); }

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

    Формы заполняются через методы type и click: 

    await page.type('#username', 'testuser');
await page.type('#password', 'password123');
await page.click('#loginButton');
await page.waitForNavigation({ waitUntil: 'networkidle2' });

    Метод waitForSelector обеспечивает синхронизацию с динамическим контентом: 

    await page.waitForSelector('.dashboard');

    Важно: использование waitForSelector предпочтительнее фиксированных задержек (setTimeout), так как делает тесты более стабильными.

    Скриншоты и PDF

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

    await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.pdf({ path: 'document.pdf', format: 'A4' });
    • fullPage: true захватывает всю страницу, а не только видимую область.
    • PDF поддерживает указание формата и ориентации страницы.

    Перехват запросов и тестирование API

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

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

    Ключевые возможности:

    • блокировка ненужных ресурсов для ускорения тестов,
    • имитация сетевых условий через page.setOfflineMode(true) и page.emulateNetworkConditions(),
    • сбор метрик времени отклика страницы для анализа производительности.

    Работа с APM решениями

    Puppeteer интегрируется с системами мониторинга приложений (Application Performance Monitoring), такими как New Relic, Datadog или Elastic APM. Основные сценарии:

    1. Сбор метрик загрузки страницы: Использование Performance API: 
    const performanceTiming = JSON.parse(
    await page.evaluate(() => JSON.stringify(window.performance.timing))
);
const pageLoadTime = performanceTiming.loadEventEnd - performanceTiming.navigationStart;
console.log(`Время полной загрузки страницы: ${pageLoadTime} мс`);
    1. Логирование событий и ошибок: 
    page.on('console', msg => console.log('Console:', msg.text()));
page.on('pageerror', err => console.error('Page Error:', err));
    1. Снимки состояния приложения при сбоях: Можно автоматически делать скриншоты при падении теста или ошибке: 
    page.on('pageerror', async () => {
    await page.screenshot({ path: `error_${Date.now()}.png` });
});
    1. Интеграция с внешними APM агентами: Через API агента или SDK можно отправлять метрики, собранные через Puppeteer, для визуализации и анализа: 
    const apm = require('elastic-apm-node');
apm.start({ serviceName: 'puppeteer-tests' });
apm.captureTransaction('pageLoad', 'test', () => {
    // логика теста
});

    Эмуляция устройств и тестирование под мобильные устройства

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

    const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);
await page.goto('https://example.com');

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

    Снимки производительности и профилирование

    Puppeteer поддерживает Chrome DevTools Protocol, позволяя собирать детальные профили: 

    const client = await page.target().createCDPSession();
await client.send('Performance.enable');
const metrics = await client.send('Performance.getMetrics');
console.log(metrics);

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

    Асинхронность и обработка ошибок

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

    try {
    await page.goto('https://example.com');
} catch (err) {
    console.error('Ошибка при загрузке страницы:', err);
}

    Для сложных сценариев полезно использовать Promise.all и Promise.race для одновременной работы с несколькими задачами и контроля таймаутов.

    Практические рекомендации

    • Использовать headless: true для CI/CD и headless: false для локальной отладки.
    • Предпочитать методы waitForSelector, waitForNavigation и networkidle2 вместо фиксированных задержек.
    • Перехватывать запросы и логировать их для анализа производительности.
    • Использовать встроенные инструменты DevTools Protocol для точной диагностики.
    • Эмулировать устройства и сетевые условия для комплексного тестирования приложений.

    Puppeteer сочетает возможности автоматизации UI с мощными инструментами мониторинга, позволяя тестировать производительность, отслеживать ошибки и интегрироваться с APM решениями для полноценного анализа веб-приложений.

Оглавление