Tester React avec Playwright

Pourquoi Tester React avec Playwright ?

Tester React est une pratique cruciale pour garantir la qualité et la robustesse des applications web modernes. Dans un monde où les exigences utilisateur sont croissantes, il est vital de s'assurer que chaque composant fonctionne correctement en différents scénarios d'utilisation. Playwright est une solution puissante pour tester React, offrant une couverture complète et des capacités avancées.

Un cas concret serait de développer un gestionnaire de tâches. Tester ce type d'application nécessite de s'assurer que les fonctionnalités principales (ajout, suppression, modification) soient opérationnelles, qu'il y ait une gestion correcte des erreurs et qu'il n'y a pas de fuites de mémoire.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin de :

• Connaissance de base de JavaScript et React
• Un environnement de développement configuré (Node.js, npm)
• Playwright installé

Installation des outils

1. Node.js et npm : Assurez-vous d'avoir Node.js et npm installés sur votre machine. Vous pouvez les installer via le site officiel de Node.js.
2. Playwright : Installez Playwright en utilisant npm :

   npm init -y
   npm install playwright
   npx playwright install
   

Concepts fondamentaux

1. Page Object Model (POM)

Le POM est une approche de test qui permet d'organiser les tests autour des pages plutôt que des composants individuels. Cela rend le code plus maintenable et réutilisable.

// src/pages/TodoPage.js
import { page } from '@playwright/test';

class TodoPage {
  constructor(page) {
    this.page = page;
    this.todoInput = page.locator('#new-todo');
    this.todosList = page.locator('.todo-list li');
  }

  async addTodo(text) {
    await this.todoInput.fill(text);
    await this.todoInput.press('Enter');
  }

  async getTodos() {
    return await this.todosList.allTextContents();
  }
}

export default TodoPage;

2. Page Locators

Playwright utilise des sélecteurs intelligents pour localiser les éléments de la page, ce qui simplifie le codage et rend les tests plus robustes.

// src/pages/TodoPage.js (suite)
import { page } from '@playwright/test';

class TodoPage {
  constructor(page) {
    this.page = page;
    this.todoInput = page.locator('#new-todo');
    this.todosList = page.locator('.todo-list li');
  }

  async addTodo(text) {
    await this.todoInput.fill(text);
    await this.todoInput.press('Enter');
  }

  async getTodos() {
    return await this.todosList.allTextContents();
  }
}

export default TodoPage;

3. Asynchronous Testing

React applications are inherently asynchronous, and Playwright handles this gracefully by allowing you to use async/await for your tests.

// src/tests/todo.test.js
import { test, expect } from '@playwright/test';
import TodoPage from '../pages/TodoPage';

test('adds a new todo', async ({ page }) => {
  const todoPage = new TodoPage(page);
  await todoPage.addTodo('Buy groceries');

  const todos = await todoPage.getTodos();
  expect(todos).toContain('Buy groceries');
});

Mise en pratique : projet fil rouge

Nous allons créer un mini-gestionnaire de tâches React simple pour mettre en place les concepts appris.

Étape 1 : Créer le projet React

1. Initialiser un nouveau projet React :

   npx create-react-app todo-manager
   cd todo-manager
   

2. Créer la structure de pages :

   • src/pages/TodoPage.js
   • src/tests/todo.test.js

Étape 2 : Implémenter le composant Todo

1. Modifier App.js pour inclure le gestionnaire de tâches :

   // src/App.js
   import React, { useState } from 'react';
   import './App.css';
   
   function App() {
     const [todos, setTodos] = useState([]);
     const [inputValue, setInputValue] = useState('');
   
     const handleAddTodo = () => {
       if (inputValue.trim() !== '') {
         setTodos([...todos, inputValue]);
         setInputValue('');
       }
     };
   
     return (
       <div className="App">
         <h1>Todo Manager</h1>
         <input
           type="text"
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
         />
         <button onClick={handleAddTodo}>Add Todo</button>
         <ul>
           {todos.map((todo, index) => (
             <li key={index}>{todo}</li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;
   

Étape 3 : Implémenter la page et les tests

1. Créer src/pages/TodoPage.js :

   import { page } from '@playwright/test';
   import { render, screen } from '@testing-library/react';
   
   class TodoPage {
     constructor(page) {
       this.page = page;
       this.todoInput = page.locator('input[type="text"]');
       this.addButton = page.locator('button');
       this.todosList = page.locator('ul li');
     }
   
     async addTodo(text) {
       await this.todoInput.fill(text);
       await this.addButton.click();
     }
   
     async getTodos() {
       return (await this.todosList.allTextContents()).map(todo => todo.trim());
     }
   }
   
   export default TodoPage;
   

2. Créer src/tests/todo.test.js :

   import { test, expect } from '@playwright/test';
   import TodoPage from '../pages/TodoPage';
   
   test('adds a new todo', async ({ page }) => {
     const todoPage = new TodoPage(page);
     await todoPage.addTodo('Buy groceries');
   
     const todos = await todoPage.getTodos();
     expect(todos).toContain('Buy groceries');
   });
   

Erreurs frequentes et debugging

1. Sélecteur invalide

Code incorrect :

const todoInput = page.locator('#new-todo2'); // Sélecteur invalide

Code correct :

const todoInput = page.locator('#new-todo'); // Sélecteur valide

2. Échec de l'attente

Code incorrect :

await expect(todoPage.todosList).toHaveText('Buy groceries');

Code correct :

await expect(todoPage.todosList).toHaveText('Buy groceries', { timeout: 5000 });

3. Erreur de state asynchrone

Code incorrect :

const todos = await todoPage.getTodos();
expect(todos).toContain('Buy groceries');

Code correct :

await expect(todoPage.todosList).toHaveText('Buy groceries', { timeout: 5000 });

Pour aller plus loin

1. Tests de composants React avec Jest et Testing Library : Explorez les avantages des tests unitaires pour React.

   • React Testing Library

2. Gestion de l'authentification avec Playwright : Automatisez la connexion et les tests nécessitant une authentification.

   • Playwright Auth

3. Tests end-to-end avec Selenium vs Playwright : Comparez les avantages et inconvénients des deux approches de test end-to-end.

Défi pratique

Créez un gestionnaire de notes simple qui permet d'ajouter, modifier et supprimer des notes. Implémentez des tests pour chaque fonctionnalité en utilisant Playwright et React Testing Library.

Cet article a couvert les bases de la manière de tester React avec Playwright, y compris l'utilisation du POM, des locateurs, et des concepts asynchrones. En suivant ces étapes, vous serez en mesure de mettre en place un système robuste pour tester vos applications React.