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

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

Почему это важно?

Современные браузеры и операционные системы позволяют пользователям выбирать цветовую схему интерфейса (светлая или тёмная тема), и веб-приложения должны быть подготовлены для корректной работы в обоих режимах. Некорректное отображение в одной из тем может привести к ухудшению пользовательского опыта и даже утрате функциональности интерфейса. Playwright позволяет протестировать, как сайт адаптируется под эти изменения.

Как это работает?

Playwright позволяет установить цветовую схему браузера с помощью page.emulateMedia(). Этот метод позволяет задать параметры для медиазапросов CSS, что позволяет эмулировать различные сценарии, такие как изменение цветовой схемы, размеры экрана и другие условия. Для эмуляции цветовой схемы необходимо использовать медиазапросы prefers-color-scheme с параметрами light или dark.

Пример использования

Для того чтобы эмулировать светлую или тёмную тему в Playwright, необходимо использовать команду page.emulateMedia() и указать параметр prefers-color-scheme.

Пример кода:

const { chromium } = require('playwright');

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

  // Эмуляция светлой темы
  await page.emulateMedia({
    prefersColorScheme: 'light'
  });
  await page.goto('https://example.com');
  // Здесь можно добавить проверки для светлой темы

  // Эмуляция тёмной темы
  await page.emulateMedia({
    prefersColorScheme: 'dark'
  });
  await page.goto('https://example.com');
  // Здесь можно добавить проверки для тёмной темы

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

В этом примере сначала эмулируется светлая тема с помощью prefersColorScheme: 'light', а затем — тёмная тема с prefersColorScheme: 'dark'. Сайт загружается дважды с разными настройками темы, что позволяет проверить, как он адаптируется к этим изменениям.

Сценарии для тестирования

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

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

  3. Проверка взаимодействия с пользователем Важным аспектом является тестирование того, как интерфейс взаимодействует с пользователем в разных темах. Это касается таких аспектов, как взаимодействие с формами, кнопками и выпадающими списками, а также проверка видимости текста на фоне.

Дополнительные настройки и опции

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

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

Пример:

await page.emulateMedia({
  prefersColorScheme: 'dark',
  prefersReducedMotion: 'reduce'
});

Ограничения и тонкости

Эмуляция цветовой схемы в Playwright работает только для таких браузеров, как Chromium и Firefox, и не поддерживается во всех случаях, например, для WebKit. Также стоит учитывать, что не все веб-страницы или элементы могут корректно адаптироваться к смене темы. Некоторые стили могут быть прописаны слишком жёстко или не использовать медиазапросы, что приведёт к неправильному отображению в тёмной или светлой теме.

Заключение

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

Оглавление