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. 01Webページの訪問と確認の自動化
  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 })
JS を評価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'])

詳細なパターン → 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 対応