mcpField
P
playwright

playwright

github.com/netease-youdao开发6.2k55 次安装今天更新
代码仓库

关于 playwright

playwright 是通过命令行驱动真实浏览器的技能，面向需要执行网页交互和检查界面的工作流。它采用 snapshot 获取稳定元素引用，并支持截图、PDF 和 trace 等产物。

主要功能

  1. 01命令行驱动真实浏览器
  2. 02通过 snapshot 获取元素引用
  3. 03点击、填写和键盘交互
  4. 04管理多个标签页
  5. 05捕获截图、PDF 和 trace

适用场景

  1. 01自动填写并提交网页表单
  2. 02检查导航或交互后的页面状态
  3. 03记录界面流程以供调试

MCP 相关

技能通过包装脚本运行 playwright-cli；包装脚本使用 npx 调用 @playwright/mcp。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/netease-youdao/lobsterai --skill playwright

安装后在 Claude Code 中输入/playwright确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
NOTICE.txt
agents/
openai.yaml
assets/
playwright-small.svg
references/
cli.md
workflows.md
scripts/
playwright_cli.sh

详细介绍

Playwright CLI 技能

使用 playwright-cli 从终端操控真实浏览器。优先使用随附的包装脚本，这样即使未全局安装该 CLI，也能正常使用。 将此技能视为以 CLI 为先的自动化方式。除非用户明确要求测试文件，否则不要改用 @playwright/test。

前置条件检查（必需）

提出命令前，先检查是否有 npx 可用（包装脚本依赖它）：

command -v npx >/dev/null 2>&1

如果不可用，请暂停并让用户安装 Node.js/npm（其中包含 npx）。逐字提供以下步骤：

# Verify Node/npm are installed
node --version
npm --version

# If missing, install Node.js/npm, then:
npm install -g @playwright/mcp@latest
playwright-cli --help

确认 npx 可用后，使用包装脚本。全局安装 playwright-cli 是可选的。

技能路径（设置一次）

export SKILLS_ROOT="${LOBSTERAI_SKILLS_ROOT:-${SKILLS_ROOT:-$HOME/Library/Application Support/LobsterAI/SKILLs}}"
export PWCLI="$SKILLS_ROOT/playwright/scripts/playwright_cli.sh"

已安装的技能从 $LOBSTERAI_SKILLS_ROOT / $SKILLS_ROOT 解析（生产环境默认值：应用的 userData/SKILLs；macOS 通常为 ~/Library/Application Support/LobsterAI/SKILLs）。

快速开始

使用包装脚本：

"$PWCLI" open https://playwright.dev --headed
"$PWCLI" snapshot
"$PWCLI" click e15
"$PWCLI" type "Playwright"
"$PWCLI" press Enter
"$PWCLI" screenshot

如果用户更倾向于全局安装，也可以使用：

npm install -g @playwright/mcp@latest
playwright-cli --help

核心工作流

  1. 打开页面。
  2. 获取快照，以获得稳定的元素引用。
  3. 使用最新快照中的引用进行交互。
  4. 导航或 DOM 发生重大变化后，重新获取快照。
  5. 在有用时，捕获产物（截图、PDF、跟踪记录）。

最简循环：

"$PWCLI" open https://example.com
"$PWCLI" snapshot
"$PWCLI" click e3
"$PWCLI" snapshot

何时重新获取快照

在以下情况后重新获取快照：

  • 导航
  • 点击会显著改变 UI 的元素
  • 打开/关闭模态框或菜单
  • 切换标签页

引用可能会失效。如果命令因引用缺失而失败，请重新获取快照。

推荐模式

填写并提交表单
"$PWCLI" open https://example.com/form
"$PWCLI" snapshot
"$PWCLI" fill e1 "[email protected]"
"$PWCLI" fill e2 "password123"
"$PWCLI" click e3
"$PWCLI" snapshot
使用跟踪记录调试 UI 流程
"$PWCLI" open https://example.com --headed
"$PWCLI" tracing-start
# ...interactions...
"$PWCLI" tracing-stop
多标签页操作
"$PWCLI" tab-new https://example.com
"$PWCLI" tab-list
"$PWCLI" tab-select 0
"$PWCLI" snapshot

包装脚本

包装脚本使用 npx --package @playwright/mcp playwright-cli，因此无需全局安装即可运行该 CLI：

"$PWCLI" --help

除非仓库已统一采用全局安装，否则优先使用包装脚本。

参考资料

仅打开所需内容：

  • CLI 命令参考：references/cli.md
  • 实用工作流与故障排查：references/workflows.md

防护措施

  • 始终先获取快照，再引用 e12 等元素 ID。
  • 引用看起来已失效时，重新获取快照。
  • 优先使用明确的命令；除非必要，否则不要使用 eval 和 run-code。
  • 如果没有最新快照，请使用 eX 等占位引用并说明原因；不要通过 run-code 绕过引用。
  • 在有助于进行视觉检查时，使用 --headed。
  • 在此仓库中捕获产物时，请使用 output/playwright/，避免新建顶层产物目录。
  • 默认使用 CLI 命令和工作流，而不是 Playwright 测试规范。

评论

支持 Markdown