cypressからplaywrightへテストツールを移行してみよう！ということになったので、それぞれのテストツールの違いや実際の移行方法についてまとめようと思います。

Cypressとは

セットアップが簡単でシンプルなUIを持っているため、短時間でテスト環境を構築し、直感的に使いたい場合に向いています。

ブラウザ内でリアルタイムに動作し、デバッグも容易なとこがポイント。ただし、対応ブラウザとしてはChromiumベースのブラウザ（Chrome、Edge）、Firefox、WebKit（Safari相当）に対応しているものの、サポートされているブラウザの種類が限られているようです。

Cypressは、E2Eテストのための一体型ソリューションとして設計されており、内蔵のテストランナー、アサーションライブラリ、モックやスタブの機能が備わっています。

playwrightとは

一方Playwrightも比較的シンプルなセットアップを提供しますが、より多機能で、より高度なカスタマイズが可能です。

Playwrightは、複数のブラウザ（Chromium、Firefox、WebKit）の完全なサポートを提供し、異なるブラウザ間での一貫したテストを可能にします。また、ヘッドレスモード（GUIなし）でのテスト実行をデフォルトでサポートしており、CI/CD環境でのテスト実行に適しています。

特徴としては、クロスブラウザテストや、デバイスやネットワークのシミュレーションが得意で、モバイルデバイスのエミュレーションやWebKitのテストが必要な場合には、Playwrightが有利です。

両テストツールの違い

Cypress

Cypressはシングルスレッドで動作し、ブラウザと同じランタイムでテストが実行されるため、テストの速度が他のツールに比べて遅い場合があります。ただし、リアルタイムにデバッグできる点は利点です。言語としては、JavaScript（またはTypeScript）に特化しており、Node.jsのエコシステムと密接に統合されています。

Playwright

Playwrightはマルチスレッドで動作し、並列実行が可能です。これにより、テストの速度がCypressよりも高速になる場合があります。特に、大規模なテストスイートを実行する際にパフォーマンス上の利点があります。また、Playwrightは、JavaScript/TypeScriptだけでなく、Python、C#、Javaなど、複数のプログラミング言語をサポートしています。この多言語サポートにより、異なる開発環境やチーム構成に柔軟に対応できます

実際の移行方法

1. Playwrightのセットアップ

まず、プロジェクトにPlaywrightをインストールしてセットアップします。

npm install @playwright/test --save-dev
インストールが完了したら、Playwrightの設定ファイルを生成します。

npx playwright init
このコマンドにより、デフォルトの設定とサンプルテストが作成されます。

2. Cypress方式からPlaywright方式へテストコードを変換

CypressとPlaywrightはそれぞれ異なるAPIを持っているため、CypressのテストコードをPlaywright用に書き換える必要があります。

例①訪問するURLの違い:
Cypress: cy.visit('/path')
Playwright: await page.goto('/path')

例②要素の取得と操作:
Cypress: cy.get('selector').click()
Playwright: await page.click('selector')

例③アサーション:
Cypress: cy.contains('text')
Playwright: await expect(page).toHaveText('selector', 'text')

このように主要なテストケースや共通のテストロジックを抽出し、Playwrightで同じ機能を実現するコードに書き換えます。

3. Playwrightの設定ファイルを必要に応じて書き換える

必要に応じて、設定ファイル（playwright.config）を編集し、テスト環境をカスタマイズします。たとえば、異なるブラウザやデバイスでテストを実行する設定を追加できます。

4. Cypress固有の機能の置き換え

Cypressには独自の機能（例えば、スタブやモック、XHRの操作など）があるため、それらをPlaywrightで再実装する必要があります。例えば、Cypressのcy.interceptに相当するPlaywrightの機能は、page.routeです。リクエストのモックやスタブを行う場合は、この機能を使います。

5. テストの実行とデバッグ

全てのテストがPlaywrightに変換されたら、テストを実行して結果を確認します。Cypressからの移行によって発生する可能性のある問題やバグをデバッグし、必要に応じてコードを修正します。