firefoxplaywrightplaywright-testhigh-contrast

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


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

Firefox HighContrast on Windows 10


Solution

  • 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: screenshot with firefox settings I use this Website to display the current browser config