100 个 Agent Skills 盘点（三）：浏览器自动化与爬虫

1
// Agent 自动化测试登录流程
2
const browser = await puppeteer.launch();
3
const page = await browser.newPage();
4

5
await page.goto('https://example.com/login');
6
await page.type('#email', 'user@example.com');
7
await page.type('#password', 'password123');
8
await page.click('#login-btn');
9
await page.waitForNavigation();
10

11
// 截图记录结果
12
await page.screenshot({ path: 'login-result.png', fullPage: true });
13

14
// 检查是否登录成功
15
const isLoggedIn = await page.$('.user-dashboard') !== null;
16
console.log('Login success:', isLoggedIn);

1
# Agent 测试响应式设计
2
from playwright.async_api import async_playwright
3

4
async with async_playwright() as p:
5
    browser = await p.chromium.launch()
6

7
    # 测试不同设备尺寸
8
    devices = [
9
        {'width': 375, 'height': 812, 'name': 'iPhone'},
10
        {'width': 768, 'height': 1024, 'name': 'iPad'},
11
        {'width': 1920, 'height': 1080, 'name': 'Desktop'}
12
    ]
13

14
    for device in devices:
15
        page = await browser.new_page(
16
            viewport={'width': device['width'], 'height': device['height']}
17
        )
18
        await page.goto('https://example.com')
19
        await page.screenshot(path=f"screenshot-{device['name']}.png")
20
        await page.close()

1
from selenium import webdriver
2
from selenium.webdriver.common.by import By
3
from selenium.webdriver.support.ui import WebDriverWait
4
from selenium.webdriver.support import expected_conditions as EC
5

6
driver = webdriver.Chrome()
7
driver.get("https://example.com")
8

9
# 等待元素出现并交互
10
wait = WebDriverWait(driver, 10)
11
search_box = wait.until(
12
    EC.presence_of_element_located((By.NAME, "q"))
13
)
14
search_box.send_keys("AI agent skills")
15
search_box.submit()

1
// Agent 抓取技术博客文章列表
2
const cheerio = require('cheerio');
3

4
const response = await fetch('https://tech-blog.example.com');
5
const html = await response.text();
6
const $ = cheerio.load(html);
7

8
const articles = [];
9
$('.post-card').each((i, el) => {
10
  articles.push({
11
    title: $(el).find('h2').text().trim(),
12
    url: $(el).find('a').attr('href'),
13
    summary: $(el).find('.summary').text().trim(),
14
    date: $(el).find('.date').text().trim()
15
  });
16
});
17

18
console.log(`Found ${articles.length} articles`);

1
// Agent 做视觉回归测试
2
const puppeteer = require('puppeteer');
3
const pixelmatch = require('pixelmatch');
4
const { PNG } = require('pngjs');
5
const fs = require('fs');
6

7
async function visualRegression(url, baselinePath, currentPath) {
8
  const browser = await puppeteer.launch();
9
  const page = await browser.newPage();
10
  await page.setViewport({ width: 1920, height: 1080 });
11
  await page.goto(url, { waitUntil: 'networkidle0' });
12
  await page.screenshot({ path: currentPath, fullPage: true });
13

14
  // 对比基线图
15
  const baseline = PNG.sync.read(fs.readFileSync(baselinePath));
16
  const current = PNG.sync.read(fs.readFileSync(currentPath));
17
  const diff = new PNG({ width: baseline.width, height: baseline.height });
18

19
  const mismatch = pixelmatch(
20
    baseline.data, current.data, diff.data,
21
    baseline.width, baseline.height,
22
    { threshold: 0.1 }
23
  );
24

25
  console.log(`Pixel mismatch: ${mismatch} (${(mismatch / (baseline.width * baseline.height) * 100).toFixed(2)}%)`);
26
  return mismatch;
27
}

1
// Agent 生成月度报告 PDF
2
const puppeteer = require('puppeteer');
3

4
async function generateReport(data) {
5
  const browser = await puppeteer.launch();
6
  const page = await browser.newPage();
7

8
  // 用 HTML 模板渲染报告
9
  const html = `
10
    <html>
11
    <head>
12
      <style>
13
        body { font-family: 'Noto Sans SC', sans-serif; padding: 40px; }
14
        .header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 20px; }
15
        .metric { display: inline-block; width: 30%; text-align: center; margin: 20px 1%; }
16
        .metric .value { font-size: 48px; font-weight: bold; color: #2563eb; }
17
        .metric .label { font-size: 14px; color: #666; }
18
        table { width: 100%; border-collapse: collapse; margin-top: 30px; }
19
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
20
        th { background: #f5f5f5; }
21
      </style>
22
    </head>
23
    <body>
24
      <div class="header">
25
        <h1>月度运营报告 - ${data.month}</h1>
26
      </div>
27
      <div class="metric"><div class="value">${data.users}</div><div class="label">活跃用户</div></div>
28
      <div class="metric"><div class="value">${data.revenue}</div><div class="label">收入(万元)</div></div>
29
      <div class="metric"><div class="value">${data.growth}%</div><div class="label">增长率</div></div>
30
      <table>
31
        <tr><th>指标</th><th>本月</th><th>上月</th><th>变化</th></tr>
32
        ${data.details.map(d => `<tr><td>${d.name}</td><td>${d.current}</td><td>${d.previous}</td><td>${d.change}</td></tr>`).join('')}
33
      </table>
34
    </body>
35
    </html>
36
  `;
37

38
  await page.setContent(html, { waitUntil: 'networkidle0' });
39
  await page.pdf({
40
    path: `report-${data.month}.pdf`,
41
    format: 'A4',
42
    printBackground: true
43
  });
44
}

