E2EのフロントテストでPlaywrightを使うことを決めた話 #0 環境構築

最近、もう一段レベルアップしたくて、プログラミングの勉強をこれまで以上に集中的にやっています。 デザインパターンから、リファクタリング、設計からテスト、ドキュメンテーションまで、どれも仕事にも、自分アプリ開発にもめちゃくちゃ役立つ内容なので、日々プラスになる学びがあるだけでモチベーション爆上がりです。 そんな中、テストはCICD（継続的インテグレーション、継続的デリバリー）という、開発におけるテストを自動化して、 バグを早期発見したり、アップデート時の依存チェックなどを、効率的に行うやっていないければ、不毛な作業を強いられてしまう重要な領域です。 これまでは、Pupeteerと言いう、Googleが開発した、javascript(Nodejs)で、GoogleChromeブラウザをサーバーに内包して自動的に色々なブラウザ操作を行うというユーザー操作テストができるツールを使っていました。 でも、最近、Microsoftが開発した、Playwrightというソフトが、さらに上をいったフロントテストができると知ったので、今やっているテスト膨大な、コード長めのデカめサービスで使いたいと考えて、このPlaywrightをいじり倒してみようと思います。

PupeteerとPlaywrightの違い

特徴	Pupeteer	Playwright
対応ブラウザ	Chromium 系のみ（Chrome / Chromium）	Chromium / Firefox / WebKit (Safari) 全対応
モバイル対応	限定的	エミュレーションで iPhone / iPad など本格対応
マルチブラウザテスト	できない	1つの API で同時に可能
ネットワーク操作	できる	より強力（リクエストのモック、レスポンス差し替え、エラー注入など）
フレームワーク統合	基本は単体	`@playwright/test` が付属しているためテストフレームワークとしてそのまま使える
CI での利用	可能	CI 向けに最適化された公式 Docker イメージがある

Playwrightの名前の由来

英語で直訳すると「脚本家」とのことで、 エンジニアやテスターの人が、脚本家のように、テストコードのシナリオを書くイメージでこの名前にしたようです。 ちなみに、Puppeteerは、「操り人形」名ので、「ツールを扱う」か、「ツールが扱われる」かという、命名だけでも受動と能動の差が出ていますね。 （別にどっちが良い悪いという話ではないですけどね・・・）

Dockerで環境構築

テストサーバーにインストールする前に、ローカルで簡単にテストできるように、Dockerで構築しておきます。 ソースコードが多いので、githubにリポジトリを作っておきました。 ローカルにcloneしてお試しください。 https://github.com/yugeta/playwright

テスト実行までの手順

1. githubからclone git clone https://github.com/yugeta/playwright.git 2. 階層に移動 cd playwright/docker 3. dockerイメージを構築して起動 docker compose build docker compose up -d 4. ターミナルに入ってコマンド実行 docker exec -it mynt_playwright bash npm init -y npm install -D @playwright/test@1.47.0 5. サンプルテストを実行 npx playwright test screenshot.png が作られたら成功です。

Playwrightを使った感想

Puppeteerと似たような使い方で、メリットの多いツールということが実際に操作して、調べてみて理解できました。 dockerに、nginxやphp、wordpressなどを搭載すると、ローカル内でwebページのテストが問題なくできそうで、便利ですね。 実際は仕事の環境に合わせて、/testsフォルダなどを、切り替えて使うことになるので、自分で色々といじってみて、特性を覚えるのも重要です。 テストサンプルコードの、example.spec.ts ファイルは、***.spec.tsまたは、***.test.tsというファイル名にしておくことで、一括で自動テストしてくれるようです。 このテストコードの書き方が重要になるので、今後内容についても学習した結果をブログにアップしたいと思います。

あとがき

今回は、Playwrightのインストールから、サンプル実行までを行った環境構築でしたが、実際のテストコード記述についてもどんどん深掘りしていきたいと思います。 こうしたツールが問題なく使い始められると、ワクワクしますよね。