Grafana дашборды

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

npm install puppeteer

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

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

Основные концепции работы с Puppeteer

Puppeteer строится на взаимодействии с браузером через объекты Browser, Page и ElementHandle.

  • Browser — управление экземпляром браузера.
  • Page — отдельная вкладка, на которой выполняются действия.
  • ElementHandle — объект, представляющий DOM-элемент для взаимодействия.

Пример базового запуска страницы: 

const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('http://localhost:3000');

Навигация и ожидания

Puppeteer предоставляет мощные методы для синхронизации тестов с состоянием страницы.

  • page.goto(url, { waitUntil: ‘networkidle2’ }) — ждёт завершения сетевой активности.
  • page.waitForSelector(selector) — ждёт появления элемента на странице.
  • page.waitForTimeout(ms) — явная пауза (не рекомендуется для стабильных тестов).

Пример: 

await page.goto('http://localhost:3000/dashboard', { waitUntil: 'networkidle2' });
await page.waitForSelector('.panel-title');

Работа с элементами на дашбордах

Для тестирования Grafana дашбордов важно корректно идентифицировать панели, графики и фильтры.

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

const panel = await page.$('.panel-title');
const panels = await page.$$('.panel-title'); // массив всех панелей

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

await panel.click();
await page.type('#search-input', 'CPU usage');

Получение текста или атрибутов: 

const text = await panel.evaluate(el => el.textContent);
const dataId = await panel.evaluate(el => el.getAttribute('data-panel-id'));

Снимки и визуальное тестирование

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

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

Для отдельных панелей: 

const panel = await page.$('.panel-content');
await panel.screenshot({ path: 'panel.png' });

Тестирование динамических данных

Графики на дашбордах Grafana часто обновляются через AJAX-запросы. Puppeteer позволяет дождаться завершения этих операций: 

await page.waitForResponse(response => 
    response.url().includes('/api/datasources/proxy') && response.status() === 200
);

После этого можно проверить корректность отображения графика, текста или значений.

Скрипты для массового тестирования

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

const dashboards = ['cpu', 'memory', 'network'];

for (const name of dashboards) {
    await page.goto(`http://localhost:3000/d/${name}`);
    await page.waitForSelector('.panel-title');
    const titles = await page.$$eval('.panel-title', nodes => nodes.map(n => n.textContent));
    console.log(`${name} panels:`, titles);
}

Работа с фильтрами и временными диапазонами

Дашборды Grafana используют фильтры и временные интервалы, которые можно изменять программно: 

await page.click('#time-range-selector');
await page.click('.quick-range[data-range="1h"]');
await page.waitForTimeout(1000); // дождаться обновления графиков

Для фильтров: 

await page.type('.variable-input', 'server1');
await page.keyboard.press('Enter');
await page.waitForResponse(response => response.url().includes('/api/datasources/proxy'));

Логирование и отладка

Puppeteer поддерживает вывод консоли браузера в Node.js, что полезно при отладке сложных дашбордов: 

page.on('console', msg => console.log('BROWSER LOG:', msg.text()));

Также можно перехватывать ошибки: 

page.on('pageerror', err => console.error('PAGE ERROR:', err));

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

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

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

for (const page of pages) {
    await page.goto('http://localhost:3000/dashboard');
}

Использование headless режима и отключение графики (–disable-gpu, –no-sandbox) повышает стабильность и скорость выполнения.

Интеграция с CI/CD

Puppeteer легко интегрируется с CI/CD системами, такими как Jenkins, GitLab CI или GitHub Actions. Необходимы параметры для запуска без головы и без GPU: 

puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
});

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

Итоги по работе с Grafana дашбордами

Основные задачи, решаемые Puppeteer в тестировании Grafana:

  • Проверка наличия панелей и их заголовков.
  • Взаимодействие с фильтрами и временными диапазонами.
  • Верификация визуальных элементов с помощью скриншотов.
  • Слежение за динамическими данными через ожидание сетевых запросов.
  • Массовое тестирование нескольких дашбордов параллельно.

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

Оглавление