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