Playwriter浏览器自动化工具Skill playwriter

---

name: playwriter description: 通过Playwriter（remorses）使用持久Chrome会话和完整的Playwright Page API进行浏览器自动化。 hats: [developer, qa_tester]

Playwriter

概述

使用Playwriter针对本地Chrome会话运行Playwright Page脚本。这保留了登录、Cookie和扩展，非常适合网页仪表板测试和认证流程。

使用场景

• 验证Ralph网页仪表板UI
• 无需重新登录即可导航认证页面
• 测试需要浏览器扩展或保存状态的流程
• 捕获可访问性快照以发现元素

前提条件

• 安装CLI：

  npm i -g playwriter
  

• 安装Playwriter Chrome扩展（参见Playwriter仓库说明）
• 确保Chrome正在运行且扩展已启用

核心工作流

1. 创建会话：

   playwriter session new
   

2. 列出会话并复制会话ID：

   playwriter session list
   

3. 针对该会话执行Playwright代码：

   playwriter -s <session_id> -e "await page.goto('https://example.com')"
   

执行环境

在-e中，以下在作用域内可用：

• page（Playwright Page）
• context（BrowserContext）
• state（在同一会话中跨调用持久化的对象）
• require（用于加载辅助模块）

状态持久化示例：

playwriter -s <session_id> -e "state.lastUrl = page.url()"
playwriter -s <session_id> -e "console.log(state.lastUrl)"

常见模式

导航 + 点击

playwriter -s <session_id> -e "await page.goto('http://localhost:3000'); await page.getByRole('button', { name: 'Run' }).click();"

填写表单

playwriter -s <session_id> -e "await page.getByLabel('Email').fill('qa@example.com'); await page.getByLabel('Password').fill('secret'); await page.getByRole('button', { name: 'Sign in' }).click();"

可访问性快照（带标签）

playwriter -s <session_id> -e "const { screenshotWithAccessibilityLabels } = require('playwriter'); await screenshotWithAccessibilityLabels(page, { path: '/tmp/a11y.png' });"

网络拦截

playwriter -s <session_id> -e "await page.route('**/api/**', async route => { const res = await route.fetch(); const body = await res.json(); await route.fulfill({ json: { ...body, injected: true } }); });"

读取页面内容

playwriter -s <session_id> -e "const text = await page.locator('main').innerText(); console.log(text);"

提示

• 优先使用getByRole和getByLabel以获取稳定的选择器。
• 使用可访问性快照发现可靠的角色和标签。
• 保持会话专注：如果状态混乱，重置或关闭它们。
• 对于多步流程，在state上存储中间数据。