How can I turn on High Contrast mode for Firefox in my playwright tests

Question

I am trying to setup a playwright project to run high-contrast tests for Firefox. I have a working setup for chromium in high-contrast using the following in my playwright config:

name: 'chromium-highContrast',
  use: {
    browserName: 'chromium',
    colorScheme: 'dark',
    contextOptions: { forcedColors: 'active' },
  }

Now if I try the same setup for my Firefox tests it does not work. So for Firefox I would setup the project like this:

name: 'firefox-highContrast',
  use: {
    browserName: 'firefox',
    colorScheme: 'dark',
    contextOptions: { forcedColors: 'active' },
  }

The screenshot tests still show Firefox normally while in chromium they show as high-contrast. Same for debugging. I use Fedora 38 and playwright version 1.35.0 .

Do I need a different setup for Firefox or can I accomplish this in another way?

Edit: Added a Screenshot of the expected colors

Answer 1

I managed to set this up using the following settings.

firefoxUserPrefs: {
         'browser.display.document_color_use': 2,
         'browser.display.use_system_colors': false,
         'ui.use_standins_for_native_colors': false,
         'ui.highlight': '#00FFFF',
         'ui.highlighttext': '#000000',
         'ui.graytext': '#00FF00',
         'ui.buttonface': '#000000',
         'browser.anchor_color': '#FFFF00',
         'browser.display.background_color': '#000000',
         'browser.display.foreground_color': '#FFFFFF',
         'browser.visited_color': '#FFFF00',
         'browser.active_color': '#FFFF00',
},

The playwright browser sets some additional settings which differ from my local firefox version. My result looks like this which is still a little bit off but close enough for my purposes: I use this Website to display the current browser config

Answer 2

Here are the keys from about:config that can help you.

• layout.css.prefers-color-scheme.content-override - Website appearance
• browser.display.document_color_use - Colors -> Override the colors specified by the page with your selections above

// playwright.config.ts

  use: {
    browserName: "firefox",
    launchOptions: {
      firefoxUserPrefs: {
        "layout.css.prefers-color-scheme.content-override": 0, // Dark
        "browser.display.document_color_use": 2, // Always
      },
    },
  }

And UI will look like this:

and website

UPD:

Attached screenshot with params that matches Chrome high contrast mode. Yellow links and black background

browser.display.background_color = #000000
browser.display.foreground_color = #ffffff
browser.display.document_color_use = 2
browser.display.use_system_colors = false