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.

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

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.