Playwright Browser Automation
来源: ComposioHQ/awesome-claude-skills 适配: LiYe OS 三层架构
基于 Playwright 的 Web 自动化测试，验证前端功能、调试 UI 行为、截图。
When to Use This Skill
当需要 Web 自动化时：
-
自动化测试 Web 应用
-
验证前端功能
-
调试 UI 行为
-
截图和录屏
-
跨浏览器测试
Core Capabilities
- 浏览器自动化
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();
- 元素交互
// 点击 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' });
- 截图与录屏
// 截图 await page.screenshot({ path: 'screenshot.png' });
// 全页面截图 await page.screenshot({ path: 'full.png', fullPage: true });
// 录制视频 const context = await browser.newContext({ recordVideo: { dir: 'videos/' } });
- 断言与验证
import { expect } from '@playwright/test';
// 文本断言 await expect(page.locator('h1')).toHaveText('Welcome');
// 可见性断言 await expect(page.locator('.modal')).toBeVisible();
// URL 断言 await expect(page).toHaveURL(/.*dashboard/);
- 跨浏览器测试
-
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