Tester Next.js avec Playwright
Pourquoi Tester Next.js avec Playwright ?
Dans un monde où l'automatisation des tests est essentielle pour garantir la qualité de nos applications, il est crucial d'avoir des outils robustes et fiables. Next.js étant une plateforme web React populaire qui permet de créer des applications SSR (Server Side Rendering) et SSG (Static Site Generation), avoir un moyen efficace de tester ces composants est primordial.
Un cas d'usage concret serait de s'assurer que l'affichage correct des données sur une page est réalisé, tout en vérifiant que les fonctionnalités interagissent comme prévu. Playwright, un outil de test moderne pour le web, offre une solution complète et puissante pour tester des applications Next.js.
Prerequis
Connaissances nécessaires :
- JavaScript/TypeScript
- React
- Concepts de tests unitaires et d'intégration
- Familiarité avec les tests asynchrones (async/await)
Outils à installer :
- Node.js (v14.0 ou plus)
- npm (Node Package Manager)
- Playwright
Pour installer Playwright, exécutez la commande suivante dans votre terminal :
npm install playwright
Concepts fondamentaux
1. Lancement d'un navigateur avec Playwright
Playwright permet de contrôler des navigateurs réels (Chromium, Firefox, WebKit) à partir du code JavaScript/TypeScript.
Code :
// Importer Playwright
const { chromium } = require('playwright');
(async () => {
// Lancer le navigateur Chromium
const browser = await chromium.launch();
// Ouvrir une nouvelle page
const page = await browser.newPage();
// Naviguer vers une URL
await page.goto('https://nextjs.org');
// Faire des assertions sur la page
expect(await page.title()).toBe('Next.js | The React Framework for the Web');
// Fermer le navigateur
await browser.close();
})();
2. Sélecteurs CSS pour interagir avec les éléments
Pour automatiser les interactions, il est nécessaire de sélectionner les éléments sur la page.
Code :
// Interagir avec un bouton par son ID
await page.click('#submit-button');
// Entrer du texte dans un champ input
await page.fill('input[name="username"]', 'myUsername');
3. Assertions pour vérifier le comportement
Les assertions sont essentielles pour confirmer que les actions sur la page ont été effectuées comme prévu.
Code :
// Vérifier si un élément est visible
expect(await page.isVisible('#error-message')).toBe(false);
// Vérifier le contenu d'une balise
expect(await page.textContent('div#user-name')).toBe('John Doe');
Mise en pratique : Projet fil rouge
Mini-projet : Gestionnaire de Tâches
Nous allons créer un simple gestionnaire de tâches qui permet d'ajouter et de supprimer des tâches.
Étape 1 : Initialiser le projet Next.js
npx create-next-app@latest task-manager
cd task-manager
Étape 2 : Créer la page index.js
// pages/index.js
import Head from 'next/head';
import { useState } from 'react';
export default function Home() {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const handleAddTask = () => {
if (newTask.trim()) {
setTasks([...tasks, newTask]);
setNewTask('');
}
};
const handleDeleteTask = (index) => {
setTasks(tasks.filter((_, i) => i !== index));
};
return (
<div>
<Head>
<title>Task Manager</title>
</Head>
<main>
<h1>Task Manager</h1>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Add a new task"
/>
<button onClick={handleAddTask}>Add Task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => handleDeleteTask(index)}>Delete</button>
</li>
))}
</ul>
</main>
</div>
);
}
Étape 3 : Créer les tests avec Playwright
// test/task-manager.spec.js
const { chromium } = require('playwright');
describe('Task Manager', () => {
let browser, page;
beforeAll(async () => {
browser = await chromium.launch();
page = await browser.newPage();
});
afterAll(async () => {
await browser.close();
});
it('adds a new task and deletes it', async () => {
await page.goto('http://localhost:3000');
// Ajouter une nouvelle tâche
await page.fill('input[type="text"]', 'Buy groceries');
await page.click('button');
// Vérifier que la tâche est ajoutée
expect(await page.textContent('li')).toContain('Buy groceries');
// Supprimer la tâche
await page.click('li button');
// Vérifier que la tâche est supprimée
expect(await page.textContent('li')).not.toContain('Buy groceries');
});
});
Étape 4 : Lancer le serveur et les tests
npm run dev
npx playwright test
Erreurs fréquentes et debugging
1. Erreur de sélection d'un élément
Code incorrect :
await page.click('input[name="username"]');
Code correct :
await page.fill('input[name="username"]', 'myUsername');
2. Erreur de vérification des assertions
Code incorrect :
expect(await page.isVisible('#error-message')).toBe(true);
Code correct :
expect(await page.isVisible('#error-message')).toBe(false);
3. Erreur de gestion du navigateur
Code incorrect :
await browser.close();
Code correct :
if (browser) {
await browser.close();
}
Pour aller plus loin
Tests asynchrones avec Jest : Explorer l'utilisation de Jest pour gérer les tests asynchrones dans Next.js.
Intégration avec CI/CD : Intégrer vos tests Playwright à votre pipeline d'intégration continue et de déploiement continu (CI/CD).
Tests de performance : Utiliser Playwright pour mesurer les performances de votre application Next.js.
Défi pratique
Créez une application Next.js qui permet d'afficher des données en temps réel à partir d'une API. Testez cette application avec Playwright pour s'assurer que les données sont correctement affichées et que les interactions utilisateur fonctionnent comme prévu.