🎭 Playwright

Documentation | Référence de l'API

Playwright est un framework d'automatisation et de test web. Il pilote Chromium, Firefox et WebKit avec une seule API — dans vos tests, dans vos scripts, et comme outil pour les agents IA.

Pour commencer

Choisissez la voie qui correspond à votre flux de travail :

Playwright Test

Playwright Test est un exécuteur de tests complet conçu pour les tests de bout en bout. Il exécute des tests sur Chromium, Firefox et WebKit avec une isolation complète du navigateur, une attente automatique et des assertions web-first.

Installation

npm init playwright@latest

Ou ajoutez manuellement :

npm i -D @playwright/test
npx playwright install

Écrire un test

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Exécuter les tests

npx playwright test

Les tests s'exécutent en parallèle sur tous les navigateurs configurés, en mode headless par défaut. Chaque test obtient un nouveau contexte de navigateur — une isolation complète avec un surcoût quasi nul.

Fonctionnalités clés

Attente automatique et assertions web-first. Aucun délai d'attente artificiel. Playwright attend que les éléments soient actionnables, et les assertions réessaient automatiquement jusqu'à ce que les conditions soient remplies.

Locators. Trouvez des éléments avec des locators résilients qui reflètent la façon dont les utilisateurs voient la page :

page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')

Isolation des tests. Chaque test s'exécute dans son propre contexte de navigateur — équivalent à un profil de navigateur vierge. Enregistrez l'état d'authentification une fois et réutilisez-le entre les tests :

// Save state after login
await page.context().storageState({ path: 'auth.json' });

// Reuse in other tests
test.use({ storageState: 'auth.json' });

Tracing. Capturez des traces d'exécution, des captures d'écran et des vidéos en cas d'échec. Inspectez chaque action, instantané DOM, requête réseau et message console dans le Trace Viewer :

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});

npx playwright show-trace trace.zip

Parallélisme. Les tests s'exécutent en parallèle par défaut sur tous les navigateurs configurés.

Documentation complète sur les tests

Playwright CLI

Playwright CLI est une interface en ligne de commande pour l'automatisation de navigateur, conçue pour les agents de codage. Elle est plus économe en tokens que MCP — les commandes évitent de charger de grands schémas d'outils et d'arbres d'accessibilité dans le contexte du modèle.

Installation

npm install -g @playwright/cli@latest

Installez éventuellement des compétences (skills) pour une intégration d'agent plus riche :

playwright-cli install --skills

Utilisation

Dirigez votre agent de codage vers une tâche :

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Take screenshots for all successful and failing scenarios.

Ou exécutez des commandes directement :

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot

Surveillance de session

Utilisez playwright-cli show pour ouvrir un tableau de bord visuel avec des aperçus de screencast en direct de toutes les sessions de navigateur en cours. Cliquez sur n'importe quelle session pour zoomer et prendre le contrôle à distance.

playwright-cli show

Documentation complète du CLI | GitHub

Playwright MCP

Le serveur Playwright MCP donne aux agents IA un contrôle total du navigateur via le Model Context Protocol. Les agents interagissent avec les pages à l'aide d'instantanés d'accessibilité structurés — aucun modèle de vision ni capture d'écran requis.

Configuration

Ajoutez à votre client MCP (VS Code, Cursor, Claude Desktop, Windsurf, etc.) :

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Installation en un clic pour VS Code :

Pour Claude Code :

claude mcp add playwright npx @playwright/mcp@latest

Comment ça fonctionne

Demandez à votre assistant IA d'interagir avec n'importe quelle page web :

Navigate to https://demo.playwright.dev/todomvc and add a few todo items.

L'agent voit la page comme un arbre d'accessibilité structuré :

- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
  - checkbox "Toggle Todo" [ref=e10]
  - text: "Buy groceries"

Il utilise des références d'éléments comme e5 et e10 pour cliquer, saisir et interagir — de manière déterministe et sans ambiguïté visuelle. Les outils couvrent la navigation, le remplissage de formulaires, les captures d'écran, la simulation réseau, la gestion du stockage, et plus encore.

Documentation complète du MCP | GitHub

Playwright Library

Utilisez playwright comme bibliothèque pour des scripts d'automatisation de navigateur — scraping web, génération de PDF, captures d'écran, et tout flux de travail nécessitant un contrôle programmatique du navigateur sans exécuteur de tests.

Installation

npm i playwright

Exemples

Prendre une capture d'écran :

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

Générer un PDF :

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();

Émuler un appareil mobile :

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();

Intercepter les requêtes réseau :

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();

Documentation de la bibliothèque | Référence de l'API

VS Code Extension

L'extension Playwright pour VS Code apporte l'exécution des tests, le débogage et la génération de code directement dans votre éditeur.

Exécutez et déboguez des tests depuis l'éditeur en un seul clic. Définissez des points d'arrêt, inspectez les variables et parcourez l'exécution des tests avec une vue du navigateur en direct.

Générez des tests avec CodeGen. Cliquez sur « Record new » pour ouvrir un navigateur — naviguez et interagissez avec votre application pendant que Playwright écrit le code de test pour vous.

Choisissez des locators. Survolez n'importe quel élément du navigateur pour voir le meilleur locator disponible, puis cliquez pour le copier dans votre presse-papiers.

Intégration du Trace Viewer. Activez « Show Trace Viewer » dans la barre latérale pour obtenir une trace d'exécution complète après chaque exécution de test — instantanés DOM, requêtes réseau, journaux console et captures d'écran à chaque étape.

Installer l'extension | Guide VS Code

Prise en charge multi-navigateurs

Exécution headless et avec interface sur toutes les plateformes. ¹ Utilise Chrome for Testing par défaut.

Autres langages

Playwright est également disponible pour Python, .NET et Java.

Ressources

• Documentation
• Référence de l'API
• Serveur MCP
• CLI pour agents de codage
• Extension VS Code
• Guide de contribution
• Changelog
• Discord