option

playwright-expert

Jeffallan/claude-skills Jeffallan/claude-skills

À utiliser pour écrire des tests E2E avec Playwright, mettre en place une infrastructure de test ou déboguer des tests de navigateur instables. À consulter pour l'automatisation des navigateurs, les tests E2E, le modèle d'objet de page (Page Object Model), l'instabilité des tests et les tests visuels. Mots-clés : Playwright, E2E, tests de navigateur, automatisation, Page Object.

...Développer tout
47
Heure mise à jour 29 juin 2026

À propos playwright-expert

La compétence «playwright-expert » est conçue pour faciliter la rédaction et la gestion de tests de bout en bout (E2E) à l’aide du framework Playwright. Elle permet de résoudre des problèmes courants tels que la mise en place d’une infrastructure de test, le débogage de tests instables et la garantie d’une automatisation des navigateurs facile à maintenir. En utilisant cette compétence, les utilisateurs peuvent rationaliser le processus de création de tests robustes, fiables et rapides pour les applications web, ce qui est essentiel pour les workflows CI/CD et les tests continus. Elle vise également à améliorer la qualité et la maintenabilité des tests, en aidant les testeurs à résoudre des problèmes tels que le comportement instable des navigateurs, les goulots d’étranglement au niveau des performances et les problèmes d’intégration avec divers services web.

Les principales fonctionnalités de la compétence «playwright-expert » comprennent une expertise dans les modèles POM (Page Object Model), la simulation d’API, les tests de régression visuelle et la configuration des tests pour Playwright. Cette compétence aide les utilisateurs à mettre en œuvre les meilleures pratiques, telles que l’utilisation de l’attente automatique pour éviter les délais d’expiration arbitraires, la rédaction de tests indépendants et l’utilisation de sélecteurs basés sur les rôles afin de garantir des exécutions de tests fiables. De plus, cette compétence fournit des recommandations pour la gestion du débogage, l’activation des traces et des captures d’écran pour une analyse rapide des tests, ainsi que l’exécution parallèle des tests afin d’optimiser les performances.

Cette compétence s’adresse principalement aux ingénieurs seniors en automatisation de l’assurance qualité, en particulier ceux qui possèdent une vaste expérience des tests sur navigateur et de Playwright. Elle est précieuse pour les utilisateurs chargés de mettre en place une infrastructure de test, de déboguer des tests instables, de mettre en œuvre des modèles POM, ainsi que de réaliser la simulation d’API et les tests de régression visuelle. Les développeurs et les testeurs travaillant sur des tests de bout en bout pour des applications web, en particulier dans des environnements CI/CD, trouveront cette compétence très utile.

FAQ

Comment configurer Playwright pour les tests de bout en bout ?

Vous pouvez configurer Playwright en suivant les instructions fournies dans le document « references/configuration.md », qui explique notamment comment configurer le fichier playwright.config.ts pour une exécution correcte des tests.

Qu’est-ce que le Page Object Model (POM) et en quoi facilite-t-il les tests ?

Le Page Object Model est un modèle de conception permettant de créer des classes de test qui représentent des pages web. Il facilite l’organisation et la maintenance des tests en centralisant les interactions avec les pages, ce qui rend les tests plus lisibles et plus faciles à maintenir.

Puis-je intégrer cette compétence dans mon pipeline CI/CD ?

Oui, cette compétence a été conçue dans une optique d’intégration CI/CD. Les tests écrits à l’aide de Playwright peuvent être facilement intégrés à votre pipeline CI/CD, garantissant ainsi des tests continus et des cycles de retour d’information plus rapides.

Y a-t-il des considérations de performances à prendre en compte lors de l’utilisation de Playwright ?

Il est recommandé d’exécuter les tests en parallèle afin d’optimiser leurs performances. Playwright prend également en charge l’attente automatique, ce qui réduit les délais d’expiration inutiles et améliore l’efficacité globale des tests.

Y a-t-il des restrictions concernant les sélecteurs de test dans cette compétence ?

Oui, il est conseillé d’éviter de s’appuyer sur des sélecteurs fragiles tels que les noms de classes CSS. Vous devriez plutôt utiliser des sélecteurs basés sur les rôles dans la mesure du possible afin de garantir la stabilité et la maintenabilité des tests.

Voir sur GitHub

Playwright Expert

E2E testing specialist with deep expertise in Playwright for robust, maintainable browser automation.

Core Workflow

  1. Analyze requirements - Identify user flows to test
  2. Setup - Configure Playwright with proper settings
  3. Write tests - Use POM pattern, proper selectors, auto-waiting
  4. Debug - Run test → check trace → identify issue → fix → verify fix
  5. Integrate - Add to CI/CD pipeline

Reference Guide

Load detailed guidance based on context:

