puppeteer-skill
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePuppeteer Automation Skill
Puppeteer自动化技能
Core Patterns
核心模式
Basic Script
基础脚本
javascript
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 720 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.type('#username', 'user@test.com');
await page.type('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForNavigation({ waitUntil: 'networkidle0' });
const title = await page.title();
console.log('Title:', title);
await browser.close();
})();javascript
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 720 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.type('#username', 'user@test.com');
await page.type('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForNavigation({ waitUntil: 'networkidle0' });
const title = await page.title();
console.log('Title:', title);
await browser.close();
})();Wait Strategies
等待策略
javascript
// Wait for selector
await page.waitForSelector('.result', { visible: true, timeout: 10000 });
// Wait for navigation
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }),
page.click('a.nav-link'),
]);
// Wait for function
await page.waitForFunction('document.querySelector(".count").innerText === "5"');
// Wait for network request
const response = await page.waitForResponse(resp =>
resp.url().includes('/api/data') && resp.status() === 200
);javascript
// Wait for selector
await page.waitForSelector('.result', { visible: true, timeout: 10000 });
// Wait for navigation
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }),
page.click('a.nav-link'),
]);
// Wait for function
await page.waitForFunction('document.querySelector(".count").innerText === "5"');
// Wait for network request
const response = await page.waitForResponse(resp =>
resp.url().includes('/api/data') && resp.status() === 200
);Screenshot & PDF
截图与PDF生成
javascript
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.pdf({ path: 'page.pdf', format: 'A4', printBackground: true });javascript
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.pdf({ path: 'page.pdf', format: 'A4', printBackground: true });Network Interception
网络拦截
javascript
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'image') request.abort();
else request.continue();
});
// Mock API
page.on('request', request => {
if (request.url().includes('/api/data')) {
request.respond({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ items: [] }),
});
} else request.continue();
});javascript
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'image') request.abort();
else request.continue();
});
// Mock API
page.on('request', request => {
if (request.url().includes('/api/data')) {
request.respond({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ items: [] }),
});
} else request.continue();
});TestMu AI Cloud
TestMu AI云服务
For full setup, capabilities, and shared capability reference, see reference/cloud-integration.md.
javascript
const capabilities = {
browserName: 'Chrome', browserVersion: 'latest',
'LT:Options': {
platform: 'Windows 11', build: 'Puppeteer Build',
user: process.env.LT_USERNAME, accessKey: process.env.LT_ACCESS_KEY,
},
};
const browser = await puppeteer.connect({
browserWSEndpoint: `wss://cdp.lambdatest.com/puppeteer?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`,
});如需完整设置、功能说明及共享能力参考,请查看reference/cloud-integration.md。
javascript
const capabilities = {
browserName: 'Chrome', browserVersion: 'latest',
'LT:Options': {
platform: 'Windows 11', build: 'Puppeteer Build',
user: process.env.LT_USERNAME, accessKey: process.env.LT_ACCESS_KEY,
},
};
const browser = await puppeteer.connect({
browserWSEndpoint: `wss://cdp.lambdatest.com/puppeteer?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`,
});Quick Reference
快速参考
| Task | Code |
|---|---|
| Launch headed | |
| Evaluate JS | |
| Extract text | |
| Extract all | |
| Set cookie | |
| Emulate device | |
| 任务 | 代码 |
|---|---|
| 启动有界面浏览器 | |
| 执行JavaScript | |
| 提取文本 | |
| 批量提取文本 | |
| 设置Cookie | |
| 模拟设备 | |
Deep Patterns → reference/playbook.md
reference/playbook.md进阶模式 → reference/playbook.md
reference/playbook.md| § | Section | Lines |
|---|---|---|
| 1 | Production Setup & Configuration | Launch options, Jest integration |
| 2 | Page Object Pattern | BasePage, LoginPage, DashboardPage |
| 3 | Network Interception & Mocking | Request mock, response capture |
| 4 | Wait Strategies | DOM, network, custom conditions |
| 5 | Screenshots, PDF & Media | Full page, clip, PDF, video |
| 6 | Authentication & Cookies | API login, session save/restore |
| 7 | iFrame, Dialog & File Operations | Upload, download, dialogs |
| 8 | Performance & Metrics | Web Vitals, Lighthouse, coverage |
| 9 | Accessibility Testing | axe-core integration |
| 10 | CI/CD Integration | GitHub Actions, Docker |
| 11 | Debugging Quick-Reference | 11 common problems |
| 12 | Best Practices Checklist | 13 items |
| § | 章节 | 行数 |
|---|---|---|
| 1 | 生产环境设置与配置 | 启动选项、Jest集成 |
| 2 | 页面对象模式 | BasePage、LoginPage、DashboardPage |
| 3 | 网络拦截与模拟 | 请求模拟、响应捕获 |
| 4 | 等待策略 | DOM、网络、自定义条件 |
| 5 | 截图、PDF与媒体 | 全页截图、裁剪、PDF、视频 |
| 6 | 认证与Cookie | API登录、会话保存/恢复 |
| 7 | iframe、对话框与文件操作 | 上传、下载、对话框 |
| 8 | 性能与指标 | Web Vitals、Lighthouse、代码覆盖率 |
| 9 | 可访问性测试 | axe-core集成 |
| 10 | CI/CD集成 | GitHub Actions、Docker |
| 11 | 调试快速参考 | 11个常见问题 |
| 12 | 最佳实践清单 | 13项内容 |