mcpField
C
chrome

chrome

github.com/johnlindquist开发2685 次安装45 周前更新
代码仓库

关于 chrome

chrome 是使用 Puppeteer 或 Playwright 自动化浏览器的技能，涵盖页面导航与交互、截图、数据提取、测试模式、设备模拟和网络拦截。

主要功能

  1. 01使用 Puppeteer 或 Playwright 自动化
  2. 02导航页面并执行交互
  3. 03截取页面与元素截图
  4. 04填写表单并提取数据
  5. 05模拟设备并拦截网络请求

适用场景

  1. 01自动执行浏览器工作流
  2. 02测试登录和表单提交
  3. 03截取截图以进行视觉比较
  4. 04模拟或阻止网络请求

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/johnlindquist/claude --skill chrome

安装后在 Claude Code 中输入/chrome确认已加载。

详细介绍

Chrome 自动化

使用 Puppeteer 或 Playwright 自动化浏览器交互。

前置条件

# Puppeteer
npm install puppeteer

# Or Playwright
npm install playwright
npx playwright install chromium

Puppeteer 快速开始

基础脚本
// script.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

运行：node script.js

使用可见浏览器
const browser = await puppeteer.launch({
  headless: false,
  slowMo: 50,  // Slow down operations
});

Playwright 快速开始

基础脚本
// script.js
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

常见操作

导航
// Go to URL
await page.goto('https://example.com');

// Wait for navigation
await page.goto('https://example.com', { waitUntil: 'networkidle0' });

// Go back/forward
await page.goBack();
await page.goForward();

// Reload
await page.reload();
截图
// Full page
await page.screenshot({ path: 'full.png', fullPage: true });

// Specific element
const element = await page.$('#header');
await element.screenshot({ path: 'header.png' });

// With options
await page.screenshot({
  path: 'screenshot.png',
  type: 'png',
  quality: 90,  // For jpeg
  clip: { x: 0, y: 0, width: 800, height: 600 }
});
点击操作
// Click element
await page.click('#button');
await page.click('button.submit');

// Double click
await page.dblclick('#item');

// Right click
await page.click('#element', { button: 'right' });

// Click and wait for navigation
await Promise.all([
  page.waitForNavigation(),
  page.click('a.link')
]);
表单填写
// Type text
await page.type('#email', '[email protected]');

// Clear and type
await page.fill('#email', '[email protected]');  // Playwright
await page.$eval('#email', el => el.value = '');  // Puppeteer clear
await page.type('#email', '[email protected]');

// Select dropdown
await page.select('#country', 'US');

// Checkbox
await page.check('#agree');  // Playwright
await page.click('#agree');  // Puppeteer

// File upload
await page.setInputFiles('#file', '/path/to/file.pdf');  // Playwright
const input = await page.$('#file');
await input.uploadFile('/path/to/file.pdf');  // Puppeteer
等待
// Wait for selector
await page.waitForSelector('#loaded');

// Wait for text
await page.waitForFunction(() =>
  document.body.textContent.includes('Success')
);

// Wait for navigation
await page.waitForNavigation();

// Wait for network idle
await page.waitForLoadState('networkidle');  // Playwright

// Explicit wait
await page.waitForTimeout(1000);  // Not recommended for production
提取数据
// Get text content
const text = await page.textContent('#element');
const text = await page.$eval('#element', el => el.textContent);

// Get attribute
const href = await page.getAttribute('a', 'href');
const href = await page.$eval('a', el => el.href);

// Get multiple elements
const items = await page.$$eval('.item', els =>
  els.map(el => el.textContent)
);

// Get page content
const html = await page.content();
执行 JavaScript
// Run in browser context
const result = await page.evaluate(() => {
  return document.title;
});

// With arguments
const text = await page.evaluate((selector) => {
  return document.querySelector(selector).textContent;
}, '#element');

测试模式

登录流程
async function login(page, username, password) {
  await page.goto('https://app.example.com/login');
  await page.fill('#username', username);
  await page.fill('#password', password);
  await page.click('button[type="submit"]');
  await page.waitForSelector('#dashboard');
}
表单提交测试
async function testForm(page) {
  await page.goto('https://example.com/form');

  // Fill form
  await page.fill('#name', 'Test User');
  await page.fill('#email', '[email protected]');
  await page.select('#country', 'US');
  await page.check('#agree');

  // Submit
  await page.click('button[type="submit"]');

  // Verify success
  await page.waitForSelector('.success-message');
  const message = await page.textContent('.success-message');
  console.assert(message.includes('Thank you'));
}
视觉回归
// Take baseline
await page.screenshot({ path: 'baseline.png', fullPage: true });

// Later, compare
await page.screenshot({ path: 'current.png', fullPage: true });
// Use image comparison tool

设备模拟

// Puppeteer
const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);

// Playwright
const iPhone = playwright.devices['iPhone 12'];
const context = await browser.newContext({ ...iPhone });

// Manual viewport
await page.setViewportSize({ width: 375, height: 812 });

网络

// Intercept requests (Playwright)
await page.route('**/api/*', route => {
  route.fulfill({ status: 200, body: JSON.stringify({ mocked: true }) });
});

// Block resources
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

// Monitor requests
page.on('request', req => console.log(req.url()));
page.on('response', res => console.log(res.status(), res.url()));

最佳实践

  1. 使用显式等待 - 而不是超时
  2. 处理错误 - try/catch 很重要
  3. 关闭浏览器 - 始终进行清理
  4. 在 CI 中使用无头模式 - 更快，无需显示
  5. 测试选择器 - 优先使用 data-testid
  6. 失败时截图 - 更易于调试
  7. 复用上下文 - 比新建浏览器更快

评论

支持 Markdown