Эмуляция цветовых схем

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

Что такое цветовые схемы и почему они важны?

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

  • Проверить адаптивность интерфейса.
  • Оценить читаемость текста и контента.
  • Выявить потенциальные ошибки в отображении UI-элементов.
  • Убедиться в корректной реализации медиа-запросов для темы пользователя.

Определение текущей цветовой схемы в браузере

Для начала стоит понять, как браузер определяет текущую цветовую схему. Это делается с помощью медиа-запросов, которые проверяют предпочитаемую тему пользователя. В CSS это выглядит так: 

@media (prefers-color-scheme: dark) {
  body {
    background-color: 
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

Важной частью является использование медиазапроса prefers-color-scheme, который позволяет веб-странице адаптироваться к предпочтениям пользователя.

Эмуляция цветовой схемы с помощью Puppeteer

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

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

Эмуляция светлой темы

Для того чтобы эмулировать светлую тему в Puppeteer, необходимо использовать следующий код: 

const puppeteer = require('puppeteer');

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

  // Эмуляция светлой темы
  await page.emulateMediaFeatures([
    { name: 'prefers-color-scheme', value: 'light' }
  ]);

  await page.goto('https://your-website.com');
  await page.screenshot({ path: 'light-theme.png' });

  await browser.close();
})();

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

Эмуляция тёмной темы

Для эмуляции тёмной темы нужно изменить параметр value в медиазапросе на ‘dark’: 

const puppeteer = require('puppeteer');

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

  // Эмуляция тёмной темы
  await page.emulateMediaFeatures([
    { name: 'prefers-color-scheme', value: 'dark' }
  ]);

  await page.goto('https://your-website.com');
  await page.screenshot({ path: 'dark-theme.png' });

  await browser.close();
})();

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

Применение на практике

Эмуляция цветовых схем полезна для тестирования таких аспектов, как:

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

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

Обработка ошибок и отладка

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

Чтобы убедиться в корректности эмуляции, следует использовать методы Puppeteer для отладки:

  • page.screenshot() для визуальной проверки отображения страницы.
  • page.evaluate() для проверки значений CSS свойств элементов.

Пример проверки, активен ли правильный стиль для тёмной темы: 

const isDarkTheme = await page.evaluate(() => {
  const backgroundColor = window.getComputedStyle(document.body).backgroundColor;
  return backgroundColor === 'rgb(18, 18, 18)'; // Проверка на тёмный фон
});

console.log(isDarkTheme ? 'Тёмная тема активна' : 'Тёмная тема не активна');

Заключение

Эмуляция цветовых схем в Puppeteer даёт возможность тестировать и проверять веб-приложения на соответствие требованиям пользователей с разными предпочтениями. Использование методов emulateMediaFeatures и prefers-color-scheme позволяет имитировать различные условия работы приложения, что особенно важно для современных веб-сайтов, поддерживающих несколько тем.

Оглавление