Back

Débuter avec les Tests d'Interface Utilisateur dans Playwright

Débuter avec les Tests d'Interface Utilisateur dans Playwright

Les tests d’interface utilisateur constituent une partie essentielle du développement frontend, garantissant que vos applications web fonctionnent correctement du point de vue de l’utilisateur. Playwright, le framework d’automatisation open source de Microsoft, s’est imposé comme un outil puissant pour les tests d’interface utilisateur, à la fois convivial pour les développeurs et robuste. Si vous avez entendu parler de Playwright mais ne l’avez pas encore essayé, ce guide vous montrera comment il fonctionne et s’il s’intègre dans votre flux de travail actuel.

Points Clés à Retenir

  • Playwright fournit des tests multi-navigateurs avec une API unique pour Chrome, Firefox et Safari
  • L’attente automatique et les environnements de test isolés réduisent les tests instables
  • Les outils de débogage intégrés comme Inspector et Trace Viewer simplifient le dépannage
  • Prend en charge les tests de design responsive, les comparaisons visuelles et les tests de composants
  • S’intègre facilement avec les pipelines CI/CD pour les tests automatisés

Qu’est-ce que Playwright et Pourquoi l’Utiliser pour les Tests d’Interface Utilisateur ?

Playwright est un framework de test end-to-end qui vous permet d’écrire des tests qui s’exécutent sur tous les navigateurs modernes (Chrome, Firefox, Safari) en utilisant une API unique. Contrairement à d’autres outils de test, Playwright a été spécifiquement conçu pour les applications web modernes avec des fonctionnalités qui rendent les tests d’interface utilisateur plus fiables et moins instables.

Les principaux avantages pour les tests d’interface utilisateur incluent :

  • Attente automatique : Playwright attend automatiquement que les éléments soient actionnables avant d’effectuer des opérations
  • Isolation : Chaque test s’exécute dans un contexte de navigateur frais, évitant les interférences entre tests
  • Support multi-navigateurs : Écrivez une fois, testez partout avec le même code
  • Capacités web modernes : Gère le Shadow DOM, les iframes et les composants web modernes
  • Outillage puissant : Outils de débogage intégrés comme Playwright Inspector et Trace Viewer

Configuration de Playwright pour les Tests d’Interface Utilisateur

Commencer avec Playwright est simple. Vous devez avoir Node.js installé, puis vous pouvez configurer un nouveau projet :

# Créer un nouveau répertoire pour votre projet
mkdir playwright-ui-testing
cd playwright-ui-testing

# Initialiser un nouveau projet Playwright
npm init playwright@latest

Pendant la configuration, vous serez invité à répondre à quelques questions. Pour les tests d’interface utilisateur, vous pouvez sélectionner TypeScript, ajouter un workflow GitHub Actions et installer les navigateurs lorsque demandé.

L’installation crée une structure de projet de base avec :

  • playwright.config.ts : Fichier de configuration pour vos tests
  • Répertoire tests : Où vos fichiers de test résideront
  • Répertoire .github : Configuration CI si vous avez sélectionné GitHub Actions

Écrire Votre Premier Test d’Interface Utilisateur

Écrivons un test d’interface utilisateur simple qui vérifie qu’une carte produit s’affiche correctement sur un site e-commerce. Créez un nouveau fichier appelé product-ui.spec.ts dans le répertoire tests :

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

test('product card displays correctly', async ({ page }) => {
  // Navigate to the page
  await page.goto('https://demo-store.playwright.dev');
  
  // Find a product card
  const productCard = page.locator('.product-card').first();
  
  // Verify the product card is visible
  await expect(productCard).toBeVisible();
  
  // Verify it contains expected elements
  await expect(productCard.locator('.product-title')).toBeVisible();
  await expect(productCard.locator('.product-price')).toBeVisible();
  await expect(productCard.locator('button.add-to-cart')).toBeEnabled();
  
  // Extract and verify product information
  const title = await productCard.locator('.product-title').textContent();
  console.log(`Found product: ${title}`);
});

Ce test :

  1. Ouvre un site de démonstration de boutique
  2. Localise une carte produit
  3. Vérifie que les éléments clés sont visibles et activés
  4. Extrait le titre du produit (montrant comment vous pouvez récupérer des informations)

Exécuter les Tests d’Interface Utilisateur

Pour exécuter votre test, utilisez la CLI Playwright :

npx playwright test product-ui.spec.ts

Par défaut, Playwright exécute les tests en mode headless. Pour voir le navigateur en action :

npx playwright test product-ui.spec.ts --headed

Pour exécuter les tests dans un navigateur spécifique :

npx playwright test product-ui.spec.ts --project=chromium

Tests d’Interface Utilisateur Avancés avec Playwright

Tester les Designs Responsives

Playwright facilite le test de votre interface utilisateur sur différentes tailles d’écran :

test('product card is responsive', async ({ page }) => {
  // Test on mobile viewport
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://demo-store.playwright.dev');
  
  // Verify mobile layout
  await expect(page.locator('.mobile-menu-button')).toBeVisible();
  
  // Test on desktop viewport
  await page.setViewportSize({ width: 1280, height: 800 });
  
  // Verify desktop layout
  await expect(page.locator('.desktop-navigation')).toBeVisible();
});

Tests Visuels

Playwright prend en charge les comparaisons visuelles pour détecter les changements d’interface utilisateur inattendus :

