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


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.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.