Agent Skills
› liyecom/liye-ai
› playwright
playwright
GitHub基于 Playwright 的 Web 自动化技能，支持浏览器控制、元素交互、截图录屏及断言验证。用于自动化测试前端功能、调试 UI 行为及跨浏览器兼容性测试。
Trigger Scenarios
自动化测试 Web 应用
验证前端功能
调试 UI 行为
截图和录屏
Install
npx skills add liyecom/liye-ai --skill playwright -g -y
SKILL.md
Frontmatter
{
"name": "playwright",
"domain": "00_Core_Utilities",
"inputs": {
"optional": [],
"required": []
},
"source": "awesome-claude-skills",
"status": "active",
"license": "Apache-2.0",
"outputs": {
"artifacts": [
"SKILL.md"
]
},
"version": "1.0.0",
"category": "development-tools",
"skeleton": "workflow",
"triggers": {
"commands": [
"\/playwright"
],
"patterns": [
"playwright"
]
},
"governance": {
"policy": "_meta\/policies\/DEFAULT_SKILL_POLICY.md",
"constitution": "_meta\/governance\/SKILL_CONSTITUTION_v0.1.md"
},
"source_url": "https:\/\/github.com\/ComposioHQ\/awesome-claude-skills",
"description": "Web 自动化测试与浏览器控制",
"verification": {
"how_to_verify": [
"node .claude\/scripts\/sfc_lint.mjs <skill_dir>"
],
"evidence_required": true
},
"failure_modes": [
{
"symptom": "Missing required inputs or context",
"recovery": "Provide the missing info and retry"
},
{
"symptom": "Unexpected tool\/runtime failure",
"recovery": "Rerun with minimal steps; escalate after 3 failures"
}
]
}
Playwright Browser Automation
来源: ComposioHQ/awesome-claude-skills 适配: LiYe OS 三层架构
基于 Playwright 的 Web 自动化测试，验证前端功能、调试 UI 行为、截图。
When to Use This Skill
当需要 Web 自动化时：
- 自动化测试 Web 应用
- 验证前端功能
- 调试 UI 行为
- 截图和录屏
- 跨浏览器测试
Core Capabilities
1. 浏览器自动化
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.click('button#submit');
await browser.close();
2. 元素交互
// 点击
await page.click('button.primary');
// 填写表单
await page.fill('input[name="email"]', 'user@example.com');
// 选择下拉
await page.selectOption('select#country', 'US');
// 等待元素
await page.waitForSelector('.loading', { state: 'hidden' });
3. 截图与录屏
// 截图
await page.screenshot({ path: 'screenshot.png' });
// 全页面截图
await page.screenshot({ path: 'full.png', fullPage: true });
// 录制视频
const context = await browser.newContext({
recordVideo: { dir: 'videos/' }
});
4. 断言与验证
import { expect } from '@playwright/test';
// 文本断言
await expect(page.locator('h1')).toHaveText('Welcome');
// 可见性断言
await expect(page.locator('.modal')).toBeVisible();
// URL 断言
await expect(page).toHaveURL(/.*dashboard/);
5. 跨浏览器测试
- Chromium (Chrome, Edge)
- Firefox
- WebKit (Safari)
- 移动设备模拟
Usage Examples
示例 1: 测试登录流程
用户: 帮我自动化测试网站的登录流程
Claude: [使用 playwright 编写登录测试脚本，验证成功和失败场景]
示例 2: 网页截图
用户: 帮我截取这个页面在不同设备上的样子
Claude: [使用 playwright 模拟手机、平板、桌面，分别截图]
示例 3: 表单自动填写
用户: 帮我自动填写这个复杂的表单
Claude: [使用 playwright 定位元素并填写表单数据]
Dependencies
- Node.js 16+
- Playwright 库
- 浏览器引擎 (Chromium/Firefox/WebKit)
LiYe OS Integration
业务域引用
此技能被以下业务域引用：
- 06_Technical_Development: Web 自动化（主域）
- 02_Operation_Intelligence: 竞品页面监控
与其他技能的配合
- artifacts-builder: 测试构建的前端组件
- mcp-builder: 为 MCP 工具提供浏览器能力
三层架构位置
- 物理层 (本文件): Skills/00_Core_Utilities/development-tools/playwright/
- 逻辑层索引: Skills/{domain}/index.yaml
- L3 指令层: .claude/skills/{domain}/playwright/
Created: 2025-12-28 | Adapted for LiYe OS
Version History
- 0a7839d Current 2026-08-20 12:54
