使用 Claude Code 的插件市场系统，支持自动更新和团队分发：

# 从市场添加插件
/plugin marketplace add lackeyjb/playwright-skill

# 安装插件
/plugin install playwright-skill@playwright-skill

# 运行安装脚本
cd ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill
npm run setup

手动克隆并安装到全局 skills 目录：

# 克隆仓库
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# 复制到 skills 目录
mkdir -p ~/.claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill ~/.claude/skills/

# 运行安装脚本
cd ~/.claude/skills/playwright-skill && npm run setup

将 skill 复制到项目的 .claude/skills/ 目录：

# 复制 skill 到项目目录
cp -r skills/playwright-skill <your-project>/.claude/skills/

# 运行安装脚本
cd <your-project>/.claude/skills/playwright-skill
npm run setup

// 启动浏览器
const browser = await chromium.launch({ headless: false, slowMo: 100 });

// 创建隔离上下文
const context = await browser.newContext({
  viewport: { width: 1920, height: 1080 },
  userAgent: 'custom-agent'
});

// 创建新页面
const page = await context.newPage();

// 关闭浏览器
await browser.close();

// 推荐的选择方式
page.locator('[data-testid="submit"]')    // data 属性
page.getByRole('button', { name: '提交' }) // 角色
page.getByText('欢迎')                      // 文本内容
page.getByLabel('用户名')                   // 表单标签
page.getByPlaceholder('请输入...')          // 占位符

// 定位器链式调用
locator.filter({ hasText: '活跃' })         // 文本过滤
locator.nth(0)                              // 索引选择
locator.and(anotherLocator)                 // 组合条件

// 文本输入
await locator.fill('文本内容');           // 替换整个字段
await locator.type('文本', { delay: 50 }); // 模拟逐字输入
await locator.clear();                     // 清空字段

// 表单控件
await locator.check();                     // 勾选复选框
await page.selectOption('#dropdown', 'value'); // 下拉选择
await page.setInputFiles('#upload', 'file.pdf'); // 文件上传

// 鼠标操作
await page.click('#btn');                  // 点击
await page.dblclick('#btn');               // 双击
await page.hover('#menu');                 // 悬停
await page.dragAndDrop('#src', '#dest');   // 拖放

// 键盘操作
await page.keyboard.press('Enter');        // 按键
await page.keyboard.press('Control+A');    // 组合键

// 元素状态等待
await locator.waitFor({ state: 'visible' });
await locator.waitFor({ state: 'hidden' });
await locator.waitFor({ state: 'attached' });

// 页面加载等待
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');

// 自定义条件等待
await page.waitForFunction(() => document.title === '首页');

// 网络请求等待
await page.waitForResponse(resp => resp.url().includes('/api/'));
await page.waitForRequest(req => req.method() === 'POST');

// 页面级断言
await expect(page).toHaveTitle('首页');
await expect(page).toHaveURL(/dashboard/);

// 元素状态断言
await expect(locator).toBeVisible();
await expect(locator).toBeHidden();
await expect(locator).toBeEnabled();
await expect(locator).toBeDisabled();
await expect(locator).toBeChecked();

// 内容断言
await expect(locator).toHaveText('确切文本');
await expect(locator).toContainText('部分文本');
await expect(locator).toHaveValue('输入值');
await expect(locator).toHaveAttribute('href', '/link');
await expect(locator).toHaveCSS('color', 'red');
await expect(locator).toHaveCount(5);

// 拦截并修改请求
await page.route('**/api/**', route => {
  route.continue({ headers: { ...route.request().headers(), 'X-Custom': 'value' } });
});

// 模拟响应
await page.route('**/api/data', route => {
  route.fulfill({ status: 200, body: JSON.stringify({ mock: true }) });
});

// 阻止资源加载
await page.route('**/*.{png,jpg}', route => route.abort());

测试不同视口尺寸的页面展示：

const viewports = [
  { name: 'desktop', width: 1920, height: 1080 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'mobile', width: 375, height: 667 }
];

for (const vp of viewports) {
  await page.setViewportSize({ width: vp.width, height: vp.height });
  await page.screenshot({ path: `/tmp/${vp.name}.png`, fullPage: true });
}

await page.goto(TARGET_URL + '/login');

// 填写凭据
await page.fill('[name="username"]', 'testuser');
await page.fill('[name="password"]', 'password123');

// 提交表单
await page.click('button[type="submit"]');

// 验证登录成功
await page.waitForURL('**/dashboard');
await expect(page.getByText('欢迎')).toBeVisible();

await page.goto(TARGET_URL + '/register');

// 填写表单
await page.fill('#name', '张三');
await page.fill('#email', 'zhang@example.com');
await page.selectOption('#country', 'CN');
await page.check('#terms');

// 提交
await page.click('#submit');

// 验证成功
await page.waitForSelector('.success-message');
const msg = await page.textContent('.success-message');
console.log('注册结果:', msg);

await page.goto(TARGET_URL);

const links = await page.locator('a[href]').all();
const brokenLinks = [];

for (const link of links) {
  const href = await link.getAttribute('href');
  if (href.startsWith('http')) {
    const response = await page.request.head(href);
    if (!response.ok()) {
      brokenLinks.push({ url: href, status: response.status() });
    }
  }
}

console.log('失效链接:', brokenLinks);