自動テストは現代の Web 開発に不可欠な部分になっています。 Web アプリケーションがより複雑になるにつれて、すべての機能を手動でテストすることはもはや現実的ではありません。自動テスト ツールを使用すると、開発者はユーザー操作をシミュレートするテストを作成し、アプリケーションが期待どおりに動作することを確認できます。
自動ブラウザ テスト用の最も人気のある 2 つのツールは、Puppeteer と Selenium です。どちらもブラウザを起動し、Web ページに移動し、ページ上の要素を操作し、ページのコンテンツについてアサーションを行うことができます。ただし、各ツールを特定のテスト シナリオにより適したものにする重要な違いがいくつかあります。
この包括的なガイドでは、Puppeteer と Selenium を比較して、ニーズにどちらが適切かを判断できるようにします。
操り人形師とは何ですか？
人形 は、Chrome チームによって開発された Node ライブラリです。 DevTools プロトコル経由でヘッドレス Chrome を制御するための高レベル API を提供します。
Puppeteer はデフォルトでヘッドレスで実行されますが、フル (非ヘッドレス) Chrome または Chromium を実行するように構成できます。
Puppeteer の主な機能:
- ページのスクリーンショットと PDF を生成します
- サイトをクロールしてコンテンツを抽出します
- フォームの送信、UI テスト、キーボード入力を自動化します。
- デバイスエミュレーションを設定することで応答性の高いテストを可能にします
- ブラウザのJavaScriptの実行を許可します
- ナビゲーションやコンソールログなどのブラウザイベント用のAPI
- 拡張機能のインストールをサポート
Puppeteer は、Chrome や Microsoft Edge などの Chromium ベースのブラウザーのみをサポートします。 Firefox や Safari では動作しません。
セレンは何ですか？
Selenium は、Web ブラウザを自動化するためのオープンソース ツール スイートです。 Puppeteer よりも長く存在しており、複数のブラウザ ベンダーからサポートを受けています。
Selenium は、Java、C#、Python、JavaScript、Ruby などの複数の言語をサポートしています。デスクトップ プラットフォーム上の Chrome、Firefox、Edge、Safari を自動化できます。 Selenium は、Android および iOS テスト用のモバイル ブラウザーもサポートしています。
セレンの特徴:
- クロスブラウザの互換性
- モバイルテスト機能
- 録音と再生のためのIDE
- 複数のマシンにテストを分散するためのグリッド
- JUnit、TestNG、Mocha などのさまざまなテスト ランナーとの統合
- 業界を超えたユーザーの大規模コミュニティ
Puppeteer とは異なり、Selenium ではブラウザーの JavaScript を実行したり、DevTools を直接操作したりすることはできません。
構文の比較
Puppeteer は、疑似コードのように読み取れる簡潔な API を使用します。例えば：
// Navigate to a URL
await page.goto(‘https://www.example.com‘);
// Get an element
const button = await page.$(‘#submit-button‘);
// Click the button
await button.click();Selenium はより冗長な API を使用します。
// Launch browser
WebDriver driver = new ChromeDriver();
// Navigate to URL
driver.get("https://www.example.com");
// Find element
WebElement button = driver.findElement(By.id("submit-button"));
// Click element
button.click(); Puppeteer の API はよりユーザーフレンドリーで読みやすくなりました。 async/await 構文を使用すると、コールバックのネストが軽減されます。全体として、Puppeteer に必要な定型コードは Selenium よりも少なくなります。
ブラウザの起動
ブラウザ インスタンスを起動するために、Puppeteer は以下を使用します。
const browser = await puppeteer.launch();Selenium では、特定のドライバー クラスを初期化する必要があります。
// Launch Chrome
WebDriver driver = new ChromeDriver();
// Launch Firefox
WebDriver driver = new FirefoxDriver(); Puppeteer は Chromium のみを起動しますが、Selenium は複数のブラウザをサポートします。クロスブラウザーのテストには、Selenium の方が良い選択です。
要素の位置を特定する
Puppeteer は以下を使用して要素を検索します。
// Get element by CSS selector
const el = await page.$(‘.className‘);
// Get element by XPath
const el = await page.$x(‘//xpath‘); Selenium は、WebDriver ロケーターを通じて要素を見つけます。
// Find by CSS
WebElement el = driver.findElement(By.cssSelector(".className"));
// Find by XPath
WebElement el = driver.findElement(By.xpath("//xpath"));どちらのツールも、ID、クラス、テキスト、DOM 階層などの幅広いロケーター戦略を提供します。全体として、要素の選択はどちらも簡単です。
要素との対話
ページ上の要素を操作するために、Puppeteer は以下を使用します。
// Type into an input
await page.type(‘#input‘, ‘Hello world‘);
// Click a button
await button.click();
// Select an option
await page.select(‘#dropdown‘, ‘option2‘);同等の Selenium コードは次のとおりです。
// Type text
driver.findElement(By.id("input")).sendKeys("Hello world");
// Click button
button.click();
// Select option
Select dropdown = new Select(driver.findElement(By.id("dropdown")));
dropdown.selectByVisibleText("option2");Puppeteer の API はよりコンパクトで表現力豊かに感じられます。 Selenium では、ドロップダウンの選択などの一部の操作に追加のボイラープレートが必要です。
ページナビゲーション
ページに移動するために、Puppeteer は以下を使用します。
// Navigate to URL
await page.goto(‘https://example.com‘);
// Click a link
await page.click(‘a.page2‘);
// Go back
await page.goBack();そしてセレンでは:
// Open URL
driver.get("https://example.com");
// Click link
driver.findElement(By.cssSelector("a.page2")).click();
// Go back
driver.navigate().back();ナビゲーション方法は 2 つのツール間で非常に似ています。 Puppeteer は、Selenium のネストされたドライバー コマンドに関する冗長性の一部を削除します。
JavaScriptの実行
Puppeteer の大きな利点の 1 つは、ブラウザーの JavaScript を直接実行できることです。
// Set a cookie
await page.evaluate(() => {
document.cookie = "foo=bar";
});
// Get an element‘s text
const text = await page.evaluate(el => el.textContent, element);Selenium には、JavaScript を直接実行するためのメソッドが提供されていません。ページにスクリプトを挿入するなどの回避策を使用する必要があります。
要素を待っています
Web アプリでは、JavaScript を使用してコンテンツを動的に読み込むのに時間がかかることがあります。自動テストは、要素と対話する前に、要素の準備ができるまで待つ必要があります。
Puppeteer を使用すると、待機を手動で記述できます。
// Wait for selector to be visible
await page.waitForSelector(‘.element‘);
// Wait for navigation to complete
await page.waitForNavigation();Selenium には明示的および暗黙的な待機が組み込まれています。
// Implicit wait
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
// Explicit wait
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".element")));構成可能な組み込み待機を使用すると、Selenium でのタイミングの問題の処理が容易になります。 Puppeteer では手動で待機のスクリプトを作成する必要があります。
スクリーンショットの生成
どちらのツールも、テスト中にページのスクリーンショットをキャプチャできます。
人形遣いの例:
// Take a screenshot
await page.screenshot({path: ‘page.png‘});セレンの例:
// Capture screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);スクリーンショット機能は非常に似ています。 Puppeteer の API はもう少し単純です。
PDF の作成
スクリーンショットに加えて、Puppeteer はページの PDF を生成できます。
// Generate PDF
await page.pdf({path: ‘page.pdf‘});この機能は Selenium には組み込まれていません。 Selenium を使用してページを PDF に印刷するには、カスタム ユーティリティが必要になります。
ポップアップの処理
アラート、プロンプト、ブラウザーのポップアップを処理するために、Puppeteer はページの dialog イベント：
page.on(‘dialog‘, dialog => {
console.log(dialog.message());
dialog.accept();
});Selenium は、アラート インターフェイスを使用してポップアップと対話します。
// Switch to alert
Alert alert = driver.switchTo().alert();
// Get text
String text = alert.getText();
// Accept alert
alert.accept();どちらのツールも自動化中に JS ポップアップを処理できます。 Selenium の API は、ポップアップを操作するためにより洗練されているように感じられます。
並列テスト
テストを並行して実行すると、テストの実行速度が大幅に向上します。
Puppeteer は並列テストを直接サポートしていません。別のテスト ランナーを通じて並列実行を調整する必要があります。
Selenium Grid を使用すると、テストを複数のマシンに分散して並行して実行できます。これにより、Selenium テストのスケールが容易になります。
ブラウザログ
ブラウザ ログへのアクセスは、テストのデバッグやネットワーク アクティビティの検査に役立ちます。
Puppeteer を使用すると、ブラウザ コンソールとネットワーク ログをキャプチャできます。
// Listen for console logs
page.on(‘console‘, msg => {
console.log(‘Page Log:‘, msg.text());
});
// Get network request logs
const requests = browser.on(‘request‘, request => {
request.url(); // Log URLs
});Selenium には、ブラウザのログに直接アクセスする方法がありません。コンソールまたはネットワークのログを取得するための回避策を見つける必要があります。
ユーザーエージェントシミュレーション
Web サイトがさまざまなデバイスやユーザー エージェントにどのように応答するかをテストすることは重要です。
Puppeteer を使用すると、ユーザー エージェント文字列を簡単に偽装できます。
await page.setUserAgent(‘Custom User Agent‘);Selenium では、ユーザー エージェントを直接設定することはできません。これには、ブラウザ プロファイルの構成が必要になります。
パフォーマンス監査
Puppeteer には、ページのパフォーマンスを分析するためのツールが統合されています。
// Audit performance
const metrics = await page.audit({
disableJavaScript: true // Test without JavaScript
});
// Log metrics
metrics.totalByteWeight; // Total page weightパフォーマンス監査には、Selenium を使用した追加ツールを導入する必要があります。 Puppeteer はそれを直接組み込みます。
価格比較
Puppeteer と Selenium の主な違いの 1 つは商用利用の制限です。
Puppeteer はオープンソースで無料で使用できます。制限なく商用利用できます。
Selenium もオープンソースです。ただし、公式の Selenium WebDriver バイナリは、非営利目的でのみライセンスされています。商用利用の場合は、Selenium ベンダーの BrowserStack からライセンスを取得する必要があります。
このため、ライセンス費用をかけずに自動化ソリューションを商業的に使用したいチームにとって、Puppeteer は好ましいものとなる可能性があります。
ヘッドレステスト
ヘッドレス テストとは、UI を表示せずにブラウザを実行することを指します。テスト用の軽量環境を提供します。
Puppeteer はデフォルトで Chrome をヘッドレス モードで起動するため、ヘッドレス テストに最適です。
Selenium は、次のようなオプションを使用してヘッドレスで実行するように構成することもできます。
chromeOptions.addArguments("--headless"); したがって、どちらのツールでもヘッドレス テストが可能で、Puppeteer ではそれがデフォルトのすぐに使用できるエクスペリエンスになります。
継続的インテグレーション
CI/CD の統合は、コード変更時のテスト実行を自動化するために重要です。
Puppeteer 自体は、組み込みの CI/CD 機能を提供しません。 Jenkins、CircleCI などの CI ツールに接続する必要があります。
Selenium は、Selenium-grid を介して CI/CD パイプラインとのネイティブ統合を提供します。これにより、CI インフラストラクチャ上でテストを簡単に配布できます。
モバイルテスト
どちらのツールも Web テストに重点を置いていますが、Selenium はさらにモバイル テストのサポートも提供します。
Selenium Appium プロジェクトにより、Android および iOS プラットフォーム上のネイティブ モバイル アプリの自動化が可能になります。 Puppeteer はモバイル アプリのテストをサポートしていません。
学習曲線
JavaScript と Node.js に精通した開発者にとって、Puppeteer は非常に直感的に使い始めることができます。 API 設計は DOM API の概念を厳密に反映しています。
Selenium は、Selenium 固有の WebDriver API を学習する必要があるため、学習曲線がより急になります。ただし、Java の経験は、より早く立ち上がるのに役立ちます。
全体として、Puppeteer は Web 開発のバックグラウンドを持つ人にとって、よりシンプルで簡単に習得できます。
デバッグ機能
失敗したテストのトラブルシューティングは、テスト自動化の重要な部分です。
Puppeteer を使用すると、Chrome DevTools でブレークポイントを設定して直接デバッグできるため、デバッグが簡単になります。
await page.pause(); // Pause executionSelenium にはデバッグ機能が組み込まれていません。ログ ステートメントまたは外部デバッグ ツールに依存する必要があります。
ブラウザのサポート
Puppeteer の主な制限は、Chromium ベースのブラウザのみをサポートしていることです。したがって、Firefox や Safari でのテストには使用できません。
Selenium は Chrome、Firefox、Edge、Safari をサポートし、真のクロスブラウザー テストを可能にします。ブラウザー全体でのテスト カバレッジを優先する場合は、Selenium がより良い選択となる可能性があります。
オープンソースコミュニティ
Selenium は 10 年以上前から存在しており、大規模なコミュニティが背後にあります。 Selenium に特化したカンファレンス、ユーザー グループ、活発な Q&A フォーラムがあります。
新しいプロジェクトである Puppeteer のコミュニティははるかに小さいです。しかし、開発者の人間工学とGoogleが推進する勢いにより、時間の経過とともに追いつくことができるかもしれません。
Puppeteer と Selenium を使用する必要がありますか?
2 つのツールを比較しましたが、Puppeteer と Selenium のどちらを使用するかをどのように決定しますか?
考慮すべきいくつかの重要な要素を次に示します。
ブラウザサポート – マルチブラウザのテストが必要な場合は、Selenium が最適なオプションです。 Chrome のみのテストには、Puppeteer が適しています。
モバイルテスト – Selenium はモバイル Web およびネイティブ アプリのテストをサポートします。 Puppeteer はデスクトップのみです。
デバッギング – Puppeteer の組み込み DevTools 統合により、デバッグが簡単になります。
クロスプラットフォーム – Java および C# のテスト自動化については、Selenium のサポートが優れています。 Puppeteer は JS/Node に重点を置いています。
アプリケーションタイプ – Puppeteer は、SPA や小規模な Web アプリのテストに適しています。 Selenium は、広範なバックエンド統合により、大規模なエンタープライズ アプリに対してより適切に拡張できます。
商用利用 – ライセンス制限なしで自動化を商業的に使用したいチームは、Puppeteer の恩恵を受けることができます。
プログラミングの快適さ – DevOps および JavaScript のバックグラウンドを持つテスターにとって、Puppeteer の学習曲線は低い可能性があります。 Java ユーザーは Selenium をより迅速に使い始めることができます。
レガシー投資 – すでにかなりの数の Selenium テストがある場合は、Puppeteer を最初からやり直すのではなく、それらのテストを強化し続けることが合理的である可能性があります。
多くのテスト自動化のニーズに対して、両方のツールで作業を完了できます。それぞれに独自の強みがあり、特定のユースケースに適しています。この詳細な比較により、Puppeteer と Selenium のどちらがニーズに適しているかが明確になることを願っています。
