エムスリーキャリアでQAを担当している川浪です。
私は現在、医師と薬剤師向けのWebアプリケーションを提供するプロジェクトにおいてQAとして活動しています。
タイトルにもあるように、本記事ではPlaywrightでテスト実行する際に選択できるモバイルブラウザの追加方法についてご紹介します。
Playwrightとは
Playwrightは、マイクロソフトが開発・提供しているE2Eテスト自動化フレームワークです。
https://playwright.dev/
詳細な説明は割愛しますが、Visual Studio Code（VSCode）の機能拡張（Playwright Test for VS Code）も提供されており、VSCode上でPlaywrightのスクリプトを作成・実行することができます。
本記事の前提条件
本記事の前提条件は以下の通りです。
- Windows PCにPlaywrightをインストール済み
- 使用するスクリプト言語にTypeScriptを選択
- Playwrightで使用するブラウザをインストールする
- Visual Studio Code（VSCode）をインストール済み、かつ、VSCodeの機能拡張「Playwright Test for VS Code」をインストール済み
Playwrightで動作確認できるブラウザ
Playwrightをインストールすると、以下のブラウザで動作確認ができます。
上記ブラウザはいずれもPCのブラウザとして動作するので、Playwrightの初期状態ではモバイルのブラウザで動作確認ができません。
モバイルデバイスのエミュレーターでテストするには
モバイルのブラウザ（iOSのSafariやAndroidのChrome）で動作確認するには、playwright.config.ts を開いて編集します*1
playwright.config.ts の初期状態では、以下の通りモバイルのブラウザに関してはコメントアウトされているので、コメント解除すれば利用できるようになります
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
VSCodeで選択項目に追加されていることが確認できます
エミュレーターの種類を増やすには？
モバイルデバイスでのE2Eテストが可能になりましたが、モバイル版ChromeはPixel 5、モバイル版SafariはiPhone 12 とそれほど新しいデバイスではありません（2024年4月時点）
他にエミュレートできるブラウザはないのか？と思い調べてみると、モバイルデバイスのエミュレーターは、以下のファイルで定義されていました
(Playwrightのインストールフォルダ)\node_modules\playwright-core\lib\server\deviceDescriptorsSource.json
jsonファイルを開いてみると、ポートレートモード（縦向き）とランドスケープモード（横向き）の両方が定義されているデバイスもあります
deviceDescriptorsSource.json を参照し、追加したいデバイスのキーをplaywright.config.ts に追記すれば、コメントアウト解除した以外のデバイスでも動作確認が可能です
例えば、iPhone 14 Pro を追加したい場合は下記のように追記します
/* Test against mobile viewports. */
{
name: 'Mobile Chrome',
use: { ...devices['Pixel 5'] },
},
{
name: 'Mobile Safari',
use: { ...devices['iPhone 12'] },
},
{
name: 'Mobile Safari on iPhone 14 Pro',
use: { ...devices['iPhone 14 Pro'] },
},
おわりに
今回はPlaywrightでモバイルデバイスでのテスト実行についてご紹介しました。
Playwrightは、CypressやTestCafeといった先行リリースされたE2Eテストのフレームワークと比べ、動作確認できるエミュレーターの多さという意味でも利用価値が高いと考えています。
弊社のサイトはスマートフォンでの操作を前提としたWebアプリケーションが多いので、今後のQA業務でテストを自動化する際にPlaywrightの利用も視野に入れていきたいと思います。
*1:playwright.config.tsファイルは、Playwrightのインストール先フォルダ直下にあります