test('product page visual test', async ({ page }) => {
  await page.goto('https://demo-store.playwright.dev/product/1');
  
  // Compare screenshot with baseline
  await expect(page).toHaveScreenshot('product-page.png');
});

La première fois que vous exécutez ce test, il crée une capture d’écran de référence. Lors des exécutions suivantes, il compare l’état actuel avec la référence.

Tester les Éléments d’Interface Utilisateur Dynamiques

Les applications web modernes ont souvent des éléments d’interface utilisateur dynamiques. Playwright les gère bien :

test('add product to cart updates counter', async ({ page }) => {
  await page.goto('https://demo-store.playwright.dev');
  
  // Get initial cart count
  const cartCount = page.locator('.cart-count');
  await expect(cartCount).toHaveText('0');
  
  // Add product to cart
  await page.locator('.product-card button.add-to-cart').first().click();
  
  // Verify cart count updates
  await expect(cartCount).toHaveText('1');
});

Déboguer les Tests d’Interface Utilisateur

Quand les tests échouent, Playwright offre des outils de débogage puissants :

Playwright Inspector

Lancez l’inspecteur visuel pour déboguer vos tests :

PWDEBUG=1 npx playwright test product-ui.spec.ts

L’inspecteur vous permet de :

  • Parcourir l’exécution des tests étape par étape
  • Inspecter le DOM
  • Visualiser les logs de la console
  • Explorer les requêtes réseau

Trace Viewer

Les traces enregistrent des informations détaillées sur l’exécution des tests :

// Dans votre playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry', // Enregistrer les traces lors de la première nouvelle tentative des tests échoués
  },
});

Après l’échec d’un test, visualisez la trace :

npx playwright show-trace test-results/product-ui-test-chromium/trace.zip

Le visualiseur de traces montre :

  • Captures d’écran à chaque étape
  • Instantanés du DOM
  • Activité réseau
  • Logs de la console

Intégrer les Tests d’Interface Utilisateur Playwright dans Votre Flux de Travail

Exécuter les Tests en CI

Playwright fonctionne bien avec les systèmes CI. Pour GitHub Actions, l’assistant de configuration crée un fichier de workflow qui exécute vos tests lors des push et pull requests.

Pour d’autres systèmes CI, vous pouvez utiliser l’image Docker Playwright :

# Exemple pour GitLab CI
test:
  image: mcr.microsoft.com/playwright:v1.40.0-focal
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    expire_in: 1 week

Tests de Composants

Au-delà des tests au niveau de la page, Playwright prend également en charge les tests de composants pour des frameworks comme React, Vue et Svelte :

// Exemple pour les tests de composants React
import { test, expect } from '@playwright/experimental-ct-react';
import ProductCard from '../components/ProductCard';

test('ProductCard renders correctly', async ({ mount }) => {
  const component = await mount(
    <ProductCard 
      title="Test Product" 
      price="$19.99" 
      image="/test-image.jpg" 
    />
  );
  
  await expect(component).toContainText('Test Product');
  await expect(component).toContainText('$19.99');
  await expect(component.locator('button')).toBeEnabled();
});

FAQ

Playwright offre un support multi-navigateurs prêt à l'emploi et gère les onglets et fenêtres multiples, ce avec quoi Cypress a des difficultés. Playwright tend également à avoir moins de limitations lors des tests entre domaines. Cependant, Cypress a un écosystème plus mature et une interface de test runner plus conviviale.

Non. Playwright est conçu pour les tests end-to-end et d'intégration. Les tests unitaires avec des frameworks comme Jest restent précieux pour tester des fonctions et composants individuels de manière isolée.

Playwright vous permet de stocker l'état d'authentification et de le réutiliser dans tous les tests. D'abord, lancez un navigateur, naviguez vers la page de connexion, et effectuez les étapes de connexion en remplissant les champs nom d'utilisateur et mot de passe et en soumettant le formulaire. Une fois connecté, sauvegardez l'état de stockage du navigateur dans un fichier, qui contient les données d'authentification. Dans vos tests réels, vous pouvez configurer Playwright pour utiliser cet état d'authentification stocké afin de ne pas avoir à vous connecter avant chaque test. Cette approche accélère l'exécution de vos tests et assure la cohérence entre les sessions.

Oui, Playwright a des capacités de comparaison de captures d'écran intégrées. Pour des tests visuels plus avancés, vous pouvez l'intégrer avec des outils spécialisés comme Percy ou Applitools.

Vous pouvez accélérer vos tests d'interface utilisateur Playwright en les exécutant en parallèle, ce qui est activé par défaut. Lors du développement, utilisez le flag --project pour exécuter les tests uniquement sur des navigateurs spécifiques. Réutiliser l'état d'authentification au lieu de se connecter à chaque test réduit également le temps d'exécution. De plus, utiliser les tests de composants fournit un retour plus rapide pour les composants d'interface utilisateur individuels.

Conclusion

En incorporant Playwright dans votre stratégie de test, vous pouvez construire des applications frontend plus fiables avec la confiance que votre interface utilisateur fonctionne correctement sur tous les navigateurs et appareils. Ses mécanismes d’attente automatique, ses fonctionnalités d’isolation et ses outils de débogage puissants résolvent de nombreux problèmes courants dans les tests d’interface utilisateur. Que vous testiez des designs responsives, l’apparence visuelle ou les interactions dynamiques, Playwright fournit une solution complète qui s’intègre parfaitement avec les flux de travail de développement modernes.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers