本文へ移動
cccskills
無料GitHub で公開

mk:playwright-cli

Session-persistent browser automation via Playwright CLI — form filling, screenshots, data extraction, multi-step flows. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information across multiple requests. NOT for AI-driven long-autonomous flows (see mk:agent-browser); NOT for generating .spec.ts E2E code (see mk:qa-manual).

インストール方法を見る

含まれるファイル(9)

  • SKILL.md5.6 KB
  • references/command-reference.md3.7 KB
  • references/request-mocking.md2.1 KB
  • references/running-code.md5.6 KB
  • references/session-management.md4.7 KB
  • references/storage-state.md6.6 KB
  • references/test-generation.md2.4 KB
  • references/tracing.md4.1 KB
  • references/video-recording.md1.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Browser Automation with playwright-cli

Use playwright-cli when: DOM interaction, navigation, data extraction, or generating reusable .spec.ts E2E test code. Use mk:agent-browser instead when: session persistence (auth flows, MFA, cookie import) is required.

Quick Start

playwright-cli open https://playwright.dev
playwright-cli snapshot                  # Get element refs (e1, e2, ...)
playwright-cli click e15
playwright-cli type "page.click"
playwright-cli press Enter
playwright-cli screenshot
playwright-cli close

Core Workflow

  1. open <url> — navigate to page
  2. snapshot — get accessibility tree with element refs (e1, e2, ...)
  3. Interact using refs: click, fill, type, select, check
  4. Re-snapshot after navigation or DOM changes
  5. close when done
playwright-cli open https://example.com/form
playwright-cli snapshot
playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password123"
playwright-cli click e3
playwright-cli snapshot
playwright-cli close

Most-Used Commands

# Navigation
playwright-cli goto <url>
playwright-cli go-back / go-forward / reload

# Interaction
playwright-cli click e3
playwright-cli fill e5 "text"         # Clear and type
playwright-cli type "text"            # Type at current focus
playwright-cli press Enter
playwright-cli select e9 "option-value"
playwright-cli check e12 / uncheck e12

# Snapshot & capture
playwright-cli snapshot
playwright-cli snapshot --filename=after-click.yaml
playwright-cli screenshot
playwright-cli screenshot --filename=page.png
playwright-cli pdf --filename=page.pdf

# Auth state
playwright-cli state-save auth.json
playwright-cli state-load auth.json

Full command listing: references/command-reference.md

Snapshots

After each command, playwright-cli writes a snapshot YAML of the current browser state. Use --filename= when the artifact is a workflow result; omit for auto-timestamped files.

.playwright-cli/page-2026-02-14T19-22-42-679Z.yml

Sessions

playwright-cli -s=mysession open example.com --persistent
playwright-cli -s=mysession click e6
playwright-cli -s=mysession close
playwright-cli list          # List all active sessions
playwright-cli close-all     # Close all browsers
playwright-cli kill-all      # Force kill stale processes

Named sessions run isolated contexts (separate cookies, storage, history). Full session patterns: references/session-management.md

Storage & Network

# Cookies / localStorage / sessionStorage
playwright-cli cookie-list / cookie-set / cookie-delete / cookie-clear
playwright-cli localstorage-get theme / localstorage-set theme dark

# Request mocking
playwright-cli route "**/*.jpg" --status=404
playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
playwright-cli unroute

DevTools & Debugging

playwright-cli console             # View console output
playwright-cli network             # View network requests
playwright-cli tracing-start / tracing-stop
playwright-cli video-start / playwright-cli video-stop video.webm
playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"

Setup

Requires Playwright MCP server. Configure in .mcp.json:

{ "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } }

Copy from .claude/mcp.json.example if not configured. If global binary unavailable: npx playwright-cli <command>

Gotchas

  • Flaky selectors on SPAs: data-testid changes between renders → prefer role-based selectors (getByRole) over CSS selectors
  • Auth state not persisting between tests: each test starts with fresh context → use state-save / state-load to persist auth cookies across runs

References

ReferenceWhen to Use
references/command-reference.mdFull command listing (core, tabs, storage, network, DevTools, open params)
references/session-management.mdNamed sessions, concurrent scraping, persistent profiles, cleanup
references/request-mocking.mdRequest mocking patterns
references/storage-state.mdStorage state (cookies, localStorage)
references/test-generation.mdTest generation
references/tracing.mdTracing
references/video-recording.mdVideo recording
references/running-code.mdRunning Playwright code

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use this skill to generate well-branded interfaces and assets for MeowKit (AI Agent Toolkit for Claude Code), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

mk-advise

無料

Turn a raw idea into ONE honest recommendation: interview one question at a time until confirmed, then give a verdict with trade-offs and a checklist. Not for options or debate.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Browser automation CLI for agents: navigate, click/fill, screenshot, extract data, test apps, Electron/Slack, cloud browsers. NOT for the user's real Chrome profile/cookies (mk:chrome-profile).

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Detects the right agent and complexity tier at Phase 0 orient; runs first in every workflow. NOT for runtime agent routing inside a single skill.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Angular v20+ patterns: components, signals, services, forms, routing, HTTP, testing, SSR. Auto-activates on .ts files in Angular projects (angular.json detected).

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Design and review durable REST, GraphQL, RPC, or event API contracts: shape, compatibility, pagination, error semantics. Discovers existing consumers first. Not implementation, schema, or release.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

ngocsangyem のスキルをすべて見る

このスキルの問題を報告する