[Feature]: Vision Deficiency Simulation Support (Chrome)

[kriiv]

🚀 Feature Request

Provide support for Chrome DevTools vision deficiency filters. Allows for the simulation of multiple types of color blindness and vision deficiencies. Very useful for accessibility testing.

Tayuka Suemura on the Playwright Discord showed the below usage of CDP to access these Chrome features, however it would be great to have a more Playwright native way:

await page.goto("https://playwright.dev/");
const client = await page.context().newCDPSession(page);
await client.send("Emulation.setEmulatedVisionDeficiency", {
    type: "achromatopsia",
});

Google's DevTool notes on Color Vision Deficiency.

Example

There seems to be some support in the community for these features. I personally use it for accessibility testing and ADA compliance.

Current "work-around" usage:

import { test } from "@playwright/test";

test("basic test", async ({ page }) => {
  await page.goto("https://playwright.dev/");
  const client = await page.context().newCDPSession(page);

  await client.send("Emulation.setEmulatedVisionDeficiency", {
    type: "blurredVision",
  });
  await page.screenshot({ path: "blurredVision.png" });

  await client.send("Emulation.setEmulatedVisionDeficiency", {
    type: "reducedContrast",
  });
  await page.screenshot({ path: "reducedContrast.png" });

  await client.send("Emulation.setEmulatedVisionDeficiency", {
    type: "achromatopsia",
  });
  await page.screenshot({ path: "achromatopsia.png" });

});

Motivation

Accessibility testing is growing in importance. Having a Playwright native way of doing this will make it much easier for such testing within Playwright.

[tsuemura]

As far as I investigated, FireFox only supports the color blindness simulation, no blurred vision simulation support. I can't find documents for WebKit so I assume it doesn't support them but just marked them as "Unknown" so far.

Type	Chromium	FireFox	WebKit
deuteranopia	Yes	Yes	Unknown
protanopia	Yes	Yes	Unknown
tritanopia	Yes	Yes	Unknown
achromatopsia	Yes	Yes	Unknown
blurredVision	Yes	No	Unknown
reducedContrast	Yes	Yes	Unknown

Sources:

• https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setEmulatedVisionDeficiency
• https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/index.html