Notre avis

Un skill qui guide l'écriture et l'exécution de tests end-to-end d'applications web avec Playwright, en incluant un audit systématique des routes et des vérifications d'accessibilité.

Points forts

Approche d'audit en trois étapes (cartographier, scanner, tester) avec des indications concrètes pour découvrir routes, endpoints API et composants dans le dépôt.
Script prêt à l'emploi (playwright_runner.py) prenant en charge capture d'écran et contrôle d'accessibilité sur une URL.
Principes E2E actionnables : priorisation des scénarios, sélecteurs data-testid, attentes explicites et configuration Playwright recommandée (retries, trace, screenshots).
Couvre aussi les tests visuels et les tests d'API, pas seulement les parcours navigateur.

Limites

Nécessite d'installer Playwright et le navigateur Chromium au préalable ; rien n'est automatisé pour l'installation.
Le script fourni reste basique (une URL à la fois) et ne génère pas de suite de tests ni de références de régression visuelle.
La section sur l'organisation des fichiers est tronquée et aucun exemple de code de test Playwright n'est fourni.

Quand l'utiliser

À utiliser lorsqu'il faut mettre en place ou structurer des tests E2E Playwright, ou auditer rapidement une application web en ligne sur ses fonctionnalités et son accessibilité.

Quand l'éviter

À éviter si vous cherchez des tests unitaires ou de composants uniquement, ou une intégration CI clé en main avec génération de configuration.

Exemples

Audit a live site

Audit https://example.com with scripts/playwright_runner.py: run the basic check, take a screenshot, and run the accessibility check. Then summarize the findings and list the issues by severity.

Map routes and plan E2E coverage

Scan this repo for all routes, API endpoints, and component directories, then propose a prioritized E2E test plan covering happy paths, auth flows, and critical business actions.

Set up Playwright config

Create a Playwright config with retries: 2 on CI, trace on-first-retry, screenshots on-failure, and video retain-on-failure, and scaffold a Page Object Model for our login flow.

name: webapp-testing description: End-to-end web application testing with Playwright. Use when writing E2E tests, setting up browser automation, running visual regression tests, or auditing a live web application for functionality and accessibility. allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Web App Testing

Discover and test everything. Leave no route untested.

🔧 Runtime Scripts

Execute these for automated browser testing:

| Script | Purpose | Usage | | ------------------------------ | ------------------- | --------------------------------------------------------- | | scripts/playwright_runner.py | Basic browser test | python scripts/playwright_runner.py https://example.com | | | With screenshot | python scripts/playwright_runner.py <url> --screenshot | | | Accessibility check | python scripts/playwright_runner.py <url> --a11y |

Requires: Run python -m pip install playwright and python -m playwright install chromium

1. Deep Audit Approach

Discovery First

| Target | How to Find | | ------------- | ------------------------------- | | Routes | Scan app/, pages/, router files | | API endpoints | Grep for HTTP methods | | Components | Find component directories | | Features | Read documentation |

Systematic Testing

Map - List all routes/APIs
Scan - Verify they respond
Test - Cover critical paths

2. Testing Pyramid for Web

        /\          E2E (Few)
       /  \         Critical user flows
      /----\
     /      \       Integration (Some)
    /--------\      API, data flow
   /          \
  /------------\    Component (Many)
                    Individual UI pieces

3. E2E Test Principles

What to Test

| Priority | Tests | | -------- | ------------------------- | | 1 | Happy path user flows | | 2 | Authentication flows | | 3 | Critical business actions | | 4 | Error handling |

E2E Best Practices

| Practice | Why | | ---------------------------- | ------------------ | | Use data-testid | Stable selectors | | Wait for elements | Avoid flaky tests | | Clean state | Independent tests | | Avoid implementation details | Test user behavior |

4. Playwright Principles

Core Concepts

| Concept | Use | | ----------------- | ---------------------- | | Page Object Model | Encapsulate page logic | | Fixtures | Reusable test setup | | Assertions | Built-in auto-wait | | Trace Viewer | Debug failures |

Configuration

| Setting | Recommendation | | ----------- | ----------------- | | Retries | 2 on CI | | Trace | on-first-retry | | Screenshots | on-failure | | Video | retain-on-failure |

5. Visual Testing

When to Use

| Scenario | Value | | ----------------- | ------ | | Design system | High | | Marketing pages | High | | Component library | Medium | | Dynamic content | Lower |

Strategy

Baseline screenshots
Compare on changes
Review visual diffs
Update intentional changes

6. API Testing Principles

Coverage Areas

| Area | Tests | | -------------- | --------------------------- | | Status codes | 200, 400, 404, 500 | | Response shape | Matches schema | | Error messages | User-friendly | | Edge cases | Empty, large, special chars |

7. Test Organization

File Structure

tests/
├── e2e/           # Full user flows
├── integration/   # API, data
├── component/     # UI units
└── fixtures/      # Shared data

Naming Convention

| Pattern | Example | | ------------- | --------------------------- | | Feature-based | login.spec.ts | | Descriptive | user-can-checkout.spec.ts |

8. CI Integration

Pipeline Steps

Install dependencies
Install browsers
Run tests
Upload artifacts (traces, screenshots)

Parallelization

| Strategy | Use | | -------- | ------------------ | | Per file | Playwright default | | Sharding | Large suites | | Workers | Multiple browsers |

9. Anti-Patterns

| ❌ Don't | ✅ Do | | ------------------- | -------------- | | Test implementation | Test behavior | | Hardcode waits | Use auto-wait | | Skip cleanup | Isolate tests | | Ignore flaky tests | Fix root cause |

Remember: E2E tests are expensive. Use them for critical paths only.

Tests E2E d’applications web avec Playwright

Recommandé pour