Playwright vs. Cypress: 最適なテスト フレームワークの選択 [2023]

アプリケーションを構築する場合、テストはソフトウェア開発サイクルの重要な段階です。テストにより、開発者はソフトウェアが要件をどの程度満たしているかを判断し、ソフトウェアのバグや脆弱性を特定して対処し、一般にソフトウェアの品質を向上させて確認することができます。

適切なテストを行わないと、ユーザーの要件をすべて満たしておらず、悪意のある攻撃者によって悪用される可能性のあるバグや脆弱性が存在する低品質のソフトウェアがリリースされる可能性があります。

ソフトウェアのテストは重要ですが、実行するのは簡単ではありません。ソフトウェアのテスト、特に Web アプリケーションのテストを手動で行うと、複雑でコストがかかり、時間がかかり、苦痛を伴うプロセスになる可能性があります。

Web アプリケーションをテストするときは、対象となるユーザーが行うことをシミュレートする必要があります。したがって、アカウントの作成、ログイン、Web アプリケーションのさまざまな要素の操作に至るまで、ユーザーが実行できるすべてのアクションを実行する必要があります。

これを手動で行うと、バグが見落とされたり、テストが包括的に行われなかったりする可能性があるため、退屈で時間がかかり、非常に非効率的になる可能性があります。これには、最新の Web ブラウザーで Web アプリケーションをテストするプロセスを自動化する Playwright や Cypress などのツールが必要になります。

劇作家の紹介

Playwright は 、Web アプリケーションの自動化とエンドツーエンドのテストのためのオープンソースのクロスブラウザー フレームワークです。自動化とは、ソフトウェアを使用して、アカウントの作成、ログイン、フォームへの入力、ボタンのクリックなどの一般的な Web アクションを自動化することを指します。自動化により、ソフトウェアは人間のユーザーと同じようにアプリケーションを体験できるようになります。

エンドツーエンド テストは、アプリケーションの最初から最後までの完全なフローを評価および検証する、徹底的かつ包括的なテスト戦略です。

Playwright は Microsoft によって開発および保守されており、単一の API を使用して、Chromium、Firefox、および WebKit ベースの Web ブラウザー全体で自動化とテストを行うことができます。

Chromium はオープンソースのコード ベースであり、他のブラウザの構築に使用される無料のブラウザです。 Chrome、Microsoft Edge、Opera、Samsung Internet などのブラウザは、Chromium コードに基づいています。一方、WebKit は、Safari Web ブラウザで使用されるブラウザ エンジンです。 Playwright を使用すると、単一の API を使用して、これらすべての異なるブラウザーでのテストと自動化が可能になります。

Playwright を使用すると、複数のオリジン、タブ、ユーザーにまたがるシナリオをテストできます。また、さまざまなユーザー向けにさまざまなコンテキストを持つシナリオを作成し、サーバーに対して実行することもできます。 Playwright には、不安定なテストを回避するのに役立つ機能もあります。つまり、テストやコードを変更しなくても、テストでは不合格と合格の結果が得られます。

何よりも、Playwright には、DOM スナップショットやテスト実行スクリーンキャストなどの情報をキャプチャする Trace Viewer などの強力なツールが付属しており、テストの失敗を調査できます。

また、アクションを記録するだけでテストを生成できる Codegen と、テストの実行をさらに検査できる Playwright Inspector も付属しています。

サイプレスの紹介

Cypress は、Web ブラウザ上で実行されるものを確実にテストするための、技術スタックに依存しないオープンソースのツールです。 Cypress を使用すると、テストをセットアップ、作成、実行、デバッグできます。

さらに、エンドツーエンド テスト、単体テスト、統合テスト、コンポーネント テストなど、あらゆるタイプのテストを作成できます。 Web アプリケーションの作成にどのようなプログラミング言語を使用したかに関係なく、ブラウザ上で実行できるものであれば、Cypress は確実にテストできます。

Cypress では、テストの実行時にスナップショットを取得するため、テスト全体をタイムトラベルできます。これにより、各ステップで何が起こったかを確認できます。さらに、Cypress は、共通回線インターフェイスからの実行時に、失敗のスクリーンショットとテスト スイート全体のビデオを自動的に撮影します。

Cypress を使用すると、テストの実行時にネットワーク トラフィックを制御およびスタブできることに加えて、サーバーの応答や関数の動作を検証および制御することもできます。さらに言えば、Cypress は一貫したテスト結果を提供し、読み取り可能なエラーとスタック トレースを作成するため、アプリケーションのデバッグを簡単にします。

テスト自動化ツール: 利点

Playwright や Cypress などの Web テストおよび自動化ツールを使用する利点には、次のようなものがあります。

包括的なテスト範囲

Playwright や Cypress などのツールを使用すると、Web アプリケーションに対して非常に包括的なテストを実行できます。自動テスト ツールを使用すると、さまざまなシナリオ、コンテキスト、構成、ブラウザー、および条件にわたってアプリケーションで多数のテストを実行できます。

