120 lines
3.4 KiB
Markdown
120 lines
3.4 KiB
Markdown
# ABE — Multi-Browser, Mobile Emulation & Accessibility Specification
|
|
|
|
## Multi-browser testing
|
|
|
|
### Browsers soportados (via Playwright)
|
|
- chromium (Chrome/Edge) — siempre disponible
|
|
- firefox — opcional
|
|
- webkit (Safari) — opcional
|
|
|
|
### Configuración en ExplorationConfig
|
|
```typescript
|
|
browsers: Array<'chromium' | 'firefox' | 'webkit'>; // default: ['chromium']
|
|
```
|
|
|
|
### Comportamiento
|
|
Cuando se especifican múltiples browsers:
|
|
- ABE ejecuta la misma exploración en paralelo en cada browser
|
|
- Cada browser crea su propia sub-sesión con el mismo seed
|
|
- Los resultados se agrupan bajo la misma sesión padre
|
|
- Las anomalías incluyen qué browser las detectó
|
|
- Anomalías que aparecen en TODOS los browsers → severity += 1 level
|
|
- Anomalías que aparecen solo en un browser → añadir tag "browser-specific: webkit"
|
|
|
|
### Añadir a IAnomaly
|
|
```typescript
|
|
browser: 'chromium' | 'firefox' | 'webkit';
|
|
browserVersion: string;
|
|
```
|
|
|
|
---
|
|
|
|
## Mobile Viewport Emulation
|
|
|
|
### Devices predefinidos (usar Playwright devices)
|
|
```typescript
|
|
type MobileDevice =
|
|
| 'iPhone 14'
|
|
| 'iPhone 14 Pro Max'
|
|
| 'Pixel 7'
|
|
| 'Galaxy S23'
|
|
| 'iPad Pro'
|
|
| 'none' // desktop (default)
|
|
```
|
|
|
|
### En ExplorationConfig
|
|
```typescript
|
|
mobileDevice: MobileDevice; // default: 'none'
|
|
viewport: { width: number; height: number } | null; // override manual
|
|
```
|
|
|
|
### Implementación en PlaywrightAgent
|
|
```typescript
|
|
// Si mobileDevice !== 'none':
|
|
const device = playwright.devices[config.mobileDevice];
|
|
const context = await browser.newContext({ ...device });
|
|
```
|
|
|
|
### Anomalías específicas de mobile
|
|
Añadir tipo: `mobile_layout_issue` — detectado cuando:
|
|
- Un elemento clickable tiene menos de 44x44px (WCAG touch target)
|
|
- Hay scroll horizontal inesperado (viewport overflow)
|
|
- Un elemento está fuera del viewport en mobile
|
|
|
|
---
|
|
|
|
## Accessibility Testing (axe-core)
|
|
|
|
### Librería
|
|
Usar `@axe-core/playwright` (integración oficial axe + Playwright).
|
|
|
|
### Cuándo ejecutar
|
|
Después de cada acción que cambia el estado (navigation + click que resulta en nuevo estado).
|
|
NO ejecutar en cada acción fill (demasiado frecuente).
|
|
|
|
### Implementación
|
|
```typescript
|
|
import { checkA11y } from 'axe-playwright';
|
|
|
|
// En PlaywrightAgent, después de captureState():
|
|
async function runAccessibilityCheck(page: Page): Promise<IAccessibilityResult[]> {
|
|
const results = await checkA11y(page, undefined, {
|
|
detailedReport: true,
|
|
detailedReportOptions: { html: true },
|
|
});
|
|
return results.violations.map(v => ({
|
|
id: v.id,
|
|
impact: v.impact, // 'minor' | 'moderate' | 'serious' | 'critical'
|
|
description: v.description,
|
|
helpUrl: v.helpUrl,
|
|
nodes: v.nodes.length,
|
|
selector: v.nodes[0]?.target?.join(', '),
|
|
}));
|
|
}
|
|
```
|
|
|
|
### Nuevo tipo de anomalía
|
|
- type: `accessibility_violation`
|
|
- severity mapping desde axe impact:
|
|
- minor → low
|
|
- moderate → medium
|
|
- serious → high
|
|
- critical → critical
|
|
- description: "[axe] {violation.description}"
|
|
- evidence: { helpUrl, affectedNodes, wcagCriteria }
|
|
|
|
### En ExplorationConfig
|
|
```typescript
|
|
accessibility: {
|
|
enabled: boolean; // default: true
|
|
minImpact: 'minor' | 'moderate' | 'serious' | 'critical'; // default: 'serious'
|
|
wcagLevel: 'A' | 'AA' | 'AAA'; // default: 'AA'
|
|
}
|
|
```
|
|
|
|
### En el bug report
|
|
Añadir sección "Accessibility Violations" en report.md con:
|
|
- Lista de violaciones con impact badge
|
|
- Link a la documentación de cada regla (helpUrl de axe)
|
|
- Selector CSS del elemento afectado
|