ニュース

2024年8月8日

テスト自動化に取り組みたいなら知っておきたい「Cypress」と「Playwright」の違い：QAチームと開発者、それぞれの視点で分析

TechTargetは「『Cypress』と『Playwright』の違い」に関する記事を公開した。利用可能な多くの自動テストツールの中でも、「Cypress」と「Playwright」は特に注目すべきツールだ。

[Amy Reichert，TechTarget] PC用表示関連情報

LINE

Hatena

　TechTargetは2024年7月27日（米国時間）、「『Cypress』と『Playwright』の違い」に関する記事を公開した。

CypressとPlaywrightの違いについて（提供：TechTarget）

　チームがテスト自動化を計画する際に大きな課題となるのが自動テストのメンテナンスだ。AI（人工知能）や機械学習による自己修復技術を提供しているテストツールもあるが、障害の分析やスクリプトの修正作業の負荷は大きく、やがて手に負えなくなる可能性がある。とはいえ、さまざまなテストやサポートを自動化できれば、大きなメリットが得られる。全体的な視点で見れば、テストを自動化することで、品質管理（QA）チームはテストの対象範囲を拡大し、テスト効率とアプリケーション品質を向上させることができるだろう。

　そこで登場するのが主要なテスト自動化ツールである「Cypress」と「Playwright」だ。本稿では、CypressとPlaywright双方の機能、主な違い、そしてテストチームと開発チームのニーズに最も適するツールを選定する際のヒントを紹介する。

Cypressとは

　Cypressはブライアン・マン氏によって作成され、2018年10月に商用リリースされた。2024年7月現在、ローカル環境にインストールして使う「Cypress App」とクラウドサービスの「Cypress Cloud」が連携して、テストの作成から実行、結果の分析、レポート生成までのテストプロセス全体をカバーする。

　Cypressは、「Node.js」サーバを使って、常に同期された接続を維持する。Node.jsサーバは、プロキシの作成時に開始される「WebSocket」を介して対話する。Cypressのコマンドは全てWebブラウザ内で実行されるため、ドライバーのバイナリを同期する必要がない。Webブラウザを使うことで、テストプロセスの効率が上がり、フロントエンドのテストに集中できる。

Playwrightとは

　Playwrightは2020年にMicrosoftからリリースされ、着実に人気が高まっている製品だ。PlaywrightはさまざまなWebブラウザでWebアプリケーションのエンドツーエンドのテスト自動化を作成するのに効果がある。Playwrightは継続的に改善されており、利用者も増え続けている。

　PlaywrightはNode.jsライブラリで、「Chromium」「Firefox」「WebKit」といったオープンソースのWebブラウザでのテスト自動化を可能にする単一のAPIを持っている。「Playwright API」は「JavaScript」の中で使用され、リンクを通じて異なるWebページに移動したり、ページ要素を操作したりするといったフロントエンドの機能を実行する。

CypressとPlaywrightの主な違い

　CypressとPlaywrightには、それぞれが特定のニーズに対応した固有の特徴がある。例えば、Cypressは「使いやすさ」「インストールの容易さ」「短時間でテスト自動化プロジェクトの生産性を高める」といった特徴が知られている。QAチームのメンバーだけでなく、開発者の簡単な単体テストにも使用できる。

　Playwrightは、開発者によるクラウドデプロイメントのテスト、エミュレーションによるモバイルアプリケーションのテスト、WebSocketパフォーマンスのテストに適している。PlaywrightはCypressに比べて対応するプログラミング言語が多いため、幅広い技術的適性と能力を持ち、より広範囲のテストに対応できる機能を備えている。

　テスト担当者は、両ツールの最も重要な機能を比較し、双方の役割を理解する必要がある。


機能	Cypress	Playwright
プログラミング言語サポート	JavaScript、「TypeScript」	JavaScript、TypeScript、「Python」「C＃」「Java」
全体的な使いやすさ	開発者やQAテスト担当者が使いやすい	習得に時間がかかり、APIについての技術スキルが必要
デバッグ品質	問題の特定を容易にする判読可能なエラーとスタックトレースが提供される	さまざまなプログラミング言語でのデバッグを可能にする柔軟性がある
テストの開発	明示的なステートメントを入力しなくても、低速なアプリケーションプロセスが完了するのを自動的に待機する独自の組み込み待機メカニズムがある	「wait」や「sleep」のステートメントは、追加するのは面倒だが、直接入力すれば配置を細かく制御できる可能性がある
動作、機能、エンドツーエンドのテストカバレッジ	単体テストの複雑なシナリオ向けに関数、タイマー、サーバ関数の動作を検証する	ユーザーは、JavaScript、TypeScript、C#、Javaを使って、エンドツーエンドのテスト、動作テスト、機能テストを作成できる
クロスブラウザサポート	Firefoxと、「Edge」や「Electron」などの「Chrome」ファミリーのWebブラウザがサポートされている	Chromium、WebKit、Firefoxといったオープンソースや、「Google Chrome」「Microsoft Edge」といった商用ブランドなど、テストを実行できるWebブラウザが多く、モバイルアプリエミュレーターへのアクセスも可能

　こうした比較は、一般的な機能に加えて、両ツールのプロセスを比較するのにも役立つ。テスト担当者が両ツールで実行して比較できる簡単なプロセスの1つがテストの記録だ。

Cypress

　Cypressでテストを記録するには、まず、次のコードを使用して構成ファイルに「experimentalStudio」属性を追加し、「Cypress Studio」オプションを有効にする。

 e2e: {
    experimentalStudio: true,
  }
}

