PuppeteerとEdgeを使ったテスト自動化：完全ガイド

エンドツーエンドのテストを自動化 Microsoft Edge Puppeteer なら、今日では安全な選択です。Edge は Chromium をベースにしており、Puppeteer は同じ言語 (CDP) を話すため、きめ細かなブラウザ制御による高速で信頼性の高いテストにぴったり適合します。

このガイドでは、細かい点まで細かく説明します 必要なものがすべて揃っています: インストール、puppeteer と puppeteer-core の違い、インターフェース付きとインターフェースなしでの Edge の起動、実行ファイルの検出、コード例 (Mocha/Chai、ページ オブジェクト モデル、フォーム、スクリーンショット)、 トリック デバッグ、CI/CD 統合、エコシステム ツール (DevTools Protocol、Playwright、WebDriver、webhint、Source Testing)、および Puppeteer‑Sharp や Dart パッケージなどのラッパーに関する注意事項。

Puppeteer とは何ですか? なぜ Microsoft Edge に適合するのですか?

PuppeteerはNode.jsライブラリです Chrome DevTools Protocol (CDP) を使用して Chromium ベースのブラウザ（Chrome および Edge）を制御するツールです。デフォルトではヘッドレスモード（UI なし）で起動しますが、ウィンドウを表示してライブ実行を確認することもできます。

エッジとパペティアは協力して働く EdgeはChromium基盤を共有しているためです。そのため、puppeteer-coreを使用すると、既存のMicrosoft Edgeをターゲットにすることで、その実世界エンジンを活用し、既にEdgeがインストールされている場合は追加のChromiumをダウンロードする必要がなくなります。

日常的に何に使いますか？ GUI テスト、動的コンテンツ スクレイピング、パフォーマンス メトリック、PDF/スクリーンショット生成、視覚的な回帰検証など、すべて高レベルで非常に安定した API で実現します。

インストール: puppeteer と puppeteer-core

2種類のフレーバーがあります これらは区別する必要があります: puppeteer (Chromium をダウンロードするフル パッケージ) と puppeteer-core (軽量、ブラウザーをダウンロードせず、Edge などの既存の実行可能ファイルに接続する)。

Edgeの推奨インストール すでにブラウザをお持ちの場合: puppeteer-core を npm または yarn で使用して保存します。 ダウンロード ローカルエッジで直接作業できます。

コマンド 迅速なインストール コアの場合: npm i puppeteer-core または yarn add puppeteer-core、Node が更新されていることを確認します (古いガイドでは v8.9+ と v7.6 以降の async/await サポートについて言及されていますが、現在は v14+ が推奨されています)。

Puppeteer-core を使って Microsoft Edge をステップバイステップで起動する

典型的なシーケンス ブラウザインスタンスの作成、新しいページの開き方、URLへの移動、そしてアクション（クリック、入力、キャプチャ）の実行といった操作です。Edgeでは、適切な実行ファイルを指定するだけで済みます。

最小限の機能例 Edgeを起動し、ページにアクセスしてスクリーンショットを保存します。プログラムでパスを指定する場合は、パスを置き換えてください（次のセクションを参照）。

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
    headless: true
  });
  const page = await browser.newPage();
  await page.goto('https://www.microsoft.com/edge/download/insider');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

macOSを使用している場合、または Linux、executablePath をシステム上の Edge の場所に設定します (たとえば、macOS Canary では /Applications/Microsoft\ Edge\ Canary.app/Contents/MacOS/Microsoft\ Edge\ Canary になります)。

Edge 実行可能パスを見つける (手動およびプログラムによる)

簡単な手動方法: Edge アドレス バーに edge://version と入力し、そのページに表示される実行可能パスをコピーします。

Nodeでのプログラム的な方法: edge-paths パッケージを使用して、各 OS 上の正しいパスを取得し、特定の値のハードコーディングを回避します。

const edgePaths = require('edge-paths');
const EDGE_PATH = edgePaths.getEdgePath();

// Luego úsalo en el launch
const puppeteer = require('puppeteer-core');
(async () => {
  const browser = await puppeteer.launch({ executablePath: EDGE_PATH });
  const page = await browser.newPage();
  await page.goto('https://www.microsoft.com/edge/download/insider');
  await page.screenshot({ path: 'edge-insider.png' });
  await browser.close();
})();

このアプローチの利点 クロスプラットフォーム: パイプラインやチームは手動でパスを編集する必要はありません Windows、macOS または Linux。

実行モード: ヘッドレスおよびインターフェース

ヘッドレスはより速く、より軽いCI/CDに最適です。ヘッドフルUIを切り替えて各ステップで何が起こっているかを確認したり、slowMoを有効にしてインタラクションをデバッグしたりできます。

最新バージョンの新機能: Puppeteer は、headless: 'shell' を設定することで chrome-headless-shell に基づくヘッドレス モードを使用でき、特定の環境でのパフォーマンスが向上します。

const browser = await puppeteer.launch({
  executablePath: EDGE_PATH,
  headless: 'shell', // o true/false según necesites
  args: ['--no-sandbox'] // útil en contenedores
});

