playwrightを使ってWEBのE2Eテストを自動化してみた　〜失敗談編〜

こんにちは！株式会社PhotoructionでQAエンジニアをしています内田です。 Photoruction Advent Calendar 2021の14日目の記事です。

playwrightを使ってE2Eテストの自動化をすすめる上で失敗したこと・詰まったこととその解決策を記載していきます。 E2Eテストの自動化を検討中の方の役に立てたら幸いです。

失敗したこと・詰まったことリスト
1. 自動化の進め方・構成での失敗談
  1. テスト実行時間が長すぎる
  2. テスト実行がコマンド実行できる人しかできない
  3. テストのどの箇所で落ちたのかがわからない
  4. テストで実行している内容が実装者しかわからない
  5. テスト実行によりデータ量がどんどん増えてく
2. playwrightの使い方での失敗談
  1. 実行環境によってキャプチャ差分が出ちゃう
  2. ファイルダウンロードできない
  3. モーダルが完全表示される前に次の操作をしてしまう
まとめ

自動化の進め方・構成での失敗談

テスト実行時間が長すぎる

背景：「テスト用ユーザー増やすの面倒だし、とりあえず直列実行すればいいよね・・？」という軽い感覚で直列実行にしか対応しない記述の仕方をしていました。実行時間が長すぎてストレスを感じました。

対策：テストを並列処理できるよう実装を変えました。

教訓：最初から並列実行できるようにしておくべきでした。並列処理を実装することにより実行時間が1/2程度に削減できました。

コマンド実行できる人しかテスト実行できない

背景： playwrightはコマンドライン上で実行するツールです。テスターさんがE2Eテストを実行したいタイミングにテスト実行依頼するというフローを挟まないといけませんでした。

対策： GitHub Actionsのワークフロー手動実行機能を使ってテスト実行できるようにしました。

テストのどの箇所で落ちたのかがわからない

背景：テスト実行しfailedになってもどのステップで落ちたのかがわからない

対策： ①アクションタイムアウトの設定にしました ②操作キャプチャ動画を残す設定にしました

テストで実行している内容が実装者しかわからない

背景：たとえば「写真アップロードのテスト」でもどの写真をアップするのか、拡張子はなにか、ドラッグ＆ドロップでアップロードするのか・・・などの操作詳細がテスト実装者にしかわからず、テスターさんへの共有ができてませんでした。

対策：テスト実装前に自動テストでの操作詳細をドキュメントに記載しました。

テスト実行によりデータ量がどんどん増えてく

背景：データ作成テストによりデータ量が増えていき、MAX登録数に達したり他のテストで参照されるデータが参照できなくなる自体が発生しました。

対策：データ作成テストとデータ削除テストをセットで実施するようにしました。

playwrightの使い方での失敗談

実行環境によってキャプチャ差分が出ちゃう

背景：一部のE2Eテストで要素で判定できないテストがあり、画像比較テストを導入しています。当方の環境はMac/Windows上で開発＆GitHub Actionsでテスト実行　という構成でした。Mac/Windows/Linux上で撮影したキャプチャに差分が出てしまいました。

Mac

f:id:photoruction_tech_blog:20211209142209p:plain

Linux

f:id:photoruction_tech_blog:20211209142235p:plain

差分

f:id:photoruction_tech_blog:20211209142257p:plain

結構差分ってあるんですね・・・。

対策：ゴールデンファイル（正解とするキャプチャ）をDockerを用いてLinux上で撮影しました。

ファイルダウンロードできない

背景：ダウンロードボタンをクリックする実装をしてもダウンロードが始まらず詰まりました。

対策：オプションに説明がありました。ちゃんとドキュメントは見るべきですね・・・。

https://playwright.dev/docs/api/class-testoptions#test-options-accept-downloads

playwright.config.jsに以下の設定を追加しました。

const config = {
(略)
    use: {
        acceptDownloads: true,
    }
}

モーダルが完全表示される前に次の操作をしてしまう

背景：弊社のサービスはモーダルがゆっくり上から降りてくるアニメーションで表示されます。こんな感じです。

f:id:photoruction_tech_blog:20211209142358g:plain

モーダルがブラウザに表示された瞬間、つまり完全に降りきる前にモーダル内の操作が始まってしまい、テストが落ちることがよくありました。

対策：モーダルの移動アニメーションが終わるのを待ちました。下記の記述を加えました。

await page.click('{モーダルを表示させるボタン}');
const modal = await page.$('{モーダルの要素}');
await modal.waitForElementState('visible');
await modal.waitForElementState('stable');
// 次の操作へ・・

まとめ

自動テスト未経験者が手探りで自動化を進めています。振り返ってみると詰まったことだらけでした。自動化を検討している人やplaywrightを使っている人の参考になれば幸いです。

株式会社フォトラクションでは一緒に働く仲間を募集しています

corporate.photoruction.com

Photoruction工事中！

Photoructionの開発ブログです！