Rayrun
← Back to Discord Forum

Change *colorScheme* in the middle of the test

Hi there, I wish to be able to change the system/browser's theme preference in the middle of my test, because my app can react to changes in user's preference without them having to reload the page. To assert this, I need to be able to change the system/browser's theme when the test runner is executing the test. Something like:

test("reacts to system theme changes", async ({ page }) => {
  // ...
  test.use({ colorScheme: "dark" });
  // ...
});

Currently, this API throws an error:

Error: Playwright Test did not expect test.use() to be called here.
    Most common reasons include:
    - You are calling test.use() in a configuration file.
    - You are calling test.use() in a file that is imported by the configuration file.
    - You have two different versions of @playwright/test. This usually happens
      when one of the dependencies in your package.json depends on @playwright/test.

Is there another API for such a use case? Or is it not supported by Playwright at the moment? I would appreciate any help!

This thread is trying to answer question "How to change the colorScheme in the middle of a test?"

4 replies

Change colorScheme in the middle of the test

Change colorScheme in the middle of the test

You can call await page.emulateMedia({ colorScheme: 'dark' }); during your test which should work. test.use inside a test is not supported.

Thanks @mxschmitt! That's exactly what I was looking for!

TwitterGitHubLinkedIn
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 [email protected].