Extensions Playwright et migration

Ce chapitre présente les fonctionnalités d'extension de l'écosystème Playwright, y compris le mode script de la bibliothèque, les services MCP, les agents de test, et un guide pour migrer d'autres frameworks vers Playwright.

Mode script de Playwright Library

Playwright Library est une bibliothèque autonome d'automatisation de navigateur, adaptée aux scénarios en dehors des exécuteurs de tests.

Installation

npm i playwright

Utilisation typique

Exemple

// Script de capture d'écran
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');
  await page.screenshot({ path: 'example.png', fullPage: vrai });
  await browser.close();
  console.log('Capture d’écran enregistrée dans example.png');
})();

Génération de PDF

Exemple

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');
  // Générer un PDF (Chromium uniquement)
  await page.pdf({
    path: 'example.pdf',
    format: 'A4',
    margin: { top: '20px', bottom: '20px' },
  });
  await browser.close();
})();

Choisir entre le mode bibliothèque et le lanceur de tests

ScénarioRecommandation
Écrire des tests E2ELanceur de tests Playwright
Captures d’écran de pages Web, génération de PDFBibliothèque Playwright
Extraction de données webBibliothèque Playwright
Scripts d'automatisation ponctuelsBibliothèque Playwright

Introduction à Playwright MCP

Le serveur Playwright MCP (Model Context Protocol) permet aux assistants IA de contrôler directement le navigateur.

Installation et configuration de MCP

# 为 Claude Code 添加 Playwright MCP
claude mcp add playwright npx @playwright/mcp@latest

Configurez-le dans VS Code ou d'autres clients MCP :

Exemple

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

Comment fonctionne MCP

L'agent IA perçoit le contenu de la page via des instantanés d'accessibilité structurés.

Chaque information d'accessibilité dispose d'unrefidentifiant ref, et l'Agent utilise cette ref pour effectuer des actions telles que cliquer et saisir du texte.

Cette approche ne nécessite pas de captures d'écran ; elle est entièrement basée sur l'interaction avec des données structurées, ce qui est rapide et hautement déterministe.

Playwright Test Agents

Les Test Agents sont des outils de test expérimentaux pilotés par l'IA qui peuvent générer et corriger automatiquement des tests.

AgentFonctionnalitéMéthode de déclenchement
PlannerExplorer automatiquement l'application et générer un plan de test MarkdownPiloté par un agent LLM
GeneratorConvertir le plan de test en code de test PlaywrightPiloté par un agent LLM
HealerExécuter la suite de tests et corriger automatiquement les tests en échecPiloté par un agent LLM

Initialiser les Test Agents :

# 为 VS Code 初始化
npx playwright init-agents --loop=vscode

# 为 Claude Code 初始化
npx playwright init-agents --loop=claude

Aperçu des tests de composants (expérimental)

Playwright permet de monter et tester directement des composants React/Vue sans avoir besoin d'un environnement de page complet.

Exemple

test('Button component test', async ({ mount }) => {
  // Monter le composant React
  const component = await mount(
    <Button title="Submit" />
  );

  // Vérifier le texte affiché par le composant
  await expect(component).toContainText('Submit');

  // Cliquer sur le bouton
  await component.click();
});

Tests d'accessibilité

Playwright fournit des assertions pour les noms et descriptions accessibles afin d'aider à vérifier l'accessibilité de la page.

Exemple

// Vérifier que l'élément a le bon nom accessible
await expect(page.getByRole('button'))
  .toHaveAccessibleName('Envoyer le formulaire');

// Vérifier que l'élément a une description accessible
await expect(page.getByLabel('Nom d'utilisateur'))
  .toHaveAccessibleDescription('Veuillez saisir une combinaison alphanumérique de 4-16 caractères');

Migration depuis d'autres frameworks

Migration depuis Puppeteer

Playwright et Puppeteer partagent les capacités du protocole Chrome DevTools, ce qui rend la migration relativement simple.

PuppeteerPlaywright
puppeteer.launch()chromium.launch()
page.waitForSelector()Pas nécessaire (attente automatique) oupage.locator()
page.$(selector)page.locator(selector)
page.evaluate()page.evaluate()(identique)
page.setRequestInterception()page.route()

Migration depuis Cypress

Le concept de Locator de Playwright est similaire au chaînage de requêtes de Cypress, mais il présente quelques différences clés :

CypressPlaywright
cy.get('.class')page.locator('.class')
cy.contains('text')page.getByText('text')
cy.get('[data-cy="btn"]')page.getByTestId('btn')avectestIdAttribute: 'data-cy'）
cy.intercept()page.route()
cy.wait()Pas nécessaire (attente automatique)

Migration depuis Selenium

Selenium utilise le protocole WebDriver, tandis que Playwright contrôle directement les protocoles des navigateurs, ce qui donne des styles d'API très différents.

SeleniumPlaywright
driver.findElement(By.id('x'))page.locator('#x')
driver.get(url)page.goto(url)
element.click()locator.click()
WebDriverWaitPas nécessaire (attente automatique intégrée)
new RemoteWebDriver()chromium.connect(url)

Conseil de migration : n'essayez pas de migrer tous les tests en une seule étape.

Choisissez d'abord les tests pour une ou deux fonctionnalités principales et réécrivez-les avec Playwright. Une fois la vérification réussie, migrez progressivement les tests restants.

Autres extensions