Intégrer browser automation avec Claude Code et Playwright ?

J’intègre browser automation avec Claude Code et Playwright pour automatiser le scraping et le remplissage de formulaires en écrivant et en exécutant des scripts via langage naturel. Cet article explique pourquoi, quels outils sont disponibles, pourquoi choisir Playwright et comment démarrer pas à pas.

Pourquoi automatiser les navigateurs dans Claude Code ?

Parce que l’automatisation navigateur supprime les tâches répétitives, réduit les erreurs humaines et accélère les extractions et saisies multi-pages.

Les cas d’usage concrets sont nombreux et pragmatiques. Voici les plus fréquents :

• Web scraping de tableaux : Extraction structurée de tableaux (prix, inventaires, publications) pour alimenter des bases de données ou dashboards.
• Extraction de listes : Récupération de listes paginées (annonces, profils, résultats) avec gestion automatique de la pagination.
• Remplissage de formulaires multi-étapes : Inscription, commandes ou onboarding qui demandent des saisies et validations successives.
• Navigation conditionnelle : Parcours qui dépend du contenu de la page (clics conditionnels, suivi de liens spécifiques).
• Tests rapides : Vérifications fonctionnelles ou de régression sur des flux utilisateur, exécutables en continu.

Les gains mesurables portent sur le temps et la qualité des données. Voici des exemples représentatifs :

Claude Code change la donne parce qu’il combine langage naturel et exécution. L’interaction en langage naturel (NLP pour traitement du langage naturel) permet de décrire la tâche sans écrire tout le code. L’accès intégré au terminal autorise l’exécution et l’itération immédiate des scripts Playwright (outil d’automatisation de navigateurs) sans basculer d’outil. La boucle de feedback — tester, corriger, redéployer — devient accessible à des product owners ou analystes sans être ingénieur en tests.

Découvrez également13 cours gratuits pour maîtriser Claude de Anthropic

Pour décider quoi automatiser en priorité, privilégier les tâches selon trois critères simples :

• Fréquence : Automatiser d’abord les tâches répétées quotidiennement ou hebdomadairement.
• Complexité manuelle : Choisir les processus sujets aux erreurs ou qui demandent de longues saisies multi-étapes.
• Valeur business : Prioriser ce qui libère du temps aux équipes ou améliore la qualité des données critiques.

• Identifier 3 tâches répétitives à fort volume sur 1 mois.
• Estimer le gain horaire et le ROI simple (heures économisées × coût horaire).
• Prototyper un script Playwright via Claude Code et mesurer les erreurs avant/après.
• Itérer rapidement en production et surveiller les exceptions.

Que fait concrètement Claude Code pour l’automatisation ?

Claude Code écrit et exécute des scripts, lit les sorties, corrige et itère automatiquement — il ne se contente pas de générer du code.

Capacités techniques : Claude Code exécute des commandes Bash et des scripts Node.js, lit et écrit des fichiers sur le système de fichiers, lance des commandes shell, récupère des ressources via WebFetch (un appel HTTP pour récupérer une URL) et orchestre des sous-agents pour exécuter des tâches en parallèle.

Explication détaillée :

• Exécution locale et à distance : Claude Code peut lancer une commande CLI (Command Line Interface) comme npm ou curl, récupérer la sortie standard (stdout) et l’analyse pour décider de la suite.
• Lecture/Écriture de fichiers : Claude Code crée et modifie des fichiers source, des configs et des artefacts de test, puis relit ces fichiers pour valider les changements.
• WebFetch : WebFetch signifie effectuer une requête HTTP(S) pour récupérer une page, une API ou un binaire, utile pour télécharger dépendances ou vérifier des endpoints.
• Orchestration par sous-agents : Claude Code peut lancer plusieurs agents légers pour exécuter des tâches parallèles (ex. lancer plusieurs navigateurs Playwright simultanément) et collecter les résultats.

Boucle de feedback :

