atelier-playwright

Débugger

Voici un test Playwright buggé :

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

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

  const [page1] = await Promise.all([
    page.waitForEvent('popup'),
    page.locator('[aria-label="GitHub repository"]').click()
  ]);

  await page1.locator('text=mxschmitt').click();
  await expect(page1).toHaveURL('https://github.com/microsoft/playwright/commits?author=mxschmitt');
  await expect(page1.locator('text=woof')).toBeVisible();
});

Exécutez-le. Quelles conclusions ?
Nous allons débugger ce test avec différents outils.

Débugger avec Playwright Inspector

npx playwright test mytest --debug

Lancer un test avec cette option fait plusieurs choses :

• Un seul navigateur sera lancé
• En mode headed (avec interface graphique)
• Pas de timeout
• Un objet playwright est accessible dans la console

Mise en pratique

Débugger avec VSCode

L’extension VSCode permet de débugger avec point d’arrêt et pas à pas.

Mise en pratique

Trace Viewer

Playwright peut enregistrer des traces au moment de passer un test. On peut le spécifier dans la configuration de Playwright Test, ou le forcer en ligne de commande

playwright.config.ts

import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    trace: 'retain-on-failure',
  },
});

Ou en ligne de commande

npx playwright test --trace on

Le Trace Viewer de Playwright peut être utilisé en local via npx playwright show-trace trace.zip ou en ligne https://trace.playwright.dev

ℹ️ note
Le Trace Viewer de Playwright est extrêmement utile pour débugger après coup, par exemple en analysant les traces de tests fait dans une Intégration Continue

Exemple de Trace

---

Références
https://playwright.dev/docs/debug
Debugging Playwright tests in VS Code
https://playwright.dev/docs/test-configuration#record-test-trace

This site is open source. Improve this page.