mcpField
P
playwright-cli

playwright-cli

github.com/screenci测试与质量41.8k 次安装3 周前更新
代码仓库

关于 playwright-cli

供 ScreenCI 浏览器检查流程使用的 Playwright 命令行技能，介绍页面导航、快照、交互操作和已有登录会话的加载方式。

主要功能

  1. 01打开网页并进行导航
  2. 02生成带元素引用的页面快照
  3. 03通过元素引用、CSS 或定位器交互
  4. 04管理命名浏览器会话
  5. 05加载 ScreenCI 保存的登录状态

适用场景

  1. 01检查网页结构和可交互元素
  2. 02在已登录会话中验证页面流程
  3. 03为 ScreenCI 测试确定页面操作

安装

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

$npx skills add https://github.com/screenci/screenci --skill playwright-cli

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

详细介绍

使用 playwright-cli 进行浏览器自动化

为 ScreenCI 检查页面时

  • 先尝试简单流程： npx screenci explore <url> --click "<name>" 会打开页面、依次点击，并在一次调用中直接打印快照。只有在需要更多步骤时，才使用 playwright-cli。

  • 从 screenci/ 目录运行 npx playwright-cli ...：它是该目录中的本地 devDependency。

  • 切勿自行编写 Playwright 脚本。 脚本启动时处于未登录状态，使用不同的浏览器，而且找到的选择器在录制时永远不会出现。

  • 如果应用需要登录，请加载 ScreenCI 已保存的会话：

    playwright-cli open
playwright-cli state-load screenci/.screenci/auth/default.json
playwright-cli goto https://app.example.com

    如果该文件不存在，请运行 npx screenci login，让用户在打开的浏览器中 登录，然后运行 npx screenci login --wait，再加载会话。切勿在此浏览器中 输入用户的凭据，也不要将状态保存并覆盖该文件（state-save 会覆盖真实会话）。

  • 完成首次导航并获取快照后，检查是否出现 Cookie 同意或 Cookie 政策横幅。找出脚本应在初始 hide() 块中使用的接受操作，最好使用稳定的定位器，例如 getByRole('button', { name: /accept|accept all|allow all|agree|ok/i })。 优先选择接受／允许，而不是仅关闭或设置操作。

  • 此浏览器是已安装的 Chrome。除非 screenci.config.ts 在 use 中设置 channel: 'chrome'，否则录制器会使用捆绑的 Chromium。因此，如果某个步骤在这里有效，但在 npx screenci test 中失败，问题出在浏览器，而不是选择器。

快照

每条命令都会打印页面 URL、标题和包含元素引用（e15）的快照。优先使用可以直接阅读的输出：如果你的版本支持全局 --raw 选项，playwright-cli --raw snapshot 只会打印快照。 否则，输出会链接到一个 .playwright-cli/*.yml 文件；只有当行内摘要不够用时才读取该文件。

playwright-cli snapshot            # whole page
playwright-cli snapshot e34        # one element
playwright-cli snapshot --depth=4  # shallower, cheaper

核心命令

playwright-cli open [url]
playwright-cli goto https://example.com
playwright-cli click e3
playwright-cli fill e5 "[email protected]"
playwright-cli type "search query"
playwright-cli press Enter
playwright-cli hover e4
playwright-cli select e9 "option-value"
playwright-cli check e12
playwright-cli go-back
playwright-cli reload
playwright-cli eval "el => el.getAttribute('data-testid')" e5
playwright-cli close

目标也可以是 CSS 选择器或 Playwright 定位器：

playwright-cli click "getByRole('button', { name: 'Submit' })"
playwright-cli click "getByTestId('submit-button')"

命名会话：playwright-cli -s=mysession open example.com，然后运行 playwright-cli list／playwright-cli close-all。

安装

如果 npx --no-install playwright-cli --version 失败，请使用 npm install -g @playwright/cli@latest 安装。

评论

支持 Markdown