browsing-with-playwright
bilalmk/todo_correct
Automação de navegador usando o Playwright MCP. Navegue por sites, preencha formulários, clique em elementos, faça capturas de tela e extraia dados. Use quando as tarefas exigirem navegação na web, envio de formulários, extracção de dados da web, testes de interface do usuário ou qualquer interação com o navegador. NÃO use quando se tratar apenas de buscar conteúdo estático (use curl/wget em vez disso).
...Expandir tudoSobre browsing-with-playwright
A habilidade “ browsing-with-playwright ” permite a automação de navegadores por meio do servidor Playwright MCP, possibilitando o controle programático de navegadores da web para tarefas que exigem interação real com o navegador. Essa skill resolve o problema de precisar interagir com conteúdo dinâmico da web, preencher formulários, clicar em botões, extrair dados de sites com uso intenso de JavaScript e realizar testes de interface do usuário — todos cenários em que simples solicitações HTTP não são suficientes, pois não conseguem executar JavaScript nem interagir com o DOM.
A habilidade oferece recursos abrangentes de controle do navegador, incluindo navegação, interação com elementos (clicar, digitar, preencher formulários, selecionar em menus suspensos), inspeção do estado da página por meio de instantâneos de acessibilidade e capturas de tela, espera por conteúdo dinâmico e execução de JavaScript. Ela mantém o estado do navegador ao longo de várias operações usando um contexto compartilhado do navegador, tornando-a adequada para fluxos de trabalho com várias etapas, como fazer login em contas, navegar por formulários com várias páginas ou extrair dados de sites que exigem interação. O servidor MCP pode ser controlado por meio de chamadas de linha de comando para interagir com elementos específicos identificados por meio de instantâneos de acessibilidade.
Essa habilidade é ideal para desenvolvedores e engenheiros de automação que precisam automatizar interações na web, profissionais de controle de qualidade que realizam testes de interface do usuário, engenheiros de dados que extraem dados de sites dinâmicos e qualquer pessoa que trabalhe com aplicativos web que exijam renderização e interação reais do navegador. Use-a quando as tarefas envolverem envio de formulários, cliques em interfaces, espera pelo carregamento de conteúdo dinâmico ou qualquer cenário em que o mecanismo JavaScript e os recursos de renderização do navegador sejam necessários. Para a simples obtenção de conteúdo estático, ferramentas tradicionais como curl ou wget continuam sendo mais eficientes.
Perguntas frequentes
Quando devo usar essa habilidade em vez de simples solicitações HTTP?
Use essa habilidade quando precisar interagir com conteúdo dinâmico da web que exija a execução de JavaScript, preencher formulários, clicar em botões, aguardar o carregamento de conteúdo ou realizar qualquer interação baseada no navegador. Use o curl ou o wget para buscar conteúdo estático, nos casos em que não seja necessária interação com o navegador.
Por que o sinalizador --shared-browser-context é importante?
O sinalizador --shared-browser-context mantém o estado do navegador (cookies, localStorage, dados de sessão) entre várias chamadas do mcp-client.py. Sem ele, cada chamada inicia com um contexto de navegador novo, perdendo sessões de login e outros dados de estado entre as operações.
Como interajo com elementos específicos em uma página?
Primeiro, use `browser_snapshot` para obter uma árvore de acessibilidade da página, que retorna referências de elementos (como 'e42', 'e15'). Em seguida, use essas referências em comandos de interação como `browser_click`, `browser_type` ou `browser_fill_form` para selecionar elementos específicos.
Quando devo usar o `browser_run_code` em vez de comandos individuais?
Use `browser_run_code` para fluxos de trabalho complexos de várias etapas que devem ser executados de forma atômica (tudo ou nada). Isso é mais eficiente do que várias chamadas separadas e garante que toda a operação seja bem-sucedida ou falhe como um todo.
Quando devo parar o servidor do Playwright?
Interrompa o servidor quando sua tarefa de automação do navegador estiver concluída para liberar recursos. Mantenha-o em execução se estiver realizando várias tarefas do navegador em sequência. Se o navegador deixar de responder, interrompa e reinicie o servidor.
Todos os arquivos
6 arquivosscripts/mcp-client.py 16,9KB Visualizar SKILL.md 4,9KB Visualizar scripts/stop-server.sh 0,9KB Visualizar references/playwright-tools.md20,7KB Visualizar scripts/verify.py 0,5KB Visualizar scripts/start-server.sh 0,7 KB VisualizarAutomate 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 |
Instalar browsing-with-playwright
Baixe e descompacte os arquivos de habilidades no diretório .claude/skills/.
Baixar ZIPClone o repositório e copie os arquivos da habilidade para o seu projeto.
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
Copiar





Lar
