playwright-skill MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Role-based and accessible locator patterns (avoid CSS/XPath fragility)
Network stubbing and response mocking idioms
Fixtures for auth state reuse across tests
Trace capture + debugging workflow via trace viewer
Parallelism and sharding guidance
Flakiness mitigation: web-first assertions, retry policy

Démo en direct

Aperçu en pratique

playwright-skill-2.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "playwright-skill-2",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "playwright-skill-2": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/testdino-hq/playwright-skill",
          "~/.claude/skills/playwright-skill"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add playwright-skill-2 -- git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : playwright-skill

How to write a maintainable first E2E test

👤 Developers adding Playwright to a project for the first time ⏱ ~30 min beginner

Quand l'utiliser : You have a staging URL and a login flow; you want one solid test before scaling.

Prérequis

Skill installed — git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill
@playwright/test installed — npm init playwright@latest

Déroulement

Describe the flow

Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ Copié

→ Test using getByRole, getByLabel; no .class or xpath
Add auth reuse fixture

Convert the login into a reusable auth fixture so other tests skip logging in.✓ Copié

→ storageState-based fixture + globalSetup
Ensure non-flakiness

Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ Copié

→ expect(locator).toBeVisible() rather than waitForSelector

Résultat : A robust first test plus a fixture the whole suite inherits.

Pièges

Claude reaches for page.waitForTimeout — Tell skill explicitly: no arbitrary waits, use web-first assertions

Stub a backend API to test frontend edge cases

👤 Frontend engineers testing empty/error/loading states ⏱ ~25 min intermediate

Quand l'utiliser : You can't easily put the real backend into each state.

Déroulement

Stub the endpoint

Stub GET /api/orders to return empty array, then assert the empty state renders.✓ Copié

→ route.fulfill with JSON body; assertion on empty-state element
Vary responses per test

Parameterize the stub: one test for 500 error, one for timeout, one for partial data.✓ Copié

→ Three tests sharing a helper

Résultat : Edge-state coverage without touching the backend.

Pièges

Stub leaks across tests — Set up in beforeEach or fixture scope, not in a module-level hook

Debug a flaky test using trace viewer

👤 Engineers triaging a flaky suite in CI ⏱ ~45 min intermediate

Quand l'utiliser : A test passes locally, fails 5% of the time in CI.

Déroulement

Capture trace on retry

Configure trace: 'on-first-retry' in playwright.config.ts.✓ Copié

→ Config diff
Analyze the trace

Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ Copié

→ Concrete diff in network/DOM timing
Fix

Based on the trace, propose the minimal change to de-flake.✓ Copié

→ Specific locator or assertion change, not a blanket sleep

Résultat : A de-flaked test with a documented root cause.

Pièges

Treating flakes by bumping timeouts — Most flakes are hidden race conditions — the trace usually reveals a missing await

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

playwright-skill-2 + seo-audit-skill

Playwright captures pages, SEO audit runs against rendered HTML for JS-heavy apps

Use Playwright to authenticate and capture logged-in pages, then run seo-audit against each.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler
Locator patterns	-	Writing new selectors
Network stubbing	-	Testing frontend edge states
Fixtures & auth reuse	-	Scaling a suite past 5 tests
Trace analysis	trace.zip	Debugging flakes
Parallelism & sharding	-	Suites running >5 min in CI

Coût et limites

Coût d'exécution

Quota d'API: None
Tokens par appel: Test generation: 3-8k tokens
Monétaire: Free
Astuce: Generate one test manually, save as a template, and have Claude follow the template for others.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Test credentials in .env (via dotenv). Never commit storageState.json with production auth.

Sortie de données : Tests hit your target URL. No third-party calls from the skill.

storageState.json contains session cookies. Gitignore it and don't upload as CI artifact publicly.

Dépannage

Erreurs courantes et correctifs

Test is flaky on CI only

Enable trace: 'on-first-retry' and analyze the trace from the failing attempt.

Vérifier : npx playwright show-trace trace.zip

getByRole doesn't find an element that's clearly there

Element may lack an accessible name. Use Playwright Inspector to see the computed role/name.

Vérifier : npx playwright test --ui

Login fixture works locally, fails in CI

CI may need --headed=false and explicit browser install. Run npx playwright install --with-deps in CI.

Alternatives

playwright-skill vs autres

Alternative	Quand l'utiliser	Compromis
Cypress	You prefer Cypress's DX and real-browser debugging	Different locator philosophy; less parallelism

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills