Automatisez vos Tests Web avec Playwright

Testez votre site en 2 minutes au lieu de 2 heures. Playwright simule un utilisateur réel qui remplit vos formulaires, navigue dans votre site et vérifie que tout fonctionne

Voir un exemple concret

Guide complet Playwright pour automatiser les tests web et réduire le temps de recettage de 30 minutes à 2 minutes. L’article détaille l’installation, la génération de code automatique, l’intégration CI/CD GitLab/GitHub, la comparaison avec Selenium et Cypress, un cas client réel sur un questionnaire de 24 questions, 7 astuces pour des tests robustes et 10 erreurs courantes. Playwright est gratuit, open-source, et compatible avec WordPress, sites custom, formulaires et e-commerce. Guide par Christophe Guyomar, consultant web et management sur www.guyomar.eu.

Pourquoi automatiser vos tests ?

Chaque modification de votre site nécessite des tests manuels fastidieux. Avec Playwright, un robot teste automatiquement vos parcours utilisateurs à votre place. Résultat : gain de temps, moins d’erreurs, recettage accéléré.

Les avantages concrets

Gain de temps : 30 min de tests manuels → 2 min automatisées
Reproductible : Relancez les tests à chaque mise à jour
Détection de régressions : Sachez instantanément si quelque chose casse
Documentation vivante : Les tests servent de mode d’emploi du site
Rapports visuels : Screenshots + vidéos de chaque test

Comment ça fonctionne ?

1. Enregistrement

Vous effectuez vos actions dans le navigateur, Playwright génère le code automatiquement

2. Personnalisation

Ajoutez des vérifications, des attentes, adaptez le scénario

3. Exécution

Lancez les tests en 1 commande, recevez un rapport détaillé

Tester le parcours d’achat complet
Vérifier le calcul du panier
Valider les codes promo
Contrôler les emails de confirmation des cas.

Tester les questionnaires multi-étapes
Vérifier les calculs automatiques
Valider les emails envoyés
Contrôler l’enregistrement en base

Tester la connexion/déconnexion
Vérifier les permissions
Contrôler l’affichage des données personnelles
Valider les actions admin

Installation rapide

Node.js installé sur votre ordinateur (gratuit, 5 min d’installation)

3 commandes dans le terminal :
mkdir mes-tests
cd mes-tests
npm init playwright@latest

Utilisez npx playwright codegen pour enregistrer vos actions, le code est généré automatiquement

npx playwright test – Les tests s’exécutent, un rapport HTML s’ouvre

Exemple concret

Imaginons un questionnaire de 24 questions. Manuellement : 15 minutes à chaque test. Avec Playwright : 2 minutes automatisées.
Code généré automatiquement :
javascript
await page.goto(‘https://monsite.com/questionnaire’);
await page.getByRole(‘combobox’).first().click();
await page.getByRole(‘option’, { name: ‘Réponse A’ }).click();
// … 24 questions
await page.getByRole(‘button’, { name: ‘Envoyer’ }).click();
Image : Screenshot du rapport Playwright

Ce que vous obtenez

Rapport HTML détaillé avec temps d’exécution
Screenshots automatiques à chaque étape
Vidéos des tests (optionnel)
Capture des erreurs avec contexte complet
Historique pour comparer les performances

Limitations à connaître

– Ne teste que ce que vous enregistrez (pas de test « intelligent »)
– Les sélecteurs peuvent changer si votre site évolue beaucoup
– Nécessite maintenance si refonte graphique majeure

Besoin d’aide pour mettre en place Playwright ?

Je vous accompagne dans :

Installation et configuration
Création de vos premiers scénarios
Formation de votre équipe
Mise en place de l’intégration continue

Demander un devis

Playwright vs Selenium vs Cypress : Quel outil choisir ?

Critère	Playwright	Selenium	Cypress
Vitesse	⚡⚡⚡ Très rapide	⚡ Lent	⚡⚡ Rapide
Installation	1 commande	Complexe (drivers)	1 commande
Navigateurs	Chrome, Firefox, Safari, Edge	Tous navigateurs	Chrome, Firefox, Edge
Auto-attente	✓ Automatique	✗ Manuel	✓ Automatique
Tests parallèles	✓ Natif	✓ Avec config	✓ Payant
Courbe apprentissage	Facile	Difficile	Moyenne
Multi-onglets	✓ Oui	✗ Complexe	✗ Non
Enregistreur	✓ Codegen	✗ Non	✓ Studio

Pourquoi Playwright l’emporte ?

Playwright est plus récent (2020) et bénéficie de l’expérience de Microsoft avec les outils précédents. Contrairement à Selenium qui nécessite de gérer manuellement les « drivers » pour chaque navigateur, Playwright installe tout automatiquement.
L’auto-attente est un game-changer : avec Selenium, vous devez écrire wait.until(element_visible) partout. Playwright attend automatiquement que les éléments soient prêts avant de cliquer. Résultat : 50% de code en moins et des tests plus stables.
Cypress est excellent pour les développeurs frontend mais limité : impossible de tester plusieurs onglets ou de naviguer entre plusieurs domaines dans un même test. Playwright n’a pas ces limitations.

Cas d’usage par outil :

Playwright : Applications web modernes, tests complexes, CI/CD
Selenium : Tests legacy, besoin de langages spécifiques (Java, C#)
Cypress : Projets JavaScript purs, développeurs frontend

Retour d’expérience : Automatiser le recettage d’un questionnaire

Le problème initial
Besoin : Tester un questionnaire de diagnostic organisationnel avec 24 questions, plusieurs profils utilisateurs, et génération de rapport admin

Avant

Tests manuels = cauchemar :

30 minutes par scénario complet
3 profils utilisateurs différents à tester
Vérifications de calculs complexes
Emails automatiques à contrôler
Total : 2h de tests à chaque livraison

Après

La solution Playwright :

Installation en 1h. Création de 3 scénarios de tests :

Remplissage questionnaire utilisateur
Connexion admin et arrêt de campagne
Consultation du bilan avec captures d’écran complètes

Extrait de code généré pour 24 questions :

Les pièges rencontrés

Le questionnaire charge les questions dynamiquement. Solution : ajouter des waitForTimeout(2000) entre chaque réponse pour laisser la nouvelle question s’afficher.
Les sélecteurs génériques (getByText(‘Tout à fait’)) trouvaient plusieurs éléments. Solution : attendre que le réseau se stabilise avec des timeouts adaptés.

Résultats chiffrés

Tests manuels : 2h → Tests automatisés : 3 minutes
Reproductibles à chaque livraison
Rapport PDF automatique avec screenshots
ROI : investissement amorti dès la 3ème livraison

Ce qui change concrètement

Avant : « On teste manuellement les scénarios principaux, on espère que le reste fonctionne »
Après : « On lance les tests avant chaque RDV client, on arrive avec un rapport de 15 pages »

La chef de projet peut relancer les tests elle-même sans compétences techniques. Le rapport PDF généré sert de preuve de recette pour le client.

7 Astuces pour des tests Playwright robustes

Le problème : Tests qui échouent car les éléments ne chargent pas assez vite.
Mauvaise approche :
javascript
await page.click(‘button’);
Bonne approche :
javascript
await page.click(‘button’, { timeout: 10000 });
await page.waitForLoadState(‘networkidle’);
Pour les applications avec navigation automatique entre questions, augmentez le timeout global :
javascript
test.setTimeout(120000);

À éviter : Sélecteurs CSS fragiles qui cassent au moindre changement
javascript
await page.click(‘div > div:nth-child(3) > button’);
À privilégier : Rôles ARIA et textes visibles
javascript
await page.getByRole(‘button’, { name: ‘Envoyer’ }).click();
await page.getByText(‘Confirmer’).click();
Si vous devez utiliser des sélecteurs CSS, ajoutez des attributs data-testid dans votre HTML :
html
<button data-testid= »submit-form »>Envoyer</button>
javascript
await page.getByTestId(‘submit-form’).click();

Par défaut, Playwright lance 3 tests en parallèle. Pour en lancer plus :
javascript
// playwright.config.js
workers: 5,
Attention : vos tests doivent être indépendants (pas de données partagées).

Ajoutez dans votre config :
javascript
use: {
screenshot: ‘only-on-failure’,
video: ‘retain-on-failure’,
}
Vous aurez automatiquement la vidéo + screenshot du moment exact de l’échec.

Créez config.json :
json
{
« urlsQuestionnaires »: [
    « https://monsite.com/survey/abc123 »,
    « https://monsite.com/survey/def456 »
],
« admin »: {
    « email »: « admin@test.com »,
    « password »: « motdepasse »
}
}
Utilisez-le :
javascript
const config = require(‘./config.json’);
await page.goto(config.urlsQuestionnaires[0]);
Avantage : changez tous vos tests en modifiant un seul fichier.

Navigation automatique entre pages ? Attendez un élément spécifique de la nouvelle page :
javascript
await page.click(‘Suivant’);
await page.waitForSelector(‘h2:has-text(« Question 2 »)’);
Meilleur que waitForTimeout car adaptatif selon la vitesse du serveur.

npx playwright test –debug
L’inspecteur s’ouvre, vous avancez pas à pas et voyez exactement où ça bloque.

Pour ralentir l’exécution
npx playwright test –headed –slowmo 500

7 Erreurs courantes et leurs solutions

Erreur 1 : « Timeout 30000ms exceeded »
Cause : L’élément met trop de temps à apparaître ou n’existe pas.
Solutions :
javascript
await page.getByRole(‘button’, { name: ‘Envoyer’ }, { timeout: 60000 });
test.setTimeout(120000);
Vérifiez aussi que le sélecteur est correct avec un screenshot :
javascript
await page.screenshot({ path: ‘debug.png’ });
Erreur 2 : « Strict mode violation: resolved to 2 elements »
Cause : Votre sélecteur trouve plusieurs éléments identiques.
Solution :
javascript
await page.getByText(‘Confirmer’).first().click();
await page.getByText(‘Confirmer’).nth(1).click();
Ou ciblez plus précisément :
javascript
await page.locator(‘dialog’).getByText(‘Confirmer’).click();
Erreur 3 : « Element is not visible »
Cause : L’élément existe dans le DOM mais n’est pas affiché (popup fermée, onglet caché).
Solution :
javascript
await page.getByRole(‘button’, { name: ‘Menu’ }).click();
await page.waitForSelector(‘.menu’, { state: ‘visible’ });
await page.click(‘.menu-item’);
Erreur 4 : « Navigation timeout exceeded »
Cause : La page met trop longtemps à charger.
Solution :
javascript
await page.goto(‘https://site.com’, {
timeout: 60000,
waitUntil: ‘domcontentloaded’
});
domcontentloaded charge plus vite que load (par défaut).
Erreur 5 : « Cannot read property ‘click’ of null »
Cause : Vous essayez d’interagir avec un élément qui n’existe pas.
Solution : Vérifiez d’abord l’existence :
javascript
const button = await page.locator(‘button’).count();
if (button > 0) {
await page.click(‘button’);
}
Erreur 6 : Impossible de cliquer (élément masqué par un autre)
Cause : Un overlay, popup ou bannière cookie masque l’élément.
Solution :
javascript
await page.click(‘.accept-cookies’);
await page.waitForTimeout(500);
await page.click(‘button’);
Ou forcez le clic :
javascript
await page.click(‘button’, { force: true });
Erreur 7 : Tests trop lents (10+ minutes)
Causes et solutions :
Trop de waitForTimeout : Remplacez par waitForSelector
Pas de parallélisation : Activez workers: 4 dans la config
Vidéos activées : Désactivez si non nécessaire :
javascript
use: {
video: ‘off’,
}
Erreur 7 : Tests trop lents (10+ minutes)
Causes et solutions :
Trop de waitForTimeout : Remplacez par waitForSelector
Pas de parallélisation : Activez workers: 4 dans la config
Vidéos activées : Désactivez si non nécessaire :
javascript
use: {
video: ‘off’,
}

Checklist pour démarrer :

Installer Node.js + Playwright (30 min)
Enregistrer votre premier test avec codegen (15 min)
Ajouter des assertions de vérification (15 min)
Configurer les screenshots automatiques (5 min)
Intégrer dans GitLab/GitHub CI (1h)
Former l’équipe au lancement des tests (30 min)

Total : ~3h pour une base solide.

Questions Fréquentes sur Playwright

Une question, un projet ? Parlons-en. Vous pouvez me contacter via le formulaire ci-dessous, ou demander à être rappelé selon vos disponibilités.

Discutons de votre projet

Faut-il savoir coder ?

Non. Playwright génère le code automatiquement quand vous effectuez vos actions. Vous pouvez ensuite ajuster sans connaissances avancées.

Ça fonctionne sur quel type de site ?

Tous : WordPress, sites custom, applications web, formulaires, e-commerce, espaces membres.

C’est gratuit ?

Oui, Playwright est 100% gratuit et open-source.

Combien de temps pour mettre en place ?

2h pour installer et créer vos 5 premiers tests. Ensuite, chaque nouveau test prend 10-15 min à enregistrer.

Les tests peuvent-ils envoyer de vrais emails ?

Oui, mais utilisez des emails de test. Vous pouvez aussi intercepter les emails avec des outils comme Mailtrap

Prêt à automatiser vos recettages ?

Contactez-Nous Pour Un Audit Gratuit

Le facilitateur de votre transformation digitale.

christopheguyomar@guyomar.eu

Navigate

Zones d’intervention

Basé à Nantes, j’accompagne mes clients partout en France et à l’étranger.
Je travaille principalement avec des entreprises situées à :

Nantes & sa région (Saint-Herblain, Rezé, Carquefou, Orvault, Vertou…)
Paris & Île-de-France
Lyon, Bordeaux, Toulouse
Clients à l’étranger (Suisse, Belgique, Canada, etc.)

Organiser un appel