microsoft/playwrightFramework d'automatisation de navigateur avec une API unique pour Chromium, Firefox et WebKit. Prend en charge les tests web, le scraping, les captures d'écran et l'interception réseau.
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.
Choisissez la voie qui correspond à votre flux de travail :
| Idéal pour | Installation | |
|---|---|---|
| Playwright Test | Tests de bout en bout | npm init playwright@latest |
| Playwright CLI | Agents de codage (Claude Code, Copilot) | npm i -g @playwright/cli@latest |
| Playwright MCP | Agents IA et automatisation pilotée par LLM | npx @playwright/mcp@latest |
| Playwright Library | Scripts d'automatisation de navigateur | npm i playwright |
| Extension VS Code | Écriture et débogage de tests dans VS Code | Installer depuis le Marketplace |
Playwright Test est un exécuteur de tests complet conçu pour les tests de bout en bout. Il exécute les tests sur Chromium, Firefox et WebKit avec une isolation complète du navigateur, une attente automatique et des assertions orientées web.
npm init playwright@latest
Ou ajoutez manuellement :
npm i -D @playwright/test
npx playwright install
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();
});
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 une surcharge quasi nulle.
Attente automatique et assertions orientées web. 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.
Localisateurs. Trouvez des éléments avec des localisateurs 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 nouveau profil de navigateur. Enregistrez l'état d'authentification une seule fois et réutilisez-le dans d'autres tests :
// Enregistrer l'état après connexion
await page.context().storageState({ path: 'auth.json' });
// Réutiliser dans d'autres tests
test.use({ storageState: 'auth.json' });
Traçage. Capturez les traces d'exécution, les captures d'écran et les 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.
Playwright CLI est une interface en ligne de commande pour l'automatisation de navigateur conçue pour les agents de codage. Elle est plus efficace en tokens que MCP — les commandes évitent de charger de grands schémas d'outils et des arbres d'accessibilité dans le contexte du modèle.
npm install -g @playwright/cli@latest
Installez éventuellement des compétences pour une intégration plus riche avec les agents :
playwright-cli install --skills
Confiez une tâche à votre agent de codage :
Testez le flux "add todo" sur https://demo.playwright.dev/todomvc en utilisant playwright-cli.
Prenez des captures d'écran pour tous les scénarios réussis et échoués.
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
Utilisez playwright-cli show pour ouvrir un tableau de bord visuel avec des aperçus vidéo 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
Le serveur Playwright MCP donne aux agents IA un contrôle complet 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.
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
Demandez à votre assistant IA d'interagir avec n'importe quelle page web :
Naviguez vers https://demo.playwright.dev/todomvc et ajoutez quelques éléments de tâches.
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.
Utilisez playwright comme bibliothèque pour les scripts d'automatisation de navigateur — extraction de données web, génération de PDF, capture d'écran, et tout flux de travail nécessitant un contrôle programmatique du navigateur sans exécuteur de tests.
npm i playwright
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();
L'extension Playwright VS Code apporte l'exécution de tests, le débogage et la génération de code directement dans votre éditeur.
Exécutez et déboguez les 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 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.
Sélectionnez des localisateurs. Survolez n'importe quel élément du navigateur pour voir le meilleur localisateur 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.
| Linux | macOS | Windows | |
|---|---|---|---|
| Chromium1 154.0.8037.0 | ✅ | ✅ | ✅ |
| WebKit 26.6 | ✅ | ✅ | ✅ |
| Firefox 155.0 | ✅ | ✅ | ✅ |
Exécution headless et avec interface sur toutes les plateformes. 1 Utilise Chrome for Testing par défaut.