Работа с prefers-reduced-motion и другими media features

Playwright предоставляет разработчикам мощный инструмент для тестирования веб-приложений, с возможностью эмулировать различные состояния и предпочтения пользователя, включая настройки доступности. Одной из таких возможностей является работа с медиа-запросами, в частности с prefers-reduced-motion. Этот медиа-запрос используется для определения предпочтений пользователя относительно анимаций и движения на веб-странице.

prefers-reduced-motion: что это?

Медиа-запрос prefers-reduced-motion позволяет веб-приложению реагировать на предпочтения пользователя, касающиеся использования анимаций и переходов. С помощью этого параметра можно определить, хочет ли пользователь минимизировать анимации или вообще отключить их. Это особенно важно для людей с нарушениями восприятия или тех, кто страдает от головных болей, вызванных чрезмерными анимациями.

Медиа-запрос может принимать два значения:

  • reduce: Указывает на предпочтение пользователя к уменьшению анимации.
  • no-preference: Нет предпочтений, анимации могут использоваться по умолчанию.

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

Использование prefers-reduced-motion в Playwright

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

Для эмуляции данного медиа-запроса в Playwright используется метод context.overridePermissions, а также возможность модификации контекста браузера, задавая предпочтения через настройку CSS-меток.

Эмуляция в Playwright

Чтобы эмулировать предпочтение prefers-reduced-motion с помощью Playwright, необходимо задать соответствующие параметры в контексте браузера, используя API для настройки пользовательских предпочтений. Пример кода, который задает контекст с уменьшенными анимациями:

const { test, expect } = require('@playwright/test');

test('эмуляция prefers-reduced-motion', async ({ page }) => {
  // Установка настройки для предпочитаемой минимизации анимаций
  await page.context().addInitScript(() => {
    Object.defineProperty(window, 'matchMedia', {
      value: (query) => {
        if (query === '(prefers-reduced-motion: reduce)') {
          return { matches: true };
        }
        return window.matchMedia(query);
      },
    });
  });

  await page.goto('https://example.com');

  // Проверка реакции сайта на уменьшение анимации
  const animationElement = await page.$('.animation-element');
  const animationStyle = await animationElement.evaluate(el => getComputedStyle(el).animation);
  expect(animationStyle).toBe('none');
});

Этот пример показывает, как использовать метод addInitScript для добавления JavaScript в контекст страницы, который переопределяет поведение matchMedia и заставляет браузер воспринимать запрос prefers-reduced-motion как активированный.

Тестирование с разными media features

Кроме prefers-reduced-motion, существует множество других media features, которые могут быть полезны при тестировании адаптивных интерфейсов. Некоторые из них:

  • prefers-color-scheme: Определяет предпочтение пользователя по теме интерфейса (темная или светлая тема).

    • Значения: light, dark, no-preference.

  • prefers-contrast: Предпочтения пользователя по контрастности интерфейса (например, высокий контраст).

    • Значения: high, low, no-preference.

  • device-width и device-height: Определяют размеры экрана устройства, что может быть полезно для тестирования на разных устройствах.

  • orientation: Определяет ориентацию экрана (портретная или альбомная).

    • Значения: portrait, landscape.

В Playwright можно эмулировать все эти запросы, создавая разнообразные условия для тестирования. Пример эмуляции темы интерфейса:

test('эмуляция prefers-color-scheme', async ({ page }) => {
  await page.context().addInitScript(() => {
    Object.defineProperty(window, 'matchMedia', {
      value: (query) => {
        if (query === '(prefers-color-scheme: dark)') {
          return { matches: true };
        }
        return window.matchMedia(query);
      },
    });
  });

  await page.goto('https://example.com');

  const bodyBackground = await page.$eval('body', (body) => getComputedStyle(body).backgroundColor);
  expect(bodyBackground).toBe('rgb(0, 0, 0)');  // Тёмная тема должна иметь тёмный фон
});

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

Работа с медиа-запросами в тестах позволяет глубже интегрировать тестирование доступности в процесс разработки. Например, с помощью эмуляции prefers-reduced-motion можно проверить, отключаются ли анимации и переходы на веб-странице, что критично для пользователей с определёнными медицинскими показаниями.

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

Выводы

Playwright предоставляет отличные возможности для тестирования медиа-запросов и предпочтений пользователей, включая prefers-reduced-motion. Использование этих функций позволяет обеспечить доступность и адаптивность веб-приложений, создавая лучшие условия для пользователей с особыми потребностями. С помощью эмуляции различных настроек можно протестировать реакцию интерфейса на изменения предпочтений и убедиться, что приложение отвечает требованиям доступности.

Оглавление