[Feature]: Add prefers-contrast support to page.emulateMedia .

[maria-gourevitch]

🚀 Feature Request

Add prefers-contrast support to page.emulateMedia .

Example

test('High contrast theme has no regressions', ({page}) => {
  page.emulateMedia({prefersContrast: 'more'});
  await page.goto('https://staging.mysite.com');
  await expect(page).toHaveScreenshot();
});

test('Low contrast theme has no regressions', ({page}) => {
  page.emulateMedia({prefersContrast: 'less'});
  await page.goto('https://staging.mysite.com');
  await expect(page).toHaveScreenshot();
});

Motivation

Supporting prefers-contrast in page.emulateMedia would enable automated checking for regressions in high- and low- contrast themes. This is distinct from the already-supported (thank you!!!) forced-colors emulation: forced-colors ignores author-chosen colours in favour of colours specified by the user, while prefers-contrast allows the author to supply different CSS in response to a user-specified preference for high or low contrast.

Emulating prefers-contrast is already possible in Chromium by using CDPSession, but not in Webkit. Since MacOS/iOS/iPadOS only provides the end user a way to specify a contrast preference but not a colour scheme, and Playwright does not provide a way to emulate prefers-contrast in Webkit, site authors currently have no way of checking for regressions for users with different contrast preferences on desktop Safari, iPhone, or iPad.

Regressions in this area are unlikely to be caught incidentally, so they must be tested using time-consuming manual steps or missed. Adding prefers-contrast emulation would allow Playwright to save site maintainers even more time and catch even more errors before they make it to production and impact end users.