Captures d'écran et vidéos avec Playwright
Ce chapitre explique comment utiliser Playwright pour les captures d'écran et l'enregistrement vidéo, afin de vous aider à localiser rapidement les problèmes lorsque les tests échouent.
page.screenshot() Captures d'écran
Capture d'écran pleine page
Exemple
// Enregistrer dans un fichier
await page.screenshot({ path: 'screenshots/example-homepage.png' });
// Obtenir les données Buffer (utiliser directement, ne pas écrire dans un fichier)
const buffer = await page.screenshot();
await page.screenshot({ path: 'screenshots/example-homepage.png' });
// Obtenir les données Buffer (utiliser directement, ne pas écrire dans un fichier)
const buffer = await page.screenshot();
Options de capture d'écran
Exemple
await page.screenshot({
path: 'screenshots/full-page.png',
fullPage: true, // Capturer toute la page (pas seulement la zone visible)
type: 'png', // Format : 'png' (par défaut) ou 'jpeg'
quality: 90, // Qualité JPEG (0-100, JPEG uniquement)
clip: { // Zone de découpe
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // Désactiver les animations CSS (captures d’écran plus stables)
omitBackground: false, // Indique s’il faut masquer l’arrière-plan par défaut
});
path: 'screenshots/full-page.png',
fullPage: true, // Capturer toute la page (pas seulement la zone visible)
type: 'png', // Format : 'png' (par défaut) ou 'jpeg'
quality: 90, // Qualité JPEG (0-100, JPEG uniquement)
clip: { // Zone de découpe
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // Désactiver les animations CSS (captures d’écran plus stables)
omitBackground: false, // Indique s’il faut masquer l’arrière-plan par défaut
});
Capture d’écran d’un élément
Exemple
// Prendre une capture d’écran d’un élément spécifique
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Capturer un bouton
await page.getByRole('button', { name: 'Submit' }).screenshot({ path: 'btn.png' });
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Capturer un bouton
await page.getByRole('button', { name: 'Submit' }).screenshot({ path: 'btn.png' });
Configuration automatique des captures d’écran
Définissez la stratégie de capture d’écran automatique dans le fichier de configuration sans avoir à l’appeler manuellement dans chaque test :
Exemple
// Chemin du fichier : playwright.config.ts
export default defineConfig({
use: {
// Prendre automatiquement des captures d’écran uniquement lorsque les tests échouent
screenshot: 'only-on-failure',
// Valeurs facultatives :
// 'off' — Ne pas prendre de captures d’écran
// 'on' — Prendre une capture d'écran pour chaque test
// 'only-on-failure' — Prendre une capture d'écran uniquement en cas d'échec (recommandé)
},
});
export default defineConfig({
use: {
// Prendre automatiquement des captures d’écran uniquement lorsque les tests échouent
screenshot: 'only-on-failure',
// Valeurs facultatives :
// 'off' — Ne pas prendre de captures d’écran
// 'on' — Prendre une capture d'écran pour chaque test
// 'only-on-failure' — Prendre une capture d'écran uniquement en cas d'échec (recommandé)
},
});
Les captures d'écran d'échec sont enregistrées dans letest-results/répertoire et affichées dans le rapport HTML.
Enregistrement vidéo
Configuration de l'enregistrement vidéo
Exemple
// Chemin du fichier : playwright.config.ts
export default defineConfig({
use: {
// Conserver les vidéos uniquement en cas d'échec
video: 'retain-on-failure',
// Valeurs facultatives :
// 'off' — Ne pas enregistrer
// 'on' — Enregistrer à chaque fois
// 'retain-on-failure' — Conserver en cas d'échec, supprimer en cas de réussite (recommandé)
// 'on-first-retry' — Enregistrer uniquement lors de la première nouvelle tentative
},
});
export default defineConfig({
use: {
// Conserver les vidéos uniquement en cas d'échec
video: 'retain-on-failure',
// Valeurs facultatives :
// 'off' — Ne pas enregistrer
// 'on' — Enregistrer à chaque fois
// 'retain-on-failure' — Conserver en cas d'échec, supprimer en cas de réussite (recommandé)
// 'on-first-retry' — Enregistrer uniquement lors de la première nouvelle tentative
},
});
Contrôle manuel de la vidéo
Exemple
test('Enregistrer manuellement la vidéo', async ({ page }) => {
await page.goto('https://www.example.com/');
// Effectuer des actions
await page.getByText('EXAMPLE Tutorial').click();
// Obtenir l'objet vidéo
const video = page.video();
// Enregistrer la vidéo dans le chemin spécifié
await video.saveAs('videos/example-test.mp4');
// Ou supprimer la vidéo
// await video.delete();
});
await page.goto('https://www.example.com/');
// Effectuer des actions
await page.getByText('EXAMPLE Tutorial').click();
// Obtenir l'objet vidéo
const video = page.video();
// Enregistrer la vidéo dans le chemin spécifié
await video.saveAs('videos/example-test.mp4');
// Ou supprimer la vidéo
// await video.delete();
});
Options d'enregistrement vidéo
Exemple
// Chemin du fichier : playwright.config.ts
export default defineConfig({
use: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Taille de la vidéo
},
},
});
export default defineConfig({
use: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Taille de la vidéo
},
},
});
Cas d'utilisation pour les captures d'écran et les vidéos
| Scénario | Solution recommandée |
|---|---|
| Comprendre rapidement l'état de la page lorsque les tests CI échouent | screenshot: 'only-on-failure' |
| Voir le processus complet d'exécution des tests | video: 'retain-on-failure' |
| Tests de régression visuelle | expect(page).toHaveScreenshot() |
| Déboguer des étapes spécifiques | Invocation manuellepage.screenshot() |
Autres extensionsLes captures d'écran et les vidéos augmentent le temps d'exécution des tests et l'utilisation du disque. Il est recommandé de les utiliser uniquement dans les environnements de production
'only-on-failure'ou'retain-on-failure'pour éviter de générer des fichiers multimédias à chaque fois.