1
// Agent 批量填写申请表
2
async function fillApplication(page, userData) {
3
  // 基本信息
4
  await page.fill('#firstName', userData.firstName);
5
  await page.fill('#lastName', userData.lastName);
6
  await page.fill('#email', userData.email);
7
  await page.fill('#phone', userData.phone);
8

9
  // 下拉框选择
10
  await page.selectOption('#country', userData.country);
11
  await page.selectOption('#education', userData.education);
12

13
  // 日期选择
14
  await page.fill('#birthDate', userData.birthDate);
15

16
  // 文件上传
17
  await page.setInputFiles('#resume', userData.resumePath);
18

19
  // 复选框
20
  if (userData.agreeTerms) {
21
    await page.check('#agreeTerms');
22
  }
23

24
  // 提交
25
  await page.click('#submit-btn');
26
  await page.waitForSelector('.success-message');
27
}

1
// Agent 运行 Lighthouse 审计
2
const lighthouse = require('lighthouse');
3
const chromeLauncher = require('chrome-launcher');
4

5
async function runLighthouse(url) {
6
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
7
  const options = {
8
    logLevel: 'info',
9
    output: 'json',
10
    onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
11
    port: chrome.port
12
  };
13

14
  const runnerResult = await lighthouse(url, options);
15
  await chrome.kill();
16

17
  const scores = {
18
    performance: runnerResult.lhr.categories.performance.score * 100,
19
    accessibility: runnerResult.lhr.categories.accessibility.score * 100,
20
    bestPractices: runnerResult.lhr.categories['best-practices'].score * 100,
21
    seo: runnerResult.lhr.categories.seo.score * 100
22
  };
23

24
  console.log('Lighthouse Scores:', scores);
25
  return scores;
26
}

1
// Agent 运行 API 健康检查
2
async function healthCheck(endpoints) {
3
  const results = [];
4

5
  for (const endpoint of endpoints) {
6
    const start = Date.now();
7
    try {
8
      const response = await fetch(endpoint.url, {
9
        method: endpoint.method || 'GET',
10
        headers: endpoint.headers,
11
        timeout: 10000
12
      });
13

14
      results.push({
15
        url: endpoint.url,
16
        status: response.status,
17
        ok: response.ok,
18
        time: Date.now() - start,
19
        expected: endpoint.expectedStatus || 200
20
      });
21
    } catch (error) {
22
      results.push({
23
        url: endpoint.url,
24
        status: 'ERROR',
25
        ok: false,
26
        time: Date.now() - start,
27
        error: error.message
28
      });
29
    }
30
  }
31

32
  // 报告异常
33
  const failures = results.filter(r => !r.ok || r.status !== r.expected);
34
  if (failures.length > 0) {
35
    console.error('🚨 API Health Check Failures:', failures);
36
  }
37

38
  return results;
39
}

1
// Agent 自动化每日运营流程
2
async function dailyOperations() {
3
  const browser = await playwright.chromium.launch();
4
  const context = await browser.newContext();
5

6
  try {
7
    // Step 1: 登录后台
8
    const page = await context.newPage();
9
    await page.goto('https://admin.example.com/login');
10
    await page.fill('#username', process.env.ADMIN_USER);
11
    await page.fill('#password', process.env.ADMIN_PASS);
12
    await page.click('#login');
13
    await page.waitForURL('**/dashboard');
14

15
    // Step 2: 导出昨日数据
16
    await page.click('a[href="/reports"]');
17
    await page.click('#export-yesterday');
18
    const download = await page.waitForEvent('download');
19
    await download.saveAs('./data/yesterday.csv');
20

21
    // Step 3: 检查待处理订单
22
    await page.click('a[href="/orders?status=pending"]');
23
    const pendingCount = await page.locator('.order-row').count();
24
    console.log(`Pending orders: ${pendingCount}`);
25

26
    // Step 4: 截图记录
27
    await page.screenshot({ path: './screenshots/daily-dashboard.png' });
28

29
    console.log('✅ Daily operations completed');
30
  } catch (error) {
31
    console.error('❌ Daily operations failed:', error);
32
    // 截图记录错误现场
33
    const page = context.pages()[0];
34
    await page.screenshot({ path: './screenshots/error.png' });
35
  } finally {
36
    await browser.close();
37
  }
38
}