多くの場合、テスト カバレッジが非常に低い人間による手動テストとは異なり、自動化およびテスト ツールを使用すると、アプリケーションのテスト カバレッジがはるかに高くなります。さらに、アプリケーションでさまざまなテストを実行できるようになります。その結果、より適切にテストされた、より高品質な Web アプリケーションが作成されます。

Web アプリケーションのテストをより簡単に

Web テストおよび自動化ツールの主なセールス ポイントは、テストをより簡単に、より楽しい体験にできることです。手動テストは、特にさまざまなブラウザーや条件でアプリケーションを徹底的にテストする場合、非常に困難です。 Playwright や Cypress などのツールを使用すると、Web アプリケーションのテスト プロセスがはるかに簡単になり、

バグの早期発見

自動化ツールは、Web アプリケーションのバグを検出するのに非常に優れています。テスト ツールは、開発者が見逃す可能性のあるバグやエラーを検出できます。さらに、読み取り可能なスタック トレースとエラー メッセージを生成し、Web アプリケーションでエラーが発生した場所のスナップショットを取得することにより、デバッグ プロセスが容易になります。

より迅速かつ正確なテスト

アプリケーションを適切にテストするには、アプリケーションの対象ユーザーが実行できるすべてのアクションを実行し、それをさまざまな Web ブラウザーで複製する必要があります。これを手動で行うと、非常に時間がかかるプロセスになる可能性があります。ただし、Playwright や Cypress などのツールを使用すると、アプリケーションのテストをより迅速かつ正確に行うことができるため、アプリケーションのデプロイにかかる時間を短縮できます。

より優れたテストレポートと分析

自動テスト ツールは、テストの詳細なレポートを生成します。これにより、開発チームとテスト チームは、テスト プロセスを簡単に追跡し、さまざまなシナリオでアプリケーションがどのように動作するかを確認し、パターンを特定し、意思決定プロセスをサポートするレポートを取得することができます。このようなレポートと分析は、アプリケーション内の改善が必要な領域を特定するためにも使用できます。

劇作家とサイプレスの仕組み

Web テストおよび自動化フレームワークである Playwright と Cypress は、Web アプリケーションとのユーザー操作をシミュレートすることで、アプリケーションが期待どおりに動作し、正しい情報が表示され、ユーザーの要件を満たしていることを検証します。

これを行うために、開発者とテスターはツールを使用して、Web アプリケーションとのユーザー操作をシミュレートするスクリプトを作成し、ユーザーが実行できるアクションを自動化します。たとえば、ブラウザを開いたり、特定の URL に移動したり、アプリケーションにログインしたり、フォームに入力したり、ボタンをクリックしたり、Web アプリケーションで使用できるさまざまなアクションを実行したりできるようにするスクリプトを作成できます。

作成するスクリプトによって、アプリケーションで実行するテストの種類が決まります。 Cypress などのツールを使用すると、エンドツーエンド テスト、単体テスト、コンポーネント テスト、統合テストなどのさまざまなテストを実行できます。

サイプレス テスト スクリプトのサンプルを以下に示します。

 describe('Example Test Suite', () => {
  it('Should visit example.com and interact with the page', () => {
    cy.visit('https://example.com');

    // Interact with elements on the page
    cy.get('input[type="text"]').type('Hello World!');
    cy.get('button[type="submit"]').click();

    // Verify behaviour is as expected
    cy.title().should('eq', 'Example Domain');
  });
});

Playwright テスト スクリプトのサンプルを以下に示します。

 const { chromium } = require('playwright');

(async () => {
  // Open the chromium browser
  const browser = await chromium.launch();

  // Create a page
  const page = await browser.newPage();

  // Open and access a URL
  await page.goto('https://example.com');

  // Work with elements on the page
  await page.fill('input[type="text"]', 'Hello World!');
  await page.click('button[type="submit"]');

  // Confirm if behaviours is as expected
  const title = await page.title();
  expect(title).toBe('Example Domain');

  // Close the browser
  await browser.close();
})();

Web アプリケーション上の要素を操作するために、テスト ツールには、Web アプリケーション上のボタン、リンク、入力フィールドなどの特定の要素を検索する方法を記述できるセレクターが用意されています。

要素を特定できたら、テスト ツールは、アサーションを作成し、Web アプリケーションのさまざまなコンポーネントが期待どおりに動作しているかどうかを判断できるツールを提供します。

Playwright と Cypress には、テストを記録してスナップショットを撮る機能も付いています。これにより、タイムトラベルしてテストの各段階で何が起こったのかを正確に確認できます。

最後に、テストおよび自動化ツールは、テスト対象のアプリケーションの問題の特定、デバッグ、およびテスト カバレッジの追跡に役立つ詳細なテスト結果、ログ、レポートを提供します。

