How do I change the color scheme during a Playwright test?

Answer

Changing Color Scheme in Playwright Test

Yes, you can change the color scheme during a Playwright test using the page.emulateMedia() method. This method allows you to emulate various CSS media features, including color scheme, print styles, and reduced motion preference.

Here's an example of how to change the color scheme during a test:

import { test, expect } from '@playwright/test';

test('change color scheme to dark', async ({ page }) => {
  await page.goto('https://ray.run');

  // Emulate dark color scheme
  await page.emulateMedia({ colorScheme: 'dark' });

  // Perform your test actions and assertions
  // ...

  // Reset color scheme emulation to system defaults
  await page.emulateMedia({ colorScheme: null });
});

In this example, we first navigate to the https://ray.run website. Then, we use page.emulateMedia() to change the color scheme to 'dark'. After performing the test actions and assertions, we reset the color scheme emulation to the system defaults by passing null as the value.

Keep in mind that changing the color scheme only affects the visual rendering of the pages during tests and does not impact any other functionality of Playwright or your application under test.