playwriter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Playwriter

Use this skill to drive the user's active Chrome tab via Playwriter.

Full documentation is available here: https://playwriter.dev/

使用该skill通过Playwriter操控用户的活跃Chrome标签页。

完整文档请访问：https://playwriter.dev/

Quick Start

快速开始

Ensure the Playwriter extension is enabled (green) on the target tab.
Ensure CLI is available:

bash

playwriter --version || npx -y playwriter --version

Create/attach a session:

bash

playwriter session new

Run commands against that session:

bash

playwriter -s 1 -e "console.log(await page.url())"

确保目标标签页上的Playwriter扩展已启用（显示绿色）。
确认CLI可用：

bash

playwriter --version || npx -y playwriter --version

创建/附加会话：

bash

playwriter session new

针对该会话运行命令：

bash

playwriter -s 1 -e "console.log(await page.url())"

Core Workflow

核心工作流

Confirm connection and correct tab:

bash

playwriter -s <session> -e "console.log(await page.url()); console.log(await page.title());"

Collect page structure when needed:

bash

playwriter -s <session> -e "console.log(await accessibilitySnapshot({ page }))"

Execute targeted actions (click/type/hover/fetch/evaluate).
Pull logs and structured state via
```
page.evaluate
```
.
Summarize findings with exact IDs, timestamps, and observed state transitions.

确认连接和目标标签页：

bash

playwriter -s <session> -e "console.log(await page.url()); console.log(await page.title());"

必要时收集页面结构：

bash

playwriter -s <session> -e "console.log(await accessibilitySnapshot({ page }))"

执行针对性操作（点击/输入/悬停/获取/求值）。
通过
```
page.evaluate
```
提取日志和结构化状态。
结合精确ID、时间戳和观察到的状态转换总结结果。

Useful Commands

实用命令

Get list rows/options from current app UI:

bash

playwriter -s <session> -e "const rows = await page.getByRole('option').all(); console.log(rows.length);"

Read popup/hover content:

bash

playwriter -s <session> -e "const row = page.getByRole('option').nth(0); await row.hover(); await page.waitForTimeout(700); console.log(await page.locator('[data-side]').first().innerText());"

Run arbitrary in-page debug code:

bash

playwriter -s <session> -e "const out = await page.evaluate(() => ({ href: location.href })); console.log(out);"

从当前应用UI获取列表行/选项：

bash

playwriter -s <session> -e "const rows = await page.getByRole('option').all(); console.log(rows.length);"

读取弹窗/悬停内容：

bash

playwriter -s <session> -e "const row = page.getByRole('option').nth(0); await row.hover(); await page.waitForTimeout(700); console.log(await page.locator('[data-side]').first().innerText());"

运行任意页内调试代码：

bash

playwriter -s <session> -e "const out = await page.evaluate(() => ({ href: location.href })); console.log(out);"

Troubleshooting

故障排除

If the session attaches to the wrong tab, click the extension icon on the intended tab and re-run
```
playwriter session new
```
.
If
```
playwriter
```
command is missing, use
```
npx -y playwriter ...
```
or install globally.
If execution errors suggest stale connection, create a fresh session.

如果会话附加到错误的标签页，请在目标标签页上点击扩展图标，然后重新运行
```
playwriter session new
```
。
如果
```
playwriter
```
命令不存在，请使用
```
npx -y playwriter ...
```
或全局安装。
如果执行错误提示连接失效，请创建新的会话。

Guardrails

注意事项

Prefer read-only inspection unless the task requires mutation.
Announce destructive UI actions before running them.
When capturing logs, redact sensitive tokens/user data in summaries.

除非任务需要修改，否则优先使用只读检查。
在运行破坏性UI操作前先告知用户。
捕获日志时，在总结中编辑敏感令牌/用户数据。