互換性に留意する: 印刷などの一部の機能は PDF 特定のバージョンでは真のヘッドレスが必要になる場合があります。パイプラインを確認してください。

Edgeの関連ツールのエコシステム

• DevToolsプロトコル: Puppeteerの基盤です。ChromiumとAPI互換性を保ちながら、Microsoft Edgeを含むブラウザのインス​​トルメント、検査、デバッグ、プロファイリングを可能にします。
• オリジントライアル: 実験的な API を実際のサイトで一定期間評価し、標準チームやブラウザ エンジニアにフィードバックを提供するメカニズム。
• 劇作家: 単一の信頼性と高速性を備えたAPIを介してマルチブラウザをサポートする高水準の代替手段。Edgeにも対応しています。FirefoxとWebKitを並行してカバーする必要がある場合に便利です。
• webdriver: 現実世界のユーザーインタラクション（ウィンドウ、タブ、OSイベント）をシミュレートすることでブラウザを自動化するための標準規格。クロスブラウザおよびクロスランゲージのカバレッジを求める場合に有利です。
• VS Code の webhint とその拡張機能: 一般的なアクセシビリティ、パフォーマンス、クロスブラウザ互換性、PWA、セキュリティの問題を検出し、ワークフローに統合できるベスト プラクティス リンティング。

Puppeteer vs Selenium: それぞれを選ぶべきタイミング

パペッティアはスピードとコントロールに優れています Chromium ブラウザ上で、JS/Node チーム向けのシンプルな API と高いアクション精度を備え、ヘッドレス テストや高度なスクレイピングに最適です。

セレンは広々とした空間をもたらす （ブラウザと言語）：Chrome、Firefox、Safari、Edgeで検証したい場合、またはチームでJava、C#、 Python または Ruby の場合でも、Selenium のカバレッジとエコシステムは保証されたままです。

Edge で具体的にはどうですか? Edge/Chromium のみをターゲットとしている場合、Puppeteer は簡単で高速、かつ非常に安定しています。互換性マトリックスでより多くのブラウザーが必要な場合は、Selenium または Playwright を検討してください。

Mocha/Chaiとページオブジェクトモデルを使ったテストのベストプラクティス

テストランナーとしてのMocha アサーション ライブラリとしての Chai は、Puppeteer に最適です。beforeEach/afterEach は、ブラウザーを開いたり閉じたりして、テストを分離するのに役立ちます。

ページ オブジェクト モデル (POM) プロジェクトをページごとにクラス構造化し、セレクターとアクションをカプセル化します。これにより、テストの保守性、再利用性、可読性が向上します。

// pages/HomePage.js
class HomePage {
  constructor(page) { this.page = page; }
  async title() { return this.page.title(); }
  async search(word) {
    await this.page.type('input[id=search_form_input_homepage]', word);
    await this.page.click('input[type="submit"]');
  }
}
module.exports = HomePage;

// pages/ResultsPage.js
class ResultsPage {
  constructor(page) { this.page = page; }
  async linksCount() {
    await this.page.waitForSelector('h2 a');
    return await this.page.$$eval('h2 a', as => as.length);
  }
}
module.exports = ResultsPage;

DuckDuckGoを使ったサンプルテスト タイトルが検証され、検索によって結果が生成され、POM パターンが実際に動作していることが示されます。

const puppeteer = require('puppeteer');
const { expect } = require('chai');
const HomePage = require('./pages/HomePage');
const ResultsPage = require('./pages/ResultsPage');

describe('Búsqueda en DuckDuckGo con POM', () => {
  let browser, page;
  beforeEach(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
    await page.goto('https://duckduckgo.com');
  });
  afterEach(async () => { await browser.close(); });

  it('muestra el título esperado', async () => {
    const home = new HomePage(page);
    expect(await home.title()).to.include('DuckDuckGo');
  });

  it('devuelve resultados al buscar', async () => {
    const home = new HomePage(page);
    await home.search('puppeteer');
    const results = new ResultsPage(page);
    expect(await results.linksCount()).to.be.greaterThan(0);
  });
});

実用的なヒント- DOM が変更されたときのリファクタリングを容易にするために、セレクターを POM クラスに集中管理し、テスト内での重複を回避します。

フォーム、キャプチャ、PDFの自動化

入力してボタンを押し、メッセージを確認します これが基本です。重要なステップでスクリーンショットを撮り、DOMテキストを検証してフロー全体を確認できます。

Angular SPAにインスパイアされた例 フォーム検証、ナビゲーション、画面間のスクリーンショットを備えています。

await page.goto('https://angular-6-registration-login-example.stackblitz.io/register');
await page.click('a.btn.btn-link'); // Cancel
await page.click('a.btn.btn-link'); // Register
await page.click('button.btn.btn-primary'); // Validaciones vacías
await page.screenshot({ path: 'form-feedback.png' });

await page.type('input[formcontrolname="firstName"]', 'Monitor');
await page.type('input[formcontrolname="lastName"]', 'Pruebas');
await page.type('input[formcontrolname="username"]', 'pruebas');
await page.type('input[formcontrolname="password"]', 'MISO4208');
await page.click('button.btn.btn-primary');
await page.waitForSelector('div.alert.alert-success');