• Lancement et lecture : Claude Code exécute le script, capture la sortie et les logs.
• Diagnostic automatique : Claude Code identifie les erreurs (stacktrace, code de sortie) et propose un correctif en éditant le code ou la commande.
• Itération : Claude Code relance le script après correction, et répète jusqu’à atteindre le résultat attendu ou jusqu’à seuils définis.

Découvrez égalementComment optimiser Claude Code ?

Cas d’usage concret :

• Création de projet Playwright : génération de package.json, installation des dépendances et écriture d’un test de navigation.
• Installation et run : Claude Code lance npm install, exécute playwright test et récupère les erreurs pour ajuster les sélecteurs ou le timeout.
• Adaptation après erreur : en cas d’erreur réseau ou d’élément manquant, Claude Code modifie le script (attente explicite, retry) puis relance automatiquement.

Limites et vigilance :

• Authentifications complexes : Les flows multi-facteurs (MFA) ou SSO avancés nécessitent souvent une intervention humaine ou des tokens sécurisés.
• Captchas et anti-bot : La résolution de captchas implique des services externes ou une validation manuelle pour rester conforme aux règles.
• Conformité et sécurité : Les aspects légaux, confidentialité et politiques d’accès doivent être validés par votre équipe sécurité avant automatisation complète.

// Exemple Playwright minimal
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'ex.png' });
  await browser.close();
})();

npm install playwright

claude –run my-script.js

Quels outils Claude Code peut utiliser pour scraper et remplir des formulaires ?

Il peut utiliser Bash/Node, WebFetch, lecture/écriture de fichiers et des sous-agents ; pour le contrôle du navigateur, Playwright est la solution complète.

Découvrez égalementComment Claude Skills automatise vos workflows ?

1) Détail des outils et leurs rôles : Bash/Node sert à exécuter des commandes et orchestrer des tâches (lancer des scripts, démarrer Playwright, manipuler des fichiers). WebFetch permet de récupérer rapidement du HTML statique via HTTP (similaire à curl). Playwright contrôle un vrai navigateur (Chromium/Firefox/WebKit) pour exécuter JavaScript, interagir avec le DOM et gérer les sessions. La lecture/écriture de fichiers conserve les résultats, cookies ou captures d’écran. Les sous-agents sont des processus secondaires qui isolent des tâches (par exemple un agent Playwright pour chaque utilisateur simulé).

2) Comparaison technique : WebFetch récupère le HTML initial, mais n’exécute pas le JavaScript client-side ni ne gère automatiquement le stockage local ou les cookies persistants. Playwright, lui, exécute le JavaScript, répète les évènements utilisateur (clics, frappes), gère les cookies et le localStorage, et peut attendre des mutations DOM dynamiques. La grande majorité des sites modernes reposent sur JavaScript côté client (W3Techs, 2024), d’où le besoin fréquent de Playwright pour les SPA — SPA signifie Single-Page Application, application web où le contenu se met à jour dynamiquement sans recharger la page.

3) Exemples d’utilisation combinée : Utiliser WebFetch pour indexer rapidement des pages statiques et basculer sur Playwright pour les routes SPA, les formulaires protégés par JS ou les étapes d’authentification. Exemple minimal : tenter un curl, si le HTML n’inclut pas le formulaire attendu, relancer un script Node + Playwright pour remplir et soumettre le formulaire.

# Tentative rapide
curl -s "https://exemple.com/page" -o page.html
# Si page.html n'a pas le formulaire, lancer Playwright (Node)
node run-playwright.js