TopicReferenceLoad When
Selectorsreferences/selectors-locators.mdWriting selectors, locator priority
Page Objectsreferences/page-object-model.mdPOM patterns, fixtures
API Mockingreferences/api-mocking.mdRoute interception, mocking
Configurationreferences/configuration.mdplaywright.config.ts setup
Debuggingreferences/debugging-flaky.mdFlaky tests, trace viewer

Constraints

MUST DO

  • Use role-based selectors when possible
  • Leverage auto-waiting (don't add arbitrary timeouts)
  • Keep tests independent (no shared state)
  • Use Page Object Model for maintainability
  • Enable traces/screenshots for debugging
  • Run tests in parallel

MUST NOT DO

  • Use waitForTimeout() (use proper waits)
  • Rely on CSS class selectors (brittle)
  • Share state between tests
  • Ignore flaky tests
  • Use first(), nth() without good reason

Code Examples

Selector: Role-based (correct) vs CSS class (brittle)

// ✅ Role-based selector — resilient to styling changesawait page.getByRole('button', { name: 'Submit' }).click();await page.getByLabel('Email address').fill('[email protected]');// ❌ CSS class selector — breaks on refactorawait page.locator('.btn-primary.submit-btn').click();await page.locator('.email-input').fill('[email protected]');

Page Object Model + Test File

// pages/LoginPage.tsimport { type Page, type Locator } from '@playwright/test';export class LoginPage {  readonly page: Page;  readonly emailInput: Locator;  readonly passwordInput: Locator;  readonly submitButton: Locator;  readonly errorMessage: Locator;  constructor(page: Page) {    this.page = page;    this.emailInput = page.getByLabel('Email address');    this.passwordInput = page.getByLabel('Password');    this.submitButton = page.getByRole('button', { name: 'Sign in' });    this.errorMessage = page.getByRole('alert');  }  async goto() {    await this.page.goto('/login');  }  async login(email: string, password: string) {    await this.emailInput.fill(email);    await this.passwordInput.fill(password);    await this.submitButton.click();  }}
// tests/login.spec.tsimport { test, expect } from '@playwright/test';import { LoginPage } from '../pages/LoginPage';test.describe('Login', () => {  let loginPage: LoginPage;  test.beforeEach(async ({ page }) => {    loginPage = new LoginPage(page);    await loginPage.goto();  });  test('successful login redirects to dashboard', async ({ page }) => {    await loginPage.login('[email protected]', 'correct-password');    await expect(page).toHaveURL('/dashboard');  });  test('invalid credentials shows error', async () => {    await loginPage.login('[email protected]', 'wrong-password');    await expect(loginPage.errorMessage).toBeVisible();    await expect(loginPage.errorMessage).toContainText('Invalid credentials');  });});

Debugging Workflow for Flaky Tests

// 1. Run failing test with trace enabled// playwright.config.tsuse: {  trace: 'on-first-retry',  screenshot: 'only-on-failure',}// 2. Re-run with retries to capture trace// npx playwright test --retries=2// 3. Open trace viewer to inspect timeline// npx playwright show-trace test-results/.../trace.zip// 4. Common fix — replace arbitrary timeout with proper wait// ❌ Flakyawait page.waitForTimeout(2000);await page.getByRole('button', { name: 'Save' }).click();// ✅ Reliable — waits for element stateawait page.getByRole('button', { name: 'Save' }).waitFor({ state: 'visible' });await page.getByRole('button', { name: 'Save' }).click();// 5. Verify fix — run test 10x to confirm stability// npx playwright test --repeat-each=10

Output Templates

When implementing Playwright tests, provide:

  1. Page Object classes
  2. Test files with proper assertions
  3. Fixture setup if needed
  4. Configuration recommendations

Knowledge Reference

Playwright, Page Object Model, auto-waiting, locators, fixtures, API mocking, trace viewer, visual comparisons, parallel execution, CI/CD integration

Documentation

Tous les fichiers

1 fichiers
SKILL.md 2.8k
Voir

Installer playwright-expert

Téléchargez et décompressez les fichiers de compétences dans votre répertoire .claude/skills/.

Télécharger le ZIP

Clonez le dépôt et copiez les fichiers de compétence dans votre projet.

git clone https://github.com/Jeffallan/claude-skills/blob/main/skills/playwright-expert/SKILL.md # Copy SKILL.md to your .claude/skills/ directory

Copier Copier
Configuration rapide: Copiez le dossier de la compétence dans .claude/skills/ ; Claude la détectera automatiquement et l'utilisera.

Compétences similaires

playwright-cli
Heure mise à jour 29 juin 2026
frontend-testing-best-practices
Heure mise à jour 7 juillet 2026
Playwright Browser Automation
Heure mise à jour 29 juin 2026
playwright-generate-test
Heure mise à jour 29 juin 2026
OR