вариант

browsing-with-playwright

bilalmk/todo_correct bilalmk/todo_correct

Автоматизация действий в браузере с помощью Playwright MCP. Навигация по веб-сайтам, заполнение форм, нажатие на элементы, создание скриншотов и извлечение данных. Используйте, если задачи требуют просмотра веб-страниц, отправки форм, извлечения данных из веб-страниц, тестирования пользовательского интерфейса или любого другого взаимодействия с браузером. НЕ используйте, если требуется только загрузка статического контента (в этом случае используйте curl/wget).

...Расширить все
15
Обновлено время 25 августа 2026 г.

О browsing-with-playwright

Навык « browsing-with-playwright » обеспечивает автоматизацию работы браузера с помощью сервера Playwright MCP, позволяя программно управлять веб-браузерами для выполнения задач, требующих реального взаимодействия с браузером. Этот навык решает проблему необходимости взаимодействия с динамическим веб-контентом, заполнения форм, нажатия кнопок, извлечения данных с сайтов, интенсивно использующих JavaScript, и проведения тестирования пользовательского интерфейса — всех тех сценариев, в которых простые HTTP-запросы оказываются недостаточными, поскольку не могут выполнять JavaScript или взаимодействовать с DOM.

Этот навык предоставляет широкие возможности управления браузером, включая навигацию, взаимодействие с элементами (нажатие кнопок, ввод текста, заполнение форм, выбор из раскрывающихся списков), проверку состояния страницы с помощью снимков доступности и скриншотов, ожидание динамического контента и выполнение JavaScript. Он сохраняет состояние браузера при выполнении нескольких операций благодаря использованию общего контекста браузера, что делает его подходящим для многоэтапных рабочих процессов, таких как вход в учетные записи, переход по многостраничным формам или извлечение данных с сайтов, требующих взаимодействия. Сервер MCP можно управлять с помощью вызовов из командной строки для взаимодействия с конкретными элементами, идентифицированными с помощью снимков доступности.

Этот навык идеально подходит для разработчиков и инженеров по автоматизации, которым необходимо автоматизировать веб-взаимодействия, специалистов по контролю качества, проводящих тестирование пользовательского интерфейса, инженеров по данным, занимающихся извлечением данных с динамических веб-сайтов, а также для всех, кто работает с веб-приложениями, требующими реального рендеринга и взаимодействия с браузером. Используйте этот навык, если задачи включают отправку форм, переход по элементам интерфейса, ожидание загрузки динамического контента или любой другой сценарий, в котором требуются JavaScript-движок браузера и его возможности рендеринга. Для простого извлечения статического контента более эффективными остаются традиционные инструменты, такие как curl или wget.

Часто задаваемые вопросы

Когда следует использовать этот навык вместо простых HTTP-запросов?

Используйте этот навык, когда вам нужно взаимодействовать с динамическим веб-контентом, требующим выполнения JavaScript, заполнять формы, нажимать кнопки, ждать загрузки контента или выполнять любые действия, требующие взаимодействия с браузером. Используйте curl или wget для извлечения статического контента, где не требуется взаимодействие с браузером.

Почему важен флаг --shared-browser-context?

Флаг --shared-browser-context сохраняет состояние браузера (cookie, localStorage, данные сессии) при нескольких вызовах mcp-client.py. Без него каждый вызов запускается с новым контекстом браузера, при этом между операциями теряются сессии входа и другие данные, зависящие от состояния.

Как взаимодействовать с конкретными элементами на странице?

Сначала воспользуйтесь командой browser_snapshot, чтобы получить дерево доступности страницы, которое возвращает ссылки на элементы (например, 'e42', 'e15'). Затем используйте эти ссылки в командах взаимодействия, таких как browser_click, browser_type или browser_fill_form, для выбора конкретных элементов.

Когда следует использовать `browser_run_code` вместо отдельных команд?

Используйте `browser_run_code` для сложных многоэтапных рабочих процессов, которые должны выполняться атомарно (по принципу «всё или ничего»). Это более эффективно, чем несколько отдельных вызовов, и гарантирует, что вся операция завершится успешно или завершится сбоем как единое целое.

Когда следует останавливать сервер Playwright?

Остановите сервер по завершении задачи автоматизации браузера, чтобы освободить ресурсы. Оставьте его запущенным, если выполняете несколько задач браузера последовательно. Если браузер перестал отвечать, остановите и перезапустите сервер.

Все файлы

6файлов scripts/mcp-client.py 16,9КБ Просмотреть SKILL.md 4,9КБ Просмотреть scripts/stop-server.sh 0,9КБ Просмотреть references/playwright-tools.md20,7КБ Просмотр scripts/verify.py 0,5КБ Просмотр scripts/start-server.sh 0,7 КБ Просмотр
Посмотреть на 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

Установить browsing-with-playwright

Скачайте файлы навыков и распакуйте их в каталог .claude/skills/.

Скачать ZIP

Клонируйте репозиторий и скопируйте файлы навыка в свой проект.

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

Копировать Копировать
Быстрая настройка: Скопируйте папку со скиллом в каталог .claude/skills/ — Claude автоматически обнаружит и начнет использовать этот скилл
Репозиторий bilalmk/todo_correct

Похожие навыки

playwright-cli
Обновлено время 29 июня 2026 г.
frontend-testing-best-practices
Обновлено время 7 июля 2026 г.
Playwright Browser Automation
Обновлено время 29 июня 2026 г.
playwright-generate-test
Обновлено время 29 июня 2026 г.
OR