Automatisez les tests de votre site web avec Playwright
Un robot qui remplit vos formulaires, parcourt votre site et vérifie que tout fonctionne, à chaque mise en production. Chez un client, la recette est passée de 2 heures à 3 minutes.
Pourquoi automatiser les tests de votre site ?
Chaque modification du site impose de retester les parcours à la main. Fastidieux, donc souvent bâclé, donc des régressions découvertes par vos clients.
E-commerce
Parcours d'achat complet, calcul du panier, codes promo, e-mails de confirmation.
Formulaires
Questionnaires multi-étapes, calculs automatiques, e-mails envoyés, enregistrement en base.
Espaces membres
Connexion, permissions, affichage des données personnelles, actions d'administration.
Installation en 3 commandes
Prérequis : Node.js installé (gratuit, 5 minutes).
mkdir mes-tests
cd mes-tests
npm init playwright@latestEnregistrez votre premier test en naviguant normalement, le code est écrit pour vous :
npx playwright codegen https://monsite.frLancez les tests, un rapport HTML s'ouvre :
npx playwright test
npx playwright show-reportCode généré pour un questionnaire
await page.goto('https://monsite.fr/questionnaire');
await page.getByRole('combobox').first().click();
await page.getByRole('option', { name: 'Réponse A' }).click();
await page.getByRole('button', { name: 'Envoyer' }).click();
await expect(page.getByText('Merci')).toBeVisible();Playwright vs Selenium vs Cypress
| Critère | Playwright | Selenium | Cypress |
|---|---|---|---|
| Installation | 1 commande, navigateurs inclus | Plus lourde (drivers) | 1 commande |
| Navigateurs | Chromium, Firefox, WebKit (Safari) | Tous | Chromium, Firefox, WebKit expérimental |
| Attente des éléments | Automatique | À écrire | Automatique |
| Tests en parallèle | Natif, gratuit | Avec configuration | Via le service cloud payant |
| Plusieurs onglets | Oui | Possible, plus complexe | Non |
| Enregistreur | Codegen intégré | Selenium IDE (extension) | Studio |
| Langages | JS/TS, Python, Java, C# | Nombreux | JS/TS |
Recetter un questionnaire de 24 questions
Un diagnostic organisationnel en ligne : 24 questions, 3 profils utilisateurs, calculs, e-mails automatiques et un bilan généré côté administrateur. Avant : 2 heures de tests manuels à chaque livraison.
- 3 scénarios automatisés : remplissage par un utilisateur, arrêt de campagne par l'admin, consultation du bilan avec captures.
- 2 h → 3 min de recette, rejouée avant chaque rendez-vous client.
- Un rapport PDF de 15 pages qui sert de preuve de recette.
- Amorti dès la 3e livraison, et la cheffe de projet relance les tests elle-même.
7 astuces pour des tests qui durent
1. Des sélecteurs qui résistent
Évitez les chemins CSS fragiles, préférez les rôles et textes visibles, ou un attribut dédié.
await page.getByRole('button', { name: 'Envoyer' }).click();
await page.getByTestId('submit-form').click();2. Attendre le bon élément
Plutôt qu'un délai fixe, attendez un élément de la page suivante.
await page.getByRole('button', { name: 'Suivant' }).click();
await expect(page.getByRole('heading', { name: 'Question 2' })).toBeVisible();3. Des délais adaptés
Pour les parcours longs, augmentez le délai du test plutôt que d'empiler des pauses.
test.setTimeout(120000);4. Preuves en cas d'échec
Capture et vidéo seulement quand un test échoue, dans playwright.config.
use: {
screenshot: 'only-on-failure',
video: 'retain-on-failure',
}5. Tests en parallèle
Réglez le nombre de workers. Vos tests doivent être indépendants les uns des autres.
workers: 4,6. Données centralisées
URL et comptes de test dans un seul fichier de configuration : un changement, tous les tests à jour. Ne versionnez jamais de vrais mots de passe.
7. Déboguer pas à pas
L'inspecteur montre exactement où ça bloque.
npx playwright test --debug
npx playwright test --uiLes erreurs Playwright les plus fréquentes
| Message | Cause | Solution |
|---|---|---|
| Timeout 30000ms exceeded | L'élément n'apparaît pas, ou le sélecteur est faux. | Vérifier le sélecteur avec codegen, augmenter le délai du test. |
| Strict mode violation | Le sélecteur trouve plusieurs éléments. | Cibler un conteneur (page.locator('dialog').getByText(…)) ou utiliser .first(). |
| Element is not visible | L'élément existe mais est masqué (menu fermé, onglet caché). | Ouvrir le menu d'abord, puis attendre qu'il soit visible. |
| Navigation timeout | La page est trop lente à charger. | waitUntil: 'domcontentloaded' et un délai plus long. |
| Clic intercepté | Bannière cookies ou fenêtre au-dessus de l'élément. | Fermer la bannière au début du test. |
| Tests trop lents | Pauses fixes, pas de parallélisme, vidéos systématiques. | Attentes ciblées, plusieurs workers, vidéos seulement en échec. |
Besoin d'aide pour automatiser vos recettes ?
Installation, premiers scénarios, intégration continue et formation de votre équipe.
Playwright en questions
Faut-il savoir coder pour utiliser Playwright ?
Non pour démarrer : Playwright génère le code pendant que vous naviguez (codegen). Quelques notions de JavaScript aident ensuite à rendre les tests plus robustes.
Sur quels sites fonctionne Playwright ?
Tous : WordPress, sites sur mesure, applications web, formulaires, e-commerce, espaces membres.
Playwright est-il gratuit ?
Oui, Playwright est un projet open source gratuit, maintenu par Microsoft.
Combien de temps pour mettre en place des tests automatiques ?
Environ 2 heures pour installer et créer les 5 premiers tests, puis 10 à 15 minutes par nouveau test enregistré. Comptez une demi-journée pour une base solide avec intégration continue.
Playwright ou Selenium ?
Playwright pour un projet récent : installation en une commande, attente automatique des éléments, enregistreur intégré. Selenium reste pertinent pour des tests existants ou des équipes Java et C# déjà outillées.
Les tests peuvent-ils envoyer de vrais e-mails ?
Oui, mais utilisez des adresses de test, ou interceptez les envois avec un outil comme Mailtrap.