---

name: playwright-skill description: "重要 - 路径解析：此技能可安装在不同位置（插件系统、手动安装、全局或项目特定）。执行任何命令前，根据加载此 SKILL.md 文件的位置确定技能目录，并在以下所有命令中使用该路径。" risk: unknown source: community date_added: "2026-02-27" plugin: setup: type: manual summary: "首次使用前在技能目录中运行 npm run setup 以安装 Playwright 和 Chromium。" docs: "SKILL.md"

重要 - 路径解析： 此技能可安装在不同位置（插件系统、手动安装、全局或项目特定）。执行任何命令前，根据加载此 SKILL.md 文件的位置确定技能目录，并在以下所有命令中使用该路径。将 $SKILL_DIR 替换为实际发现的路径。

常见安装路径：

• 插件系统：<plugin-root>/skills/playwright-skill
• 手动全局：<agent-home>/skills/playwright-skill
• 项目特定：<project>/.agent/skills/playwright-skill

Playwright 浏览器自动化

通用浏览器自动化技能。我会为你请求的任何自动化任务编写自定义 Playwright 代码，并通过通用执行器执行。

关键工作流 - 按顺序执行以下步骤：

1. 自动检测开发服务器 - 对于 localhost 测试，始终先运行服务器检测：

   cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))"
   

   • 如果找到1个服务器：自动使用，通知用户
   • 如果找到多个服务器：询问用户测试哪个
   • 如果未找到服务器：询问 URL 或提供帮助启动开发服务器

2. 将脚本写入 /tmp - 永远不要将测试文件写入技能目录；始终使用 /tmp/playwright-test-*.js

3. 默认使用可见浏览器 - 始终使用 headless: false，除非用户明确要求无头模式

4. 参数化 URL - 始终通过环境变量或脚本顶部的常量使 URL 可配置

工作原理

1. 你描述想要测试/自动化的内容
2. 我自动检测运行中的开发服务器（或在测试外部站点时询问 URL）
3. 我在 /tmp/playwright-test-*.js 中编写自定义 Playwright 代码（不会弄乱你的项目）
4. 我通过以下方式执行：cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js
5. 结果实时显示，浏览器窗口可见以便调试
6. 测试文件由操作系统自动从 /tmp 清理

安装（首次使用）

cd $SKILL_DIR
npm run setup

这会安装 Playwright 和 Chromium 浏览器。只需执行一次。

执行模式

步骤1：检测开发服务器（用于 localhost 测试）

cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"

步骤2：将测试脚本写入 /tmp 并参数化 URL

// /tmp/playwright-test-page.js
const { chromium } = require('playwright');

// 参数化 URL（自动检测或用户提供）
const TARGET_URL = 'http://localhost:3001'; // <-- 自动检测或来自用户

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto(TARGET_URL);
  console.log('Page loaded:', await page.title());

  await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });
  console.log('Screenshot saved to /tmp/screenshot.png');

  await browser.close();
})();

步骤3：从技能目录执行

cd $SKILL_DIR && node run.js /tmp/playwright-test-page.js

常用模式

测试页面（多视口）

// /tmp/playwright-test-responsive.js
const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:3001'; // 自动检测

(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 100 });
  const page = await browser.newPage();

  // 桌面端测试
  await page.setViewportSize({ width: 1920, height: 1080 });
  await page.goto(TARGET_URL);
  console.log('Desktop - Title:', await page.title());
  await page.screenshot({ path: '/tmp/desktop.png', fullPage: true });

  // 移动端测试
  await page.setViewportSize({ width: 375, height: 667 });
  await page.screenshot({ path: '/tmp/mobile.png', fullPage: true });

  await browser.close();
})();

测试登录流程

// /tmp/playwright-test-login.js
const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:3001'; // 自动检测

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto(\`\${TARGET_URL}/login\`);

  await page.fill('input[name="email"]', 'test@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');

  // 等待重定向
  await page.waitFor