Outils de débogage Playwright

Ce chapitre présente les trois principaux outils de débogage de Playwright : le mode UI, Trace Viewer et le mode Debug en ligne de commande.

Introduction complète au mode UI

Le mode UI est l'interface de test graphique intégrée de Playwright, offrantune expérience tout-en-un pour explorer, exécuter et déboguer des tests.

Lancement du mode UI

npx playwright test --ui

Parcourir la liste des tests

Après le lancement, la barre latérale gauche affiche tous les fichiers de test.

Vous pouvez développer chaque fichier etdescribebloc pour exécuter, afficher, surveiller ou déboguer chaque test individuellement.

Mode surveillance

Après avoir cliqué sur le bouton Watch, Playwright surveille les modifications de fichiers et réexécute automatiquement les tests concernés dès que le code de test ou le code source est mis à jour.

Vue chronologique

Après l'exécution du test, une vue chronologique apparaît en haut, marquant la navigation et les actions avec différentes couleurs.

Vous pouvez survoler pour afficher les instantanés de chaque étape, ou double-cliquer pour sélectionner une période et afficher ses journaux détaillés.

Instantané DOM

Cliquer sur une étape de la chronologie affiche l'instantané DOM de ce moment à droite.

Vous pouvez voir l'état réel de la page avant et après l'action, ce qui vous permet d'identifier rapidement les problèmes.

Filtrage des tests

Le mode UI prend en charge plusieurs méthodes de filtrage :

  • Rechercher par nom de test pour
  • appuyez
    @tag
    filter
  • Filtrer par projet
  • Filtrer par statut : réussi, échoué, ignoré

Débogage en profondeur avec Trace Viewer

Trace Viewer est l'outil d'enregistrement et de lecture de Playwright, vous permettant d’inspecter chaque étape d'un test, comme pour déboguer un enregistrement.。

Configuration de la collecte des traces

Exemple

// Chemin du fichier : playwright.config.ts
export default defineConfig({
  use: {
    // Ne collecter la trace que lors d'une nouvelle tentative après un échec
    trace: 'on-first-retry',

    // Valeurs facultatives :
    // 'off' —— Ne pas collecter
    // 'on' —— Collecter à chaque fois
    // 'on-first-retry' —— Ne collecter qu'à la première nouvelle tentative (recommandé)
    // 'retain-on-failure' —— Ne conserver la trace qu'en cas d'échec
  },
});

Ouverture d'une trace

# 本地打开
npx playwright show-trace path/to/trace.zip

Vous pouvez également le téléverser surtrace.playwright.devpour une consultation en ligne.

Informations contenues dans une trace

ContenuDescription
Instantané DOMInstantanés complets du DOM de la page avant et après l’exécution de chaque étape
Requêtes réseauToutes les requêtes et réponses HTTP (URL, code d’état, en-tête, corps)
Journaux de la consoleTous les messages émis par la console du navigateur
Captures d'écranCaptures d’écran de la page pour chaque étape
Journal des actionsArguments d’appel et temps d’exécution de toutes les actions Playwright
Code sourceEmplacement du code source du test correspondant à chaque action

Utiliser la trace pour localiser les échecs

Trouvez l'étape échouée dans la timeline du Trace Viewer, inspectez l'état du DOM et les requêtes réseau de la page avant et après cette étape, et identifiez la cause de l'échec.

Trace est l'outil de débogage le plus puissant. Lorsqu'un test échoue sur CI mais que vous ne pouvez pas le reproduire localement, vous pouvez télécharger le fichier Trace généré par CI pour analyser la cause de l'échec hors ligne.

Mode --debug et page.pause()

Mode ligne de commande --debug

npx playwright test --debug

Fonctionnalités :

  • Ouvre automatiquement la fenêtre Playwright Inspector
  • Exécuter les opérations une par une
  • Déboguer dans les DevTools du navigateur
  • Utiliser
    F10
    (Step Over) et
    F11
    (Step Into) pour contrôler l'exécution

page.pause() Met en pause l'exécution

Exemple

// Définir un point d'arrêt dans le code
test('test de débogage', async ({ page }) => {
  await page.goto('https://www.example.com/');

  // Mettre l'exécution en pause et ouvrir l'Inspecteur
  await page.pause();

  // Dans l'Inspecteur, vous pouvez avancer pas à pas dans les actions suivantes
  await page.getByText('EXAMPLE Tutorial').click();
});

Après avoir utilisépage.pause()pour exécuter le test, Playwright ouvrira automatiquement la fenêtre de l'Inspecteur, ce qui vous permet d'inspecter l'état de la page pas à pas.

Choisir parmi les trois méthodes de débogage

MéthodeScénario applicable
Mode UIDéveloppement quotidien, consultation de la liste des tests, vérification rapide du statut des tests
Trace ViewerLocalisation des échecs de CI, analyse de chaque étape des tests complexes
--debug / page.pause()Développement de nouveaux tests, débogage approfondi d'étapes spécifiques
Autres extensions