Générateur de tests Codegen de Playwright

Ce chapitre présente Codegen, le générateur de tests en ligne de commande de Playwright, qui génère automatiquement du code de test à partir des opérations effectuées dans le navigateur.

---

Qu'est-ce que Codegen

Codegen (générateur de code) est l'outil interactif de génération de tests intégré à Playwright.

Vous utilisez le navigateur comme un utilisateur normal, et Codegen convertit automatiquement vos opérations en code de test Playwright.

---

Démarrage de Codegen

# 基本用法：打开一个 URL 并开始录制
npx playwright codegen https://www.example.com/

# 指定代码生成的语言（默认 TypeScript）
npx playwright codegen --target=javascript https://www.example.com/
npx playwright codegen --target=python https://www.example.com/

Après le démarrage, deux fenêtres s'ouvrent :

• Fenêtre du navigateur: Vous interagissez avec la page dans cette fenêtre
• Fenêtre Playwright Inspector: Affiche le code généré en temps réel

---

Enregistrement des opérations

Lorsque vous effectuez une opération dans la fenêtre du navigateur, Codegen génère automatiquement le code Playwright correspondant :

Navigation

Saisir une nouvelle URL dans la barre d'adresse et appuyer sur Entrée génèrepage.goto()l'instruction.

Clic

Cliquer sur n'importe quel élément (bouton, lien, menu) génèrepage.getByRole(...).click()ou un code similaire de localisation et de clic.

Entrée

Saisir du texte dans un champ de saisie génèrepage.getByLabel(...).fill(...)oupage.getByPlaceholder(...).fill(...)。

Sélection

Sélectionner une option dans un menu déroulant génèrepage.getByLabel(...).selectOption(...)。

Case à cocher

Cocher ou décocher une case à cocher génèrepage.getByLabel(...).check()ou.uncheck()。

---

Sélectionner automatiquement le meilleur Locator

Codegen analyse les attributs des éléments de la page et génère un Locator selon la priorité suivante :

1. getByRole()— L'élément possède un rôle ARIA explicite
2. getByText()— L'élément possède un contenu textuel clair
3. getByLabel()— L'élément de formulaire possède un label associé
4. getByPlaceholder()— Le champ de saisie possède un placeholder
5. getByAltText()— L’image possède un attribut alt
6. getByTestId()— L’élément possède data-testid
7. getByTitle()— L’élément possède un attribut title
8. locator()— Sélecteur CSS (en dernier recours)

Si Codegen trouve plusieurs éléments correspondants, il optimise automatiquement le Locator jusqu’à ce que l’élément cible puisse être identifié de manière unique.

---

Génération d’assertions

Dans la barre d’outils de la fenêtre Inspector, vous pouvez cliquer sur le bouton d’assertion pour générer du code d’assertion :

• Vérifier la visibilité— Sélectionnez un élément après avoir cliqué, génèreawait expect(locator).toBeVisible()
• Vérifier le texte— Génèreawait expect(locator).toHaveText(...)
• Vérifier la valeur— Génèreawait expect(locator).toHaveValue(...)
• Vérifier l’instantané— Génèreawait expect(locator).toHaveScreenshot()

---

Options courantes de Codegen

Option	Description
--target=javascript	Générer du code JavaScript (TypeScript par défaut)
--target=python	Générer du code Python
--target=java	Générer du code Java
--target=csharp	Générer du code C#
--save-storage=auth.json	Enregistrer l'état d'authentification après l'enregistrement
--load-storage=auth.json	Charger l'état d'authentification existant avant l'enregistrement
-o tests/test.spec.ts	Spécifier le fichier de sortie (par défaut : sortie du terminal)
--viewport-size=375,812	Taille de viewport personnalisée (simuler des appareils mobiles)
--device="iPhone 15"	Utiliser des préréglages d'appareil
--color-scheme=dark	Spécifier le schéma de couleurs

---

Codegen vs VS Code Recording : comment choisir

Méthode	Scénario applicable
VS Code Record New	Développement quotidien de tests ; le code va directement dans l'éditeur et peut être modifié immédiatement
Ligne de commande Codegen	Prototypage rapide, génération de code inter-langages, aucune dépendance à l'IDE

Autres extensions