browser-automation

用途

该技能面向非测试场景的浏览器自动化，主要覆盖网页抓取、表单填写、截图捕获、PDF 生成和工作流自动化。资料同时说明，若需使用 Playwright 进行测试，应改用其他测试类技能。

主要能力

技能基于 Playwright、Puppeteer 和 Selenium，专长包括 UI 测试、网页抓取、表单自动化和自动化工作流。具体能力分为以下几类：

Playwright 自动化：浏览器控制（启动、导航、页面交互）、元素选择（CSS 选择器、XPath、基于文本、data-testid）、操作（点击、填写、选择、悬停、拖放）、等待策略（waitForSelector、waitForNavigation、waitForTimeout）、网络拦截（模拟 API、阻止资源、修改请求）、截图与视频（整页、指定元素、视频录制）。
测试框架：端到端测试（Playwright Test、类 Cypress 工作流）、视觉回归（截图对比、像素差异分析）、无障碍测试（ARIA 校验、键盘导航）、性能测试（页面加载时间、Core Web Vitals）、移动端测试（模拟设备、触摸手势）。
网页抓取：数据提取（解析 HTML、提取结构化数据）、分页（遍历多页结果）、动态内容（处理懒加载、无限滚动）、认证（登录流程、会话管理）、限流（节流请求、遵守 robots.txt）。
表单自动化：输入字段（文本、邮箱、密码、数字输入）、选择项（下拉框、单选按钮、复选框）、文件上传（单个和多个文件）、日期选择器（自定义日期控件）、多步骤表单（向导式表单流程）。

使用方式

资料提供了多段代码示例，展示典型用法：

基础页面导航：

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();

表单自动化与校验：

// Fill and submit form
await page.fill('input[name="email"]', 'test@example.com');
await page.fill('input[name="password"]', 'SecurePass123!');
await page.click('button[type="submit"]');

// Wait for success message
const success = await page.waitForSelector('.success-message', { timeout: 5000 });
const message = await success.textContent();
console.log('Success:', message);

多页数据提取：

const products = [];
let page = 1;

while (page <= 10) {
  await browser.goto(`https://example.com/products?page=${page}`);

  const items = await browser.$$eval('.product-item', (elements) =>
    elements.map((el) => ({
      title: el.querySelector('.title')?.textContent,
      price: el.querySelector('.price')?.textContent,
      image: el.querySelector('img')?.src,
    }))
  );

  products.push(...items);
  page++;
}

网络拦截：

await page.route('**/api/analytics', (route) => route.abort());
await page.route('**/api/user', (route) =>
  route.fulfill({
    status: 200,
    body: JSON.stringify({ id: 1, name: 'Test User' }),
  })
);

视觉回归测试：

import { expect } from '@playwright/test';

// Capture baseline
await page.screenshot({ path: 'baseline.png' });

// After changes, compare
const screenshot = await page.screenshot();
expect(screenshot).toMatchSnapshot('homepage.png');

选择器策略方面，资料给出三类：CSS 选择器（优先，如 #submit-button、[data-testid="login-button"]、.btn-primary、button.submit[type="submit"]）、XPath（CSS 不足时使用，如 //button[contains(text(), "Submit")]）、Playwright 专有方式（getByText、getByRole、getByLabel、getByPlaceholder）。

最佳实践包括：使用稳定选择器（避免自动生成的类名，推荐 data-testid）、添加显式等待（避免固定 waitForTimeout，改用 waitForSelector 并指定 state）、优雅处理错误（捕获异常并截图）、清理资源（finally 中关闭浏览器）、使用页面对象模型（POM）。

常见陷阱包括：竞态条件（点击后需等待元素出现再读取）、过期元素引用（页面变化后需重新查询）、动态内容时序问题（使用 waitForLoadState('networkidle')）。

调试工具包括：有头模式（headless: false, slowMo）、失败时截图、Trace 录制（context.tracing.start/stop）、控制台日志（page.on('console')）。

性能优化包括：阻止不必要资源（图片、CSS 等）、复用浏览器上下文、并行执行（Promise.all）。

适用场景

资料列出的激活关键词对应以下场景：使用 Playwright 自动化浏览器测试、使用 Playwright/Puppeteer 进行网页抓取、截图自动化与视觉回归、表单填写自动化、元素选择策略、处理网页自动化中的动态内容、UI 测试最佳实践、调试 Playwright 测试。

限制

资料明确该技能面向非测试用途；若需使用 Playwright 进行测试，应改用其他测试类技能。资料未提供收费、价格、平台支持范围、具体效果指标等信息。

技能介绍

用途

主要能力

使用方式

适用场景

限制