4) Rappels sur les bonnes pratiques : Limiter la fréquence des requêtes (rate limiting), respecter robots.txt (standard d’origine : https://www.robotstxt.org/), respecter les conditions d’utilisation, identifier clairement l’User-Agent et implémenter des backoffs exponentiels en cas d’erreur.

Pourquoi préférer Playwright à d’autres bibliothèques ?

Playwright propose multi-navigateurs, auto-wait et contrôle complet des pages JavaScript, ce qui le rend adapté aux tâches robustes d’automatisation.

Playwright offre plusieurs avantages clés qui justifient son choix pour des automatisations fiables et modernes. Support natif de Chromium, Firefox et WebKit pour exécuter les mêmes scripts sur Chrome/Edge, Firefox et Safari. Mode headless (sans interface graphique) et headed (avec UI) pour le développement local et l’intégration continue. API asynchrone basée sur Promises/async‑await qui simplifie les flows non bloquants. Mécanisme d’auto‑wait qui attend automatiquement que les éléments soient prêts (rendu, animation, réseaux) et qui réduit significativement le flakiness, c’est‑à‑dire les tests qui échouent de façon intermittente. Gestion de contextes isolés pour simuler plusieurs sessions/navigateurs, contrôle des cookies et du stockage local pour des scénarios multi‑utilisateurs.

En comparaison synthétique, Selenium est plus ancien (historique et large écosystème) mais s’appuie sur WebDriver et peut être plus verbeux et fragile face aux pages JavaScript modernes. Puppeteer, créé par Google, reste très bon pour Chromium mais ne couvre pas WebKit et Firefox aussi directement que Playwright. Playwright se positionne comme plus moderne en ergonomie API et en couverture multi‑navigateurs tout en gardant une surface d’API proche de Puppeteer, ce qui facilite la montée en compétence.

Cas concrets où Playwright apporte un bénéfice clair : pages lourdes en JavaScript et rendu dynamique (frameworks SPA), scénarios end‑to‑end exigeants (authentification, flux de paiement), et automatisations multi‑onglets ou formulaires dynamiques avec iframes. Dans ces cas, l’auto‑wait et les contextes isolés simplifient le code et améliorent la fiabilité.

Sur le plan opérationnel, Playwright améliore la stabilité des suites (moins de retry), accélère le développement grâce à une API cohérente et réduit le temps passé à synchroniser les tests. Précautions à prendre : utiliser une version récente de Node (généralement Node 16+ recommandé), installer les dépendances système pour CI (libnss3, libatk1.0‑0, libx11‑xcb1, libgtk‑3‑0, etc.) et verrouiller les versions des browsers distribués par Playwright pour éviter les régressions.

// Exemple d'usage minimal (Node.js, async/await)
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch(); // headless par défaut
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://exemple.com'); // Playwright attend automatiquement le rendu utile
  await page.click('text=Connexion'); // Auto-wait avant le click
  await browser.close();
})();

• Couverture multi‑navigateurs garantie par une API unique et moderne.
• Réduction du flakiness grâce à l’auto‑wait et aux contextes isolés.
• Meilleure productivité développeur et intégration CI plus fiable.

Comment démarrer concrètement avec Playwright et Claude Code ?

Commencez par installer Node.js 18+, claude-code et Playwright, créer un dossier projet et lancer claude pour décrire votre besoin.

1) Prérequis explicites : Node.js 18+, global install de Claude Code (npm install -g @anthropic-ai/claude-code), espace disque pour binaires (~300MB pour Chromium, ~900MB pour les 3 navigateurs).

2) Commandes concrètes à exécuter et expliquer : mkdir browser-automation && cd browser-automation && claude, npm init -y, npm i -D playwright, npx playwright install, et pour Linux/CI mentionner npx playwright install-deps ou l’option image Docker officielle Playwright.

3) Exemple de flux d’interaction avec Claude Code : décrire en langage naturel le besoin (ex. extraire un tableau et remplir un formulaire), demander la création d’un fichier package.json, d’un script Playwright simple qui ouvre une page, remplit un formulaire et prend une capture d’écran, puis exécuter et itérer. Inclure le contenu exact attendu pour : package.json minimal, un petit script Playwright (JS) et les commandes d’exécution présentées comme paragraphes distincts (<p>).

4) Dépannage courant et conseils CI : dépendances système, gestion des tailles de binaires, test en mode headed avant de passer en headless.

Je lance Claude Code pour formuler le besoin en langage naturel (extraction de tableau + remplissage). Claude peut générer un fichier package.json et un script Playwright de démarrage, que l’on révise puis exécute.

{
  "name": "browser-automation",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node script.js"
  }
}

