Playwright
// Emulate forced-colors
await page.emulateMedia({
forcedColors: 'active'
});
// Check for border visibility using $eval
const button = page.getByTestId('button-primary');
const borderWidth = await button.$eval(
'self', el => getComputedStyle(el).borderWidth
);
// Should have visible border in HC mode
expect(parseInt(borderWidth)).toBeGreaterThan(0);
// Check focus uses outline, not box-shadow
await button.focus();
const outline = await button.$eval(
'self', el => getComputedStyle(el).outline
);
const boxShadow = await button.$eval(
'self', el => getComputedStyle(el).boxShadow
);
expect(outline).not.toBe('none');Testing Checklist
// CSS property audit using $$eval
const elements = await page.$$eval(
'button, a, input',
els => els.map(el => {
const style = getComputedStyle(el);
return {
tag: el.tagName,
// These should not be the only indicators
hasBgColor: style.backgroundColor !== 'transparent',
hasBorder: parseInt(style.borderWidth) > 0,
hasUnderline: style.textDecoration.includes('underline'),
// Focus should use outline
focusUsesOutline: style.outline !== 'none'
};
})
);
// Buttons should have borders
const buttonsNeedBorders = elements
.filter(el => el.tag === 'BUTTON' && !el.hasBorder);
// Links should have underlines
const linksNeedUnderlines = elements
.filter(el => el.tag === 'A' && !el.hasUnderline);
