Possible to get computed style of the page before analysing?

[rabbit0v0]

Product: react

Expectation: Do accessibility test with the actual color of the whole page.

Actual: Getting the colors in css instead of the actual color on screen, leading to false negative result.

Motivation: To get computed style when testing in high contrast mode.

@axe-core/playwright: "4.4.5"

[straker]

Thanks for the issue. Can you provide a url to the website this occurs on or some sample code that reproduces the issue? Without that I'm not sure there's much we can do.

[rabbit0v0]

Thanks for the reply!

For now we set high contrast mode with
await page.emulateMedia({ media: "screen", forcedColors: "active", colorScheme: "light" }); ,
and we are doing accessibility test with
const results = await new AxeBuilder({ page }).analyze();
We are not passing the test with this violation below,

"failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 1.07 (foreground color: #ffff00, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "html": "First name is a required field.",

A screenshot of the span is here.

The test fails because it retrieves the color from the css file where the color is set to yellow

We wonder if there could be a way to test the actual color from the screen instead of just checking the color in css file :) Many thanks!

[straker]

Thanks for the detailed response. I'm not sure there's much we can do. Axe gets the styles directly from window.getComputedStyles. It seems that puppeteer is not setting that when doing emulate media, but there isn't any other way we could read it. I can do some investigating and let you know what I find.