browsing-with-playwright
bilalmk/todo_correct
Automatisation du navigateur à l'aide de Playwright MCP. Naviguez sur des sites web, remplissez des formulaires, cliquez sur des éléments, réalisez des captures d'écran et extrayez des données. À utiliser lorsque les tâches nécessitent la navigation sur le web, l'envoi de formulaires, le web scraping, les tests d'interface utilisateur ou toute autre interaction avec le navigateur. À NE PAS utiliser pour la simple récupération de contenu statique (utilisez plutôt curl/wget).
...Développer toutÀ propos browsing-with-playwright
La compétence « browsing-with-playwright » permet l'automatisation des navigateurs via le serveur Playwright MCP, ce qui vous permet de contrôler par programmation des navigateurs Web pour des tâches nécessitant une interaction réelle avec le navigateur. Cette compétence résout le problème lié à la nécessité d’interagir avec du contenu Web dynamique, de remplir des formulaires, de cliquer sur des boutons, d’extraire des données de sites faisant un usage intensif de JavaScript et d’effectuer des tests d’interface utilisateur — autant de scénarios dans lesquels de simples requêtes HTTP s’avèrent insuffisantes, car elles ne peuvent ni exécuter de code JavaScript ni interagir avec le DOM.
Cette fonctionnalité offre des capacités complètes de contrôle du navigateur, notamment la navigation, l’interaction avec les éléments (clics, saisie de texte, remplissage de formulaires, sélection dans des menus déroulants), l’inspection de l’état de la page via des instantanés d’accessibilité et des captures d’écran, l’attente de contenu dynamique et l’exécution de JavaScript. Elle conserve l’état du navigateur au fil de plusieurs opérations grâce à un contexte de navigateur partagé, ce qui la rend adaptée aux workflows en plusieurs étapes, tels que la connexion à des comptes, la navigation dans des formulaires de plusieurs pages ou l’extraction de données à partir de sites nécessitant une interaction. Le serveur MCP peut être contrôlé via des appels en ligne de commande pour interagir avec des éléments spécifiques identifiés grâce à des instantanés d’accessibilité.
Cette compétence est idéale pour les développeurs et les ingénieurs en automatisation qui ont besoin d’automatiser des interactions Web, les professionnels de l’assurance qualité effectuant des tests d’interface utilisateur, les ingénieurs de données extrayant des données de sites Web dynamiques, ainsi que toute personne travaillant avec des applications Web nécessitant un rendu et une interaction réels au niveau du navigateur. Utilisez-la lorsque les tâches impliquent l’envoi de formulaires, la navigation dans des interfaces, l’attente du chargement de contenu dynamique, ou tout scénario nécessitant le moteur JavaScript et les capacités de rendu du navigateur. Pour la récupération simple de contenu statique, les outils traditionnels tels que curl ou wget restent plus efficaces.
FAQ
Quand dois-je utiliser cette compétence plutôt que de simples requêtes HTTP ?
Utilisez cette compétence lorsque vous devez interagir avec du contenu Web dynamique nécessitant l’exécution de JavaScript, remplir des formulaires, cliquer sur des boutons, attendre le chargement du contenu ou effectuer toute interaction basée sur un navigateur. Utilisez curl ou wget pour récupérer du contenu statique ne nécessitant aucune interaction avec le navigateur.
Pourquoi le drapeau --shared-browser-context est-il important ?
L'option --shared-browser-context conserve l'état du navigateur (cookies, localStorage, données de session) d'un appel mcp-client.py à l'autre. Sans elle, chaque appel démarre avec un nouveau contexte de navigateur, ce qui entraîne la perte des sessions de connexion et d'autres données d'état entre les opérations.
Comment interagir avec des éléments spécifiques d’une page ?
Commencez par utiliser browser_snapshot pour obtenir l’arborescence d’accessibilité de la page, qui renvoie des références d’éléments (telles que « e42 », « e15 »). Utilisez ensuite ces références dans des commandes d’interaction telles que browser_click, browser_type ou browser_fill_form pour cibler des éléments spécifiques.
Quand dois-je utiliser browser_run_code plutôt que des commandes individuelles ?
Utilisez `browser_run_code` pour les workflows complexes en plusieurs étapes qui doivent s’exécuter de manière atomique (tout ou rien). Cette méthode est plus efficace que plusieurs appels séparés et garantit que l’ensemble de l’opération réussit ou échoue d’un seul bloc.
Quand dois-je arrêter le serveur Playwright ?
Arrêtez le serveur une fois votre tâche d'automatisation du navigateur terminée afin de libérer des ressources. Laissez-le en cours d'exécution si vous effectuez plusieurs tâches de navigateur à la suite. Si le navigateur ne répond plus, arrêtez puis redémarrez le serveur.
Tous les fichiers
6fichiers scripts/mcp-client.py 16,9Ko Afficher SKILL.md 4,9Ko Afficher scripts/stop-server.sh 0,9Ko Afficher references/playwright-tools.md20,7KoAfficher scripts/verify.py0,5KoAfficher scripts/start-server.sh0,7 KoAfficherAutomate browser interactions via Playwright MCP server.
Server Lifecycle
Start Server
# Using helper script (recommended)bash scripts/start-server.sh# Or manuallynpx @playwright/mcp@latest --port 8808 --shared-browser-context &
Stop Server
# Using helper script (closes browser first)bash scripts/stop-server.sh# Or manuallypython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_close -p '{}'pkill -f "@playwright/mcp"
When to Stop
- End of task: Stop when browser work is complete
- Long sessions: Keep running if doing multiple browser tasks
- Errors: Stop and restart if browser becomes unresponsive
Important: The --shared-browser-context flag is required to maintain browser state across multiple mcp-client.py calls. Without it, each call gets a fresh browser context.
Quick Reference
Navigation
# Go to URLpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate \ -p '{"url": "https://example.com"}'# Go backpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate_back -p '{}'
Get Page State
# Accessibility snapshot (returns element refs for clicking/typing)python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_snapshot -p '{}'# Screenshotpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_take_screenshot \ -p '{"type": "png", "fullPage": true}'
Interact with Elements
Use ref from snapshot output to target elements:
# Click elementpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_click \ -p '{"element": "Submit button", "ref": "e42"}'# Type textpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_type \ -p '{"element": "Search input", "ref": "e15", "text": "hello world", "submit": true}'# Fill form (multiple fields)python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_fill_form \ -p '{"fields": [{"ref": "e10", "value": "[email protected]"}, {"ref": "e12", "value": "password123"}]}'# Select dropdownpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_select_option \ -p '{"element": "Country dropdown", "ref": "e20", "values": ["US"]}'
Wait for Conditions
# Wait for text to appearpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \ -p '{"text": "Success"}'# Wait for time (ms)python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \ -p '{"time": 2000}'
Execute JavaScript
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_evaluate \ -p '{"function": "return document.title"}'Multi-Step Playwright Code
For complex workflows, use browser_run_code to run multiple actions in one call:
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_run_code \ -p '{"code": "async (page) => { await page.goto(\"https://example.com\"); await page.click(\"text=Learn more\"); return await page.title(); }"}'Tip: Use browser_run_code for complex multi-step operations that should be atomic (all-or-nothing).
Workflow: Form Submission
- Navigate to page
- Get snapshot to find element refs
- Fill form fields using refs
- Click submit
- Wait for confirmation
- Screenshot result
Workflow: Data Extraction
- Navigate to page
- Get snapshot (contains text content)
- Use browser_evaluate for complex extraction
- Process results
Verification
Run: python3 scripts/verify.py
Expected: ✓ Playwright MCP server running
If Verification Fails
- Run diagnostic:
pgrep -f "@playwright/mcp" - Check: Server process running on port 8808
- Try:
bash scripts/start-server.sh - Stop and report if still failing - do not proceed with downstream steps
Tool Reference
See references/playwright-tools.md for complete tool documentation.
Troubleshooting
| Issue | Solution |
|---|---|
| Element not found | Run browser_snapshot first to get current refs |
| Click fails | Try browser_hover first, then click |
| Form not submitting | Use "submit": true with browser_type |
| Page not loading | Increase wait time or use browser_wait_for |
| Server not responding | Stop and restart: bash scripts/stop-server.sh && bash scripts/start-server.sh |
Installer browsing-with-playwright
Téléchargez et décompressez les fichiers de compétences dans votre répertoire .claude/skills/.
Télécharger le ZIPClonez le dépôt et copiez les fichiers de compétence dans votre projet.
git clone https://github.com/bilalmk/todo_correct/blob/main/.claude/skills/mjs/browsing-with-playwright/SKILL.md # Copy SKILL.md to your .claude/skills/ directory
Copier





Maison
