Add forced-colors to emulateMediaFeature

[jnurthen]

Now that forced-colors can be emulated in chromium we should add this ability to puppeteer. This will allow us to better test high contrast mode.

[thibaudcolas]

I’m interested in this as well, and emulation of prefers-contrast too, so had a look at what’s needed to make this work.

• Here’s the code that needs updating:

  puppeteer/src/common/Page.ts

  Lines 2370 to 2388 in e6442dd

  	async emulateMediaFeatures(features?: MediaFeature[]): Promise<void> {
  	if (!features) {
  	await this.#client.send('Emulation.setEmulatedMedia', {});
  	}
  	if (Array.isArray(features)) {
  	for (const mediaFeature of features) {
  	const name = mediaFeature.name;
  	assert(
  	/^(?:prefers-(?:color-scheme|reduced-motion)|color-gamut)$/.test(
  	name
  	),
  	'Unsupported media feature: ' + name
  	);
  	}
  	await this.#client.send('Emulation.setEmulatedMedia', {
  	features: features,
  	});
  	}
  	}

• As far as I can see the only changes needed are to allow those media features in the validation regex, and add tests / docs, identically to what was done for color-gamut in feat(page): add color-gamut support to Page.emulateMediaFeatures #6857.

---

If someone needs this in the meantime, you can use a CDPSession directly and call CDP’s Emulation.setEmulatedMedia. Something like:

const client = await page.target().createCDPSession();
await client.send("Emulation.setEmulatedMedia", {
  features: [{ name: "forced-colors", value: "active" }],
})

I wanted to try to make a PR for this but had trouble emulating multiple media features at once with this approach – not sure if I was doing it wrong but it’d be worth someone else double checking.

[axli20]

Any updates on when this functionality will be available?