劇作家 vs. サイプレス

Playwright と Cypress はどちらも非常に強力なテスト自動化ツールです。ただし、提供する機能の点では若干異なります。これらの各ツールが提供する機能の比較は次のとおりです。

特徴	ヒノキ	劇作家
テスト言語	JavaScript は、テストの作成に使用される主な言語です。アプリケーションがブラウザ上で実行できる限り、任意の言語またはフレームワークを使用して作成されたアプリケーションをテストできます	TypeScript、JavaScript、Python、.NET、Java を使用したテストの作成をサポートします。
ブラウザのサポート	Firefox および Chrome ファミリ ブラウザでのみテストをサポートします	Firefox、Chrome ファミリ ブラウザ、WebKit ベースのブラウザでのテストをサポート
マルチタブのサポート	複数のブラウザタブにわたるテストはサポートされません	複数のブラウザタブにまたがるテストシナリオを実行できます。
マルチブラウザのサポート	複数のブラウザで同時にテストすることはできません	複数のブラウザで同時にテストを実行できます
クロスプラットフォームのテスト	Cypress は、Mac、Linux、および Windows にインストールしてテストに使用できます。	Windows、Linux、macOS にインストールして、ローカルまたは CI、ヘッドレスまたはヘッドでテストするために使用できます。
スクリーンショットとビデオ	テスト実行時にスクリーンショットとビデオをキャプチャできるようにします	テスト実行時にスクリーンショットとビデオをキャプチャできるようにします
ネットワークのスタブ化とモッキング	ネットワーク スタブ化とネットワーク モッキングの両方をサポート	ネットワーク スタブ化とネットワーク モッキングの両方をサポート
非同期テスト	次に進む前にコマンドとアサーションを自動的に待機します。	async/await を使用した非同期操作の明示的な処理が必要
並列テスト	記録されたテストを複数のマシン間で並行して実行できます。単一マシンで並列テストを実行することは推奨されません	使用可能な CPU コアごとに一度に複数のワーカー プロセスを実行することにより、テストを並行して実行します。

Playwright と Cypress の使用例

テストはあらゆるソフトウェア開発サイクルに不可欠な要素であるため、多くの企業が Cypress と Playwright を利用しています。

たとえば、物流会社である DHL は 、ソリューションの品質を損なうことなくソフトウェア ソリューションの展開を迅速化する方法を必要としていました。これを達成するために、彼らは Cypress を使用しました。これにより、テストの実行とカバレッジが増加し、フロントエンド テスト文化が改善され、テスト実行時間も 65% 短縮されました。

ヨーロッパのオンライン住宅予約サービスである Spotahome も、テストで Cypress を利用しています。これにより、160 を超えるシナリオをテストし、毎週 250 のデプロイメントを管理し、週に 130 を超えるテストを実行し、並列化を利用してテストに費やす時間を 70% 節約することができました。

Web サイトやアプリを構築するためのオープンソース サイト ジェネレーターである Gatsby は、テストに Cypress を使用することで、より多くのオープンソースの貢献を受け入れることができました。 Cypress を使用することで、Gatsby はより多くの機能をより早期に、より頻繁にリリースし、オープン PR の累積期間を 54% 削減し、信頼性と信頼性を高めています。

Playwright は、企業、新興企業、オープンソース プロジェクトの間でも人気があります。 Visual Studio Code、Bing、Outlook、Disney Hotstars などのアプリケーションはすべて、Playwright を使用してアプリケーションをテストし、高品質なアプリケーションのリリースを保証します。

マテリアル UI、Adobe Spectrum Web コンポーネント、Lion、React Navigation などのオープンソース プロジェクトはすべて、Web テストと自動化に Playwright を使用します。

結論

テストはソフトウェア開発における重要なステップであり、ユーザーの要件を満たす高品質のソフトウェアをリリースする場合、決して無視してはなりません。強調表示されている使用例からわかるように、テストは企業またはソフトウェアの全体的なパフォーマンスに多くのメリットをもたらします。

テスト ツールの選択に関しては、Cypress と Playwright はどちらも非常に堅牢で堅牢な Web テストおよび自動化ツールです。

複数のタブにまたがってテストを簡単に並行して実行したり、さまざまなプログラミング言語でテストを作成したり、すべての一般的なブラウザーでテストを実行したり、高度な機能にアクセスしたりできるツールが必要な場合は、Playwright が最適なツールです。

テストがフロントエンドのテスト、特に Angular、Vue、React などの JavaScript フレームワークを使用して開発されたものに重点を置いている場合は、Cypress が頼りになるツールとなるはずです。

また、非常に高速なパフォーマンス、テスト駆動開発、ローカル開発、デバッグが必要で、小規模から中規模のプロジェクトでうまく機能する信頼性の高いツールが必要な場合にも、テスト ツールとして最適です。