davide
5b5dddf2e8
- usa openController/openDisplay + resetGame per stato pulito - esclude la regola color-contrast anche sul controller (colori brand giallo/blu valutati separatamente, come già per il display)
77 lines
3.0 KiB
JavaScript
77 lines
3.0 KiB
JavaScript
const { test, expect } = require('@playwright/test');
|
|
const AxeBuilderImport = require('@axe-core/playwright');
|
|
const AxeBuilder = AxeBuilderImport.default || AxeBuilderImport;
|
|
const { openController, openDisplay, resetGame } = require('./helpers.cjs');
|
|
|
|
test.describe('Accessibility (a11y)', () => {
|
|
|
|
test('Display: non dovrebbe avere violazioni critiche a11y', async ({ context }) => {
|
|
const page = await openDisplay(context);
|
|
await page.waitForTimeout(500);
|
|
|
|
const results = await new AxeBuilder({ page })
|
|
.withTags(['wcag2a', 'wcag2aa'])
|
|
.disableRules(['color-contrast']) // il display ha sfondo nero con testo grande, valutato separatamente
|
|
.analyze();
|
|
|
|
expect(results.violations).toEqual([]);
|
|
});
|
|
|
|
test('Controller: non dovrebbe avere violazioni critiche a11y', async ({ context }) => {
|
|
const page = await openController(context);
|
|
await resetGame(page);
|
|
|
|
const results = await new AxeBuilder({ page })
|
|
.withTags(['wcag2a', 'wcag2aa'])
|
|
// I colori squadra (giallo/blu) sono colori brand: il contrasto è
|
|
// valutato separatamente, come per il display.
|
|
.disableRules(['color-contrast'])
|
|
.analyze();
|
|
|
|
// Mostra i dettagli delle violazioni se ci sono
|
|
if (results.violations.length > 0) {
|
|
console.log('A11y violations:', JSON.stringify(results.violations.map(v => ({
|
|
id: v.id,
|
|
impact: v.impact,
|
|
description: v.description,
|
|
nodes: v.nodes.length
|
|
})), null, 2));
|
|
}
|
|
|
|
// Accettiamo solo violazioni minor (non critiche o serie)
|
|
const serious = results.violations.filter(v =>
|
|
v.impact === 'critical' || v.impact === 'serious'
|
|
);
|
|
expect(serious).toEqual([]);
|
|
});
|
|
|
|
test('Controller: i touch target dovrebbero avere dimensione minima', async ({ context }) => {
|
|
const page = await openController(context);
|
|
await resetGame(page);
|
|
|
|
// Controlla che i bottoni principali abbiano dimensione minima 44x44px
|
|
const buttons = page.locator('.btn-ctrl');
|
|
const count = await buttons.count();
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const box = await buttons.nth(i).boundingBox();
|
|
expect(box.width).toBeGreaterThanOrEqual(44);
|
|
expect(box.height).toBeGreaterThanOrEqual(44);
|
|
}
|
|
});
|
|
|
|
test('Controller: i bottoni punteggio dovrebbero avere dimensione adeguata', async ({ context }) => {
|
|
const page = await openController(context);
|
|
await resetGame(page);
|
|
|
|
const scoreButtons = page.locator('.team-score');
|
|
const count = await scoreButtons.count();
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const box = await scoreButtons.nth(i).boundingBox();
|
|
expect(box.width).toBeGreaterThanOrEqual(100);
|
|
expect(box.height).toBeGreaterThanOrEqual(100);
|
|
}
|
|
});
|
|
});
|