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.
If you still have questions, please ask a question and I will try to answer it.
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 [email protected].