　次に、「Spec Runner」画面に移動し、テストスイート名にマウスカーソルを合わせ、「Add New Test」（新しいテストの追加）ボタンをクリックする。「Get Started」（開始）をクリックし、図1に示すようテストのURLを入力する。

図1　Cypressで新しいテストを追加する

　「Continue」（続行）をクリックすると、Cypress Studioは、ユーザーがURL上で実行するアクションを記録し始める。ここで、アプリケーションURLに機能テストを設定し、左側のパネルで「Save Commands」（コマンドの保存）をクリックする。再びContinueをクリックして、新しいテストがテストランナーに追加されたことを確認する。テストランナーを使って新しいテストを実行する。必要に応じて、「Add Commands to Test」（テストにコマンドを追加）アイコンを選択するとCypressStudioが開き、テストの編集が可能になる。

Playwright

　「Test Explorer」を開き、サイドバーの「Record new」（新規記録）ボタンをクリックすると、新しいテストが作成され、図2に示すようにブラウザウィンドウが開く。

図2　Playwrightで新しいテストを記録する

　テストする必要があるURLアドレスに移動し、シナリオをテストする。図3に示すように、ユーザーのアクションがPlaywrightによって記録され、テストコードが生成される。テストシナリオを記録した後、「Cancel」（キャンセル）をクリックするか、ブラウザウィンドウを閉じる。テストファイルを探し、必要に応じてコードを追加または編集する。

図3　Playwrightでユーザーのアクションを記録し、テストコードを生成する

　Playwrightにはドキュメントが用意されており、カーソルからの記録方法、アサーションの追加方法、「codegen」コマンドの使用方法などが示されている。

　開発チーム内でCypressとPlaywrightを併用することも可能だ。テスト担当者はCypressの使いやすさとフロントエンド機能を好み、開発者はAPIと単体テストにPlaywrightを使用するのを好む場合が多い。

Cypressのメリットとデメリット

　Cypressが開発チームとテストチームにもたらすメリットは以下の6つだ。

動作テストと機能テストの両方で使える
単体テストに役立つ
待機機能やスリープ機能が組み込まれている
JavaScriptによる単一言語サポート
インストールが容易で、習得も難しくないことから結果やROI（投資対効果）が迅速に得られる
コミュニティーによるサポートが優れている

　だが、デメリットもある。

複数のWebブラウザで同時にテストできない
Webアプリケーションでは一般的な「複数タブ」をサポートしていない
言語のサポートが制限されるため、柔軟性とスクリプトを強化する機能が妨げられる

Playwrightの長所と短所

　Playwrightのメリットは以下の8つ。

クロスブラウザのサポートが可能
複数ページとドメインのテストシナリオをサポートしている
ネットワークトラフィックのインターセプト（傍受）できるため、スタブやモックのニーズに対応できる
ファイルのアップロードとダウンロードをテストできる
タイピング、クリック、フォーム要素の変更などのネイティブ入力イベントをサポートしているため、ページ要素のテストを強化できる
複数のCI/CD（継続的インテグレーション／継続的デリバリー）サーバと統合できる
クラウドインフラのテスト用に「Docker」のイメージを使ったクラウドデプロイメントが可能になる
スクリプト作成への着手を容易にするのに役立つインテリジェントなデフォルト（初期設定）を利用できる

　Playwrightのデメリットは以下の通り。

大半の自動化ツールよりも技術に重点が置かれているため習得が難しい
成長は続いているが、幅広いコミュニティーサポートを受けられない
Microsoftが積極的に支援し推進しているが、他のテスト自動化ツールほど成熟度は高くない
ツールには不完全な点があるため、テスト用のプラグインや拡張機能を開発者が作成する必要がある

CypressとPlaywrightの選び方

　両ツールは併用も可能だが、開発チームは通常、どちらか一方を選びたいと考えるかもしれない。その場合は、テスト自動化を担当するテスト担当者と開発者にとって最も意味のある機能を基にツールを選択すべきだ。また、一方のツールだけを選択することで、両QAチームと開発チームが互いにバックアップして、そのツールでサポートを提供できるメリットがある。

　チームのニーズに最適なツールを決定するためには、パイロットチームを作ることを考えてほしい。パイロットチームにはQAテスト担当者と開発者の両方を参加させ、ツールの使用が可能かどうかを両チームが判断できるようにする。パイロットチームが両ツールを準備し、注目度の高いAPIや重要なアプリケーション機能のテストを自動化してみる。そこで、両ツールが既存のITインフラや、他のテストツールや開発ツールと統合されることを確認する。

　パイロットチームによるレビューが完了したら、開発チーム全体で結果を確認し、両ツールの動作についての意見やフィードバックを集める。その後、投票でツールを決める。もしくは、ITインフラとテストツールが統合されることを前提に、チームの大多数のメンバーのニーズに最も適するものを選んでもいいだろう。

　チュートリアルや初期トレーニングなどをパイロットチームから提供（または提案）してもらうことも検討してほしい。メンバーにツールのトレーニングと試用の時間を与え、その後、チームを再編成してテスト自動化計画を立てる。そうすることで、より多くのメンバーが選択したツールに慣れることができる。全員がツールに慣れれば、計画に必要な現実的なフィードバックを得られるだろう。

　CypressとPlaywrightのどちらを選ぶかは、チーム固有のテスト要件とアプリケーションに左右される。複数のWebブラウザでテストする必要がなく、より迅速にテストを始めたい場合はCypressが適している。複数のWebブラウザでのテストが不可欠であれば、Playwrightが最適かもしれない。

　どちらのツールでも、自動テストの効果的な選択肢が提供される。重要なのは、選んだツールが適切に機能しない場合はツールを変えてもよいということだ。自動テストツールには、あらゆる開発チームのニーズに合うさまざまな選択肢が用意されている。