
关于
Playwright 自动化测试技能。支持在不同位置安装(插件系统、手动安装、全局或项目级),执行命令前自动确定技能目录路径
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 代码,并通过通用执行器执行。
关键工作流 - 按顺序执行以下步骤:
-
自动检测开发服务器 - 对于 localhost 测试,始终先运行服务器检测:
cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))"- 如果找到1个服务器:自动使用,通知用户
- 如果找到多个服务器:询问用户测试哪个
- 如果未找到服务器:询问 URL 或提供帮助启动开发服务器
-
将脚本写入 /tmp - 永远不要将测试文件写入技能目录;始终使用
/tmp/playwright-test-*.js -
默认使用可见浏览器 - 始终使用
headless: false,除非用户明确要求无头模式 -
参数化 URL - 始终通过环境变量或脚本顶部的常量使 URL 可配置
工作原理
- 你描述想要测试/自动化的内容
- 我自动检测运行中的开发服务器(或在测试外部站点时询问 URL)
- 我在
/tmp/playwright-test-*.js中编写自定义 Playwright 代码(不会弄乱你的项目) - 我通过以下方式执行:
cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js - 结果实时显示,浏览器窗口可见以便调试
- 测试文件由操作系统自动从 /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
兼容工具
Claude CodeCursor
标签
前端开发