await page.type('input[formcontrolname="username"]', 'pruebas');
await page.type('input[formcontrolname="password"]', 'MISO4208');
await page.click('button.btn.btn-primary');
await page.waitForSelector('h1');
await page.screenshot({ path: 'after-login.png' });

PDFの生成 これは page.pdf と直接連携しており、パイプライン内の特定のビューのレポートや視覚的な証明に役立ちます。

デバッグとパフォーマンス：時間節約のコツ

waitForSelectorを使用する DOMと同期し、不規則なスリープを回避します。読み込みエラーや404/500エラーを診断するためのログとネットワークリスナーを追加します。

page.on('requestfailed', req => {
  console.error('Fallo de solicitud:', req.url(), req.failure()?.errorText);
});

await page.waitForSelector('#mi-elemento', { timeout: 10000 });

ビジュアルデバッグ: ステップごとの手順については、 headless: false と slowMo を切り替えてください。最新のヘッドレスの場合は、 headless: 'shell' を試して、CI の安定性とパフォーマンスを向上させてください。

不要なリソースをブロックする (画像、フォント) DOM/テキストのみを重視する場合は、電力消費を削減し、スクレイピング テストを高速化します。

CI/CD への統合とコンテナでの実行

CIではheadlessとargsを使うと便利です 環境内で –no-sandbox として ルート またはコンテナ。Node.jsを最新の状態に保ち、システムのChromium/Edgeを再利用して、ビルドごとにダウンロードを回避することを検討してください。

効率的なパイプラインのための戦略: スイートを並列化し、node_modules とブラウザ フォルダーをキャッシュし、クイック スモーク テストをより重いエンドツーエンド テストから分離します。

クラウドサービス BrowserStack タイプのランナーは、クロスブラウザ マトリックスに役立ちます。純粋な Edge/Chromium の場合、Linux ランナー上の Puppeteer は高速で安定しています。

テスト中の監視とメトリクス

可観測性が必要な場合ブラウザのパフォーマンス メトリック (DOM ノード、レイアウトとスタイルの再計算時間、スクリプト/タスクの実行時間、JS ヒープ、HTTP コード) を収集するモジュールを統合し、APM プラットフォームに送信します。

ウェブヒントやパフォーマンスなどのツール DevTools では、テストを断続的に中断する可能性のあるボトルネック、最適化の機会、互換性の問題を検出するのに役立ちます。

Nodeを超えて：ラッパーと拡張互換性

操り人形師シャープ (C#) は Chromium ベースであるため Edge との高い互換性が実証されており、実際の経験では、ほとんどのテストは最小限の調整で合格することが分かっています。

ダーツパック も存在し、そのエコシステムで作業する場合に便利です。使い慣れた API を使用してブラウザを起動し、ナビゲートし、アクションを自動化できます。

互換性の拡大: Puppeteer の最近のバージョンでは、Firefox などの他のブラウザーのサポートが追加され、WebDriver BiDi などの標準に移行し、CDP と従来の WebDriver の最高の機能を組み合わせました。

エッジテストのためのその他のツールとアプローチ

劇作家 単一の API によるクロスブラウザ自動化を提供します。Edge に加えて Firefox/WebKit が必要な場合でも、最新の堅牢な構文により手間が省けます。

webdriver これは多言語ビジネス シナリオの鍵であり、ウィンドウ管理とユーザー イベントの利点を備え、既存のフレームワークへの強力な統合を提供します。

DevToolsプロトコルを直接非常にきめ細かな計測 (トレース、高度なネットワーク インターセプション、カバレッジ) が必要な場合は、CDP と Puppeteer を組み合わせて低レベルの診断を行うことができます。

Edgeを使った便利なレシピ：ゼロから価値へ

フルサイズのスクリーンショット 重要なページからプル リクエストの UI の変更を確認したり、視覚的な回帰テストを実行したりできます。

await page.goto('https://tu-sitio');
await page.screenshot({ path: 'full.png', fullPage: true });

スマートな待ち時間 カスケード リソースをロードする負荷の高い SPA アプリケーションのために、ブラウジングとネットワークのアイドル状態を組み合わせます。

await page.goto('https://app.tu-sitio', { waitUntil: 'networkidle0' });

動的データ抽出 $$eval と assess を使用して、DOM をバックエンドで使用できるデータ構造に変換します。

const items = await page.$$eval('.card', cs => cs.map(c => ({
  title: c.querySelector('h2')?.textContent?.trim() || '',
  link: c.querySelector('a')?.href || ''
})));

堅牢なエラー制御 try/catchと ログ 断続的な障害を理解し、不安定さを軽減するために強化されました。

try {
  await page.waitForSelector('#checkout', { timeout: 8000 });
} catch (e) {
  console.error('Elemento checkout no apareció a tiempo');
  await page.screenshot({ path: 'timeout-checkout.png' });
  throw e;
}

このツアーであなたは準備が整います 理論から価値へ: 摩擦を最小限に抑えながら、Microsoft Edge で信頼性が高く、高速で、保守可能なテストを実行します。