// script.js
import { chromium } from 'playwright';
(async () => {
  const browser = await chromium.launch(); // utiliser { headless: false } pour debug
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.fill('input[name="q"]', 'Playwright test'); // adapter le sélecteur
  await page.click('button[type="submit"]');
  await page.screenshot({ path: 'result.png', fullPage: true });
  await browser.close();
})();

mkdir browser-automation && cd browser-automation

npm init -y

npm i -D playwright

npx playwright install

claude (puis coller la description pour demander le code)

npm run start

Pour le dépannage, vérifier les dépendances système sur Linux avec npx playwright install-deps, tester en mode headed ({ headless: false }) pour voir l’UI, et mesurer l’impact disque en CI (utiliser l’image Docker officielle Playwright pour réduire la configuration). CI signifie « intégration continue » : automatisation des builds/tests sur un runner.

Prêt à automatiser vos tâches navigateur avec Claude Code et Playwright ?

J’ai présenté pourquoi intégrer browser automation dans un flux Claude Code, ce que Claude Code apporte (écriture/exécution/itération), les outils accessibles (WebFetch vs Playwright) et pourquoi Playwright est souvent le meilleur choix pour les pages JS et formulaires dynamiques. Je donne aussi les étapes pratiques pour démarrer (Node.js 18+, claude, npm, npx playwright install). En appliquant ces étapes, vous réduisez les délais et les erreurs, et vous libérez du temps pour les tâches à plus forte valeur ajoutée.

FAQ

• Quelle différence entre WebFetch et Playwright ?
  WebFetch récupère HTML statique sans exécuter JavaScript ni gérer les cookies ; Playwright contrôle un vrai navigateur, exécute JS, gère cookies, storage et interactions dynamiques.
• Quel est le prérequis Node.js pour utiliser Playwright avec Claude Code ?
  Node.js 18 ou plus est recommandé. Claude Code s’installe globalement via npm et Playwright s’ajoute au projet (npm i -D playwright).
• Combien d’espace disque pour les navigateurs Playwright ?
  Comptez environ 300 MB pour Chromium seul et ~900 MB si vous installez les trois moteurs (Chromium, Firefox, WebKit).
• Faut-il être ingénieur en tests pour utiliser Claude Code ?
  Non : Claude Code permet de décrire les tâches en langage naturel, d’installer et d’exécuter des scripts via le terminal, puis d’itérer sur les erreurs sans être ingénieur en tests.
• Comment gérer l’installation en CI ou sur Linux headless ?
  Sur Linux/CI, utilisez npx playwright install-deps pour les dépendances système ou les images Docker officielles Playwright pour un environnement stable et reproductible.

A propos de l’auteur

Franck Scandolera — expert & formateur en Tracking avancé server-side, Analytics Engineering, Automatisation No/Low Code (n8n), intégration de l’IA en entreprise et SEO/GEO. Responsable de l’agence webAnalyste et de l’organisme de formation Formations Analytics. Références : Logis Hôtel, Yelloh Village, BazarChic, Fédération Française de Football, Texdecor. Dispo pour aider les entreprises => contactez moi.

Franck Scandolera

⭐ Analytics engineer, Data Analyst et Automatisation IA indépendant ⭐

• Ref clients : Logis Hôtel, Yelloh Village, BazarChic, Fédération Football Français, Texdecor…

Mon terrain de jeu :

• Data Analyst & Analytics engineering : tracking avancé (GA4, Matomo, Piano, GTM server, Tealium, Commander Act, e-commerce, CAPI, RGPD), entrepôt de données (BigQuery, Snowflake, PostgreSQL, ClickHouse), modèles (Airflow, dbt, Dataform), dashboards décisionnels (Looker, Power BI, Metabase, SQL, Python).
• Automatisation IA des taches Data, Marketing, RH, compta etc : conception de workflows intelligents robustes (n8n, App Script, scraping) connectés aux API de vos outils et LLM (OpenAI, Mistral, Claude…).
• Engineering IA pour créer des applications et agent IA sur mesure : intégration de LLM (OpenAI, Mistral…), RAG, assistants métier, génération de documents complexes, APIs, backends Node.js/Python.