puppeteer-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Puppeteer 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

快速参考

TaskCode
Launch headed
puppeteer.launch({ headless: false })
Evaluate JS
await page.evaluate(() => document.title)
Extract text
await page.$eval('.el', el => el.textContent)
Extract all
await page.$$eval('.items', els => els.map(e => e.textContent))
Set cookie
await page.setCookie({ name: 'token', value: 'abc' })
Emulate device
await page.emulate(puppeteer.devices['iPhone 12'])
任务代码
启动有界面浏览器
puppeteer.launch({ headless: false })
执行JavaScript
await page.evaluate(() => document.title)
提取文本
await page.$eval('.el', el => el.textContent)
批量提取文本
await page.$$eval('.items', els => els.map(e => e.textContent))
设置Cookie
await page.setCookie({ name: 'token', value: 'abc' })
模拟设备
await page.emulate(puppeteer.devices['iPhone 12'])

Deep Patterns →
reference/playbook.md

进阶模式 →
reference/playbook.md

§SectionLines
1Production Setup & ConfigurationLaunch options, Jest integration
2Page Object PatternBasePage, LoginPage, DashboardPage
3Network Interception & MockingRequest mock, response capture
4Wait StrategiesDOM, network, custom conditions
5Screenshots, PDF & MediaFull page, clip, PDF, video
6Authentication & CookiesAPI login, session save/restore
7iFrame, Dialog & File OperationsUpload, download, dialogs
8Performance & MetricsWeb Vitals, Lighthouse, coverage
9Accessibility Testingaxe-core integration
10CI/CD IntegrationGitHub Actions, Docker
11Debugging Quick-Reference11 common problems
12Best Practices Checklist13 items
§章节行数
1生产环境设置与配置启动选项、Jest集成
2页面对象模式BasePage、LoginPage、DashboardPage
3网络拦截与模拟请求模拟、响应捕获
4等待策略DOM、网络、自定义条件
5截图、PDF与媒体全页截图、裁剪、PDF、视频
6认证与CookieAPI登录、会话保存/恢复
7iframe、对话框与文件操作上传、下载、对话框
8性能与指标Web Vitals、Lighthouse、代码覆盖率
9可访问性测试axe-core集成
10CI/CD集成GitHub Actions、Docker
11调试快速参考11个常见问题
12最佳实践清单13项内容