E2EのフロントテストでPlaywrightを使うことを決めた話 #2. 録画からコード生成で全体像をつかむ

Playwrightは、あなたのブラウザ操作を録画し、そのままテストコードに変換してくれます。 ブラウザで行う操作を録画すると言うのは、ブラウザでポチポチと入力したりクリックしたりページ遷移する実操作を、そのまま記録してくれる便利機能が備わっています。 何故「録画」が必要なのかというと、Playwrightをよく知らない人（テストコードが書けない人）でも、手軽に操作を録画してテスト実装を行うことができるからですね。 他にも、要素のセレクタを調べる手間が減ったり、テストコードをお作法通りに書く手間が一気にショートカットできます。 こうしたテスト構築の方法を、E2Eテスト（End-to-End Test） と言うんですね。 今回は、この便利なテスト方法を学んでいきます。

GUIの環境構築

今回のシリーズでは、Dockerを使って、playwrightを実装しています。 そのため、E2EでのGUI（ブラウザを起動して、手動操作を行う手法）を実行しようとするとエラーが出ます。 そのため、以下のコマンドを実行して、dockerを実行している端末のブラウザを使うように環境構築をします。 npm init -y npm install -D @playwright/test npx playwright install

Playwright GUIを立ち上げる

npx playwright codegen https://your-service.com "https://your-service.com"を、テストしたいURLで実行すれば、ブラウザと、録画されたコードを表示するウィンドウが2つ立ち上がります。 もし、npmコマンドが実行できない場合は、以下を参考にしてください。

Mac

npmがインストールされていない場合 brew install node 古いnodeを使っている場合 which node which npm node -v npm -v Homebrewがインストールされていない場合 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 参考 : https://brew.sh/

Windows

Nodeの公式インストーラを使用する。

E2Eの実行

npx playwright codegen https://your-service.com こちらのコマンドで、自分の使用しているOS環境でplaywrightのGUIモードが起動します。 ウィンドウが2つ立ち上がります。 立ち上がったブラウザ内で通常の操作をすると、右側のウィンドウに、操作履歴が追記されていくのがわかると思います。 テストの一通りの操作を行なった後で、出来上がった履歴のコードを、そのままPlaywrightの.tsファイルに保存すれば、そのままの再現テストで自動テストが実行できます。 （理論的には、そのまま使えますが、注意点があるので、下に書かれている点に注意しましょう）

操作して気づいたこと

マウス操作のDropAndDrapは、正常に履歴として記録されないようです。 （立ち上がったブラウザ内でも正常に操作ができません） 特殊なJSd操作による挙動は、細かく対応はできないようなので、通常のWebブラウザ操作のみで行うのがいいでしょう。 同時に、こうした特殊操作は、E2Eテストに向いていないという事にもなりますね。 なんでもテストできるというワケではないようです。

実際の録画画面で起きること

録画して、自動的に書かれるコードは、主に以下のようなものがあります。

page.goto() page.getByRole() page.getByLabel() page.fill() page.click()

例 : ログイン操作

await page.goto('https://your-site.com/login'); await page.getByLabel('メールアドレス').fill('test@example.com'); await page.getByLabel('パスワード').fill('password'); await page.getByRole('button', { name: 'ログイン' }).click();

録画時に特に見るべきポイント

どんな Locator が生成されるか?

・label ベース → 安定 ・role ベース → ベストプラクティス ・CSS セレクタ → 非推奨の可能性（修正の余地あり）

画面遷移時のコードの出方

・click → navigation → expect の流れを学べる

自動待機のタイミング

・余分な wait がないことに気づく ・Playwright が「待てる」理由が分かる

録画で出るコードは“そのまま使わない”方が良い

上記に、自動で出てきたコードをそのまま使えるように書いていますが、実はそのまま使わない方が良くて、必ず修正して使うというようにしましょう。 自動的に書かれたコードは、あくまで「雛形」という程度に留めておきましょう。

修正ポイント

・セレクタをもっと安定したものにする ・不要なステップを消す ・Page Object に分離する ・テストデータを変数化・faker化など ・expect の追加

録画は複雑な操作において価値が高い

そのまま使えないコードだとしても、単純な作業であれば、自分でコードを書いた方が早い場合ではなく、 操作手順が長かったり、 煩雑なDOM構造のページだったりする場合、録画作業は非常に有効に働きます。 特に便利に使える操作としては、以下のようなものがあります。

・カレンダー（datepicker） ・ドラッグ&ドロップ（扱えない操作もあるので要注意！） ・モーダル操作 ・SPA の非同期動作 ・多段階のフォーム ・ダッシュボードの UI 操作

これらの操作をするときに、Playwrightでどういう風にコードを書けば良いかが、一発で理解できます。

録画からコード生成のベスト実行フロー

おさらいとして、録画作業からコード生成をするまでの一連作業の手順をまとめておきます。

1. codegen を実行して“操作の流れ”を録画 2. 自動生成コードを保存 3. セレクタだけ安定化する 4. expect を追加して“テスト化”する 5. Page Object へ切り出す

あとがき

もはや、今回の手順を踏んでいくと、かなり手軽にPlaywrightのテストコードをどんどん作っていくことができます。 実際にここまでくると、テスト項目が書かれたリストが重要なポイントであることに気が付きます。 ちゃんともう和製のあるテスト項目が作れるかどうかは、Playwrightでは作ってくれませんが、 今時のAIに作ってもらうという手もあるので、そういう意味では自動化は無理ゲーではないかもですね。 これまでにSeleniumなどのこうした自動テストツールを触ったことがある人であれば、さほど難しくないかもしれませんが、初めて触る人にとっては、コードもTS(JS)形式ですが、別次元のコードに見えてしまうと思います。 今回の実行フローを何度か繰り返すことで、さほど大きな学習コストをかけることなく、自動テストの構築ができるようになるでしょう。