opção
LarLar Skill Automação do navegador browsing-with-playwright

browsing-with-playwright

bilalmk/todo_correct 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 tudo
15
Tempo atualizado 25 de Agosto de 2026

Sobre 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 Visualizar
Ver no GitHub

Automate 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

  1. Navigate to page
  2. Get snapshot to find element refs
  3. Fill form fields using refs
  4. Click submit
  5. Wait for confirmation
  6. Screenshot result

Workflow: Data Extraction

  1. Navigate to page
  2. Get snapshot (contains text content)
  3. Use browser_evaluate for complex extraction
  4. Process results

Verification

Run: python3 scripts/verify.py

Expected: ✓ Playwright MCP server running

If Verification Fails

  1. Run diagnostic: pgrep -f "@playwright/mcp"
  2. Check: Server process running on port 8808
  3. Try: bash scripts/start-server.sh
  4. Stop and report if still failing - do not proceed with downstream steps

Tool Reference

See references/playwright-tools.md for complete tool documentation.

Troubleshooting

IssueSolution
Element not foundRun browser_snapshot first to get current refs
Click failsTry browser_hover first, then click
Form not submittingUse "submit": true with browser_type
Page not loadingIncrease wait time or use browser_wait_for
Server not respondingStop 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 ZIP

Clone 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 Copiar
Configuração rápida: Copie a pasta da habilidade para .claude/skills/. O Claude detectará e utilizará automaticamente a habilidade
Repositório bilalmk/todo_correct

Habilidades relacionadas

playwright-cli
Tempo atualizado 29 de Junho de 2026
frontend-testing-best-practices
Tempo atualizado 7 de Julho de 2026
Playwright Browser Automation
Tempo atualizado 29 de Junho de 2026
playwright-generate-test
Tempo atualizado 29 de Junho de 2026
OR