Responsive design тестирование

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

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

Эмуляция различных размеров экранов

Puppeteer предоставляет метод page.setViewport(), который задаёт размеры окна браузера. Этот метод принимает объект с шириной (width), высотой (height) и плотностью пикселей (deviceScaleFactor).

Пример настройки для мобильного устройства: 

await page.setViewport({
  width: 375,
  height: 812,
  deviceScaleFactor: 3
});

Для десктопа: 

await page.setViewport({
  width: 1920,
  height: 1080,
  deviceScaleFactor: 1
});

Важно: изменение размеров окна влияет на макет страницы, а также на реакцию элементов на hover и клики, что критично при тестировании интерактивных компонентов.

Эмуляция мобильных устройств

Puppeteer включает встроенные пресеты для популярных устройств через puppeteer.devices. Каждый пресет содержит параметры viewport и user-agent.

Пример эмуляции iPhone 13: 

const iPhone = puppeteer.devices[&
await page.emulate(iPhone);

Эмуляция включает:

  • Автоматическую установку ширины и высоты экрана.
  • User-agent, соответствующий устройству.
  • Плотность пикселей (deviceScaleFactor), что влияет на отрисовку графики.

Использование page.emulate() упрощает проверку верстки для различных мобильных устройств без необходимости вручную менять viewport.

Скриншоты и визуальная проверка

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

await page.screenshot({ path: 'mobile.png', fullPage: true });
await page.setViewport({ width: 1920, height: 1080 });
await page.screenshot({ path: 'desktop.png', fullPage: true });

Совет: полезно сохранять скриншоты с указанием устройства или разрешения в названии файла, чтобы легко отслеживать результаты тестирования.

Проверка CSS-медиа-запросов

Для автоматического тестирования responsive design можно использовать метод page.evaluate(), который позволяет выполнять JavaScript на странице.

Пример проверки активного медиа-запроса: 

const isMobileLayout = await page.evaluate(() => {
  return window.matchMedia("(max-width: 768px)").matches;
});
console.log(isMobileLayout ? 'Мобильная версия' : 'Десктоп версия');

Такой подход позволяет создавать автоматические тесты для проверки корректного применения стилей при разных разрешениях.

Работа с динамическим контентом

Адаптивная верстка часто подразумевает изменение DOM в зависимости от размера экрана. Puppeteer позволяет отслеживать динамические изменения через:

  • page.waitForSelector() — ожидание появления элемента.
  • page.eval() < /code > и < code > page.$eval()</code> — получение данных элементов после изменения DOM.</li> </ul> <p>Пример проверки меню, скрытого на мобильных устройствах:</p> <pre class="javascript"><code>await page.setViewport({ width: 375, height: 812 }); const menuVisible = await page.$eval('#menu', el => window.getComputedStyle(el).display !== 'none'); console.log(menuVisible); // false для скрытого меню

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

    Производительность и сетевые условия

    Для более реалистичного тестирования мобильных версий важно эмулировать сетевые условия с помощью page.emulateNetworkConditions().

    Пример имитации медленного 3G: 

    await page.emulateNetworkConditions({
  offline: false,
  downloadThroughput: 500 * 1024 / 8,
  uploadThroughput: 500 * 1024 / 8,
  latency: 400
});

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

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

    Puppeteer легко интегрируется с Jest, Mocha и другими фреймворками для организации автоматизированных тестов. Пример с Jest: 

    describe('Responsive layout tests', () => {
  let browser;
  let page;

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

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

  test('Mobile layout', async () => {
    await page.emulate(puppeteer.devices['iPhone 13']);
    await page.goto('https://example.com');
    const headerVisible = await page.$eval('header', el => el.offsetHeight > 0);
    expect(headerVisible).toBe(true);
  });

  test('Desktop layout', async () => {
    await page.setViewport({ width: 1920, height: 1080 });
    await page.goto('https://example.com');
    const headerVisible = await page.$eval('header', el => el.offsetHeight > 0);
    expect(headerVisible).toBe(true);
  });
});

    Такой подход позволяет запускать полноценные сценарии responsive-тестирования в рамках CI/CD.

    Советы по организации тестов

    • Разделять тесты на разные разрешения и устройства, чтобы легче было локализовать ошибки.
    • Использовать константы для размеров экранов, чтобы избежать магических чисел.
    • Сохранять скриншоты и логи, чтобы анализировать результаты тестов.
    • Проверять динамический контент и медиа-запросы, а не только статический layout.

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

Оглавление