mcpField
P
puppeteer-skill

puppeteer-skill

github.com/lambdatest开发384236 次安装2 周前更新
代码仓库

关于 puppeteer-skill

puppeteer-skill 为使用 Puppeteer 的开发者提供浏览器自动化指引，包含页面交互、网络拦截、截图和 PDF 等模式，也介绍 TestMu AI 云端配置。

主要功能

  1. 01浏览器启动与页面导航
  2. 02选择器和导航等待策略
  3. 03截图与 PDF 导出
  4. 04网络请求拦截与 API 模拟
  5. 05TestMu AI 云端配置指引

适用场景

  1. 01自动访问并检查网页
  2. 02等待页面元素或导航完成
  3. 03保存整页截图或 PDF
  4. 04拦截图片请求或模拟 API

安装

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

$npx skills add https://github.com/lambdatest/agent-skills --skill puppeteer-skill

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

reference/
advanced-patterns.md
cloud-integration.md
playbook.md

详细介绍

Puppeteer 自动化技能

核心模式

基本脚本
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', '[email protected]');
    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 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
);
截图与 PDF
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.pdf({ path: 'page.pdf', format: 'A4', printBackground: true });
网络拦截
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

有关完整的设置、功能和共享功能参考，请参阅 reference/cloud-integration.md。

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))}`,
});

快速参考

任务代码
启动有头模式puppeteer.launch({ headless: false })
执行 JSawait page.evaluate(() => document.title)
提取文本await page.$eval('.el', el => el.textContent)
提取全部内容await page.$$eval('.items', els => els.map(e => e.textContent))
设置 Cookieawait page.setCookie({ name: 'token', value: 'abc' })
模拟设备await page.emulate(puppeteer.devices['iPhone 12'])

深入模式 → reference/playbook.md

§章节内容
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 项

评论

支持 Markdown