chrome-automation

Chrome 浏览器自动化

功能说明

此技能专门用于 Chrome 浏览器自动化,包括:

• 网页自动化操作
• E2E 测试
• 网页截图和 PDF 生成
• 表单自动填充
• 动态网页数据抓取
• 性能测试和监控

⚠️ 资源清理原则（强制）

所有涉及浏览器的 cron 任务完成后，必须自动关闭 Chrome 进程！

# 任务结束时必须执行
pkill -f chrome
pkill -f chromium

或在 JavaScript/TypeScript 中：

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

// 脚本结束时强制清理
const { execSync } = require('child_process');
execSync('pkill -f chrome');

原因: 避免内存泄漏和资源占用，防止 Gateway CPU 100% 过载

使用场景

• "自动化登录网站并抓取数据"
• "批量截取网页截图"
• "自动化测试购物流程"
• "监控网站性能指标"
• "自动填写表单并提交"
• "生成网页 PDF 报告"

技术栈

自动化工具

• Puppeteer:Chrome DevTools Protocol
• Playwright:跨浏览器自动化
• Selenium:经典自动化框架
• Cypress:现代 E2E 测试框架

辅助工具

• puppeteer-extra:Puppeteer 插件系统
• puppeteer-stealth:反检测插件
• chrome-launcher:Chrome 启动器

核心功能

1. 页面导航

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: false,  // 显示浏览器
  slowMo: 50        // 减慢操作速度
});

const page = await browser.newPage();

// 导航到页面
await page.goto('https://example.com', {
  waitUntil: 'networkidle2'  // 等待网络空闲
});

// 前进后退
await page.goBack();
await page.goForward();
await page.reload();

await browser.close();

2. 元素操作

// 点击元素
await page.click('#submit-button');

// 输入文本
await page.type('#username', '[email protected]');
await page.type('#password', 'password123');

// 选择下拉框
await page.select('#country', 'CN');

// 上传文件
const fileInput = await page.$('input[type="file"]');
await fileInput.uploadFile('/path/to/file.pdf');

// 等待元素
await page.waitForSelector('.result', { timeout: 5000 });

// 获取元素文本
const text = await page.$eval('.title', el => el.textContent);

// 获取多个元素
const items = await page.$$eval('.item', elements =>
  elements.map(el => el.textContent)
);

3. 表单自动化

async function fillForm(page: Page) {
  // 填写文本输入框
  await page.type('#name', '张三');
  await page.type('#email', '[email protected]');
  await page.type('#phone', '13800138000');

  // 选择单选按钮
  await page.click('input[name="gender"][value="male"]');

  // 选择复选框
  await page.click('#agree-terms');
  await page.click('#subscribe-newsletter');

  // 选择下拉框
  await page.select('#city', 'beijing');

  // 填写日期
  await page.type('#birthday', '1990-01-01');

  // 填写文本域
  await page.type('#message', '这是一条测试消息');

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

  // 等待提交完成
  await page.waitForNavigation();
}