Slide 1

Slide 1 text

Copyright coconala Inc. All Rights Reserved. WebのE2Eテスト自動化 〜導入から運用・評価までの道のり編〜 DATA : 2023.10.11 株式会社ココナラ

Slide 2

Slide 2 text

Copyright coconala Inc. All Rights Reserved. 2 Agenda まえおき ツール選定編 テスト設計編 テスト実装編 運用編 1 2 3 4 5

Slide 3

Slide 3 text

Copyright coconala Inc. All Rights Reserved. 鈴木 悠仁(すずき ゆうと) 株式会社ココナラ プロダクト開発部 DevOpsグループ QA開発チーム Team Manager ● ココナラ入社2年目 ● SeleniumからPlaywrightに気移り中 ● 筋トレ系QAエンジニア まえおき 1 3

Slide 4

Slide 4 text

Copyright coconala Inc. All Rights Reserved. まえおき 1 4

Slide 5

Slide 5 text

Copyright coconala Inc. All Rights Reserved. まえおき 1 5 【背景整理】 ● QA知見者が現場にいない ● QA工程での不具合検知数が多い ● テスト漏れの結果、障害流出... etc. ● 機能拡充に伴い、リグレッションも徐々に増加... ここへのアプローチ!

Slide 6

Slide 6 text

Copyright coconala Inc. All Rights Reserved. 紹介 1 6 【目指したいE2Eテスト像】 ● 最小のテストで最大の品質を保証できるテスト ● 運用のボトルネックにならないテスト ● 信頼できるテスト

Slide 7

Slide 7 text

Copyright coconala Inc. All Rights Reserved. 7 Agenda まえおき ツール選定編 テスト設計編 テスト実装編 運用編 1 2 3 4 5

Slide 8

Slide 8 text

Copyright coconala Inc. All Rights Reserved. ツール選定編 2 8 【やったこと】 ● ツールのリストアップ ● ツールに求める要件定義 ● PoC(概念実証) 詳細はこちら!

Slide 9

Slide 9 text

Copyright coconala Inc. All Rights Reserved. ツール選定編 2 9

Slide 10

Slide 10 text

Copyright coconala Inc. All Rights Reserved. 【良かったこと】 ● Playwrightに出会えたこと ● PoCのおかげで「他のツールにしとけばよかった...」 はない ツール選定編 2 10

Slide 11

Slide 11 text

Copyright coconala Inc. All Rights Reserved. 11 Agenda まえおき ツール選定編 テスト設計編 テスト実装編 運用編 1 2 3 4 5

Slide 12

Slide 12 text

Copyright coconala Inc. All Rights Reserved. テスト設計編 3 12 【やったこと】 ● CUJを洗い出してテスト設計した ● 運用に耐えられる自動テスト実行時間を決めた ● 実行時間に収まるようにテストケースを取捨選択し た

Slide 13

Slide 13 text

Copyright coconala Inc. All Rights Reserved. テスト設計編 3 13 機能毎にUser Journeyを一覧化 する 以下に基づきCritical User Journeyを決定する ● 流通高にヒットする導線 ● テスト実行時間(15分)

Slide 14

Slide 14 text

Copyright coconala Inc. All Rights Reserved. 【良かったこと】 ● PdMとEMでCUJの認識が統一できたこと ● 保守・運用コストを最低限にできたこと ● 自動テスト実装の手戻りが発生しなかったこと テスト設計編 3 14

Slide 15

Slide 15 text

Copyright coconala Inc. All Rights Reserved. 【悪かったこと】 ● リグレッション流出頻度が増えるまで、リグレッション テスト自動化が後回しになってしまったこと ● テストコードを放置したせいでPoC段階のテストコー ドが陳腐化してしまったこと テスト設計編 3 15 ● 上長と中長期的な優先度について擦り 合せをすべきだった ● 簡易な自動テスト実行環境まで用意し て、定常的に回しておくべきだった

Slide 16

Slide 16 text

Copyright coconala Inc. All Rights Reserved. 16 Agenda まえおき ツール選定編 テスト設計編 テスト実装編 運用編 1 2 3 4 5

Slide 17

Slide 17 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 17 【やったこと】 ● 苦にならないコード実装 ● 誰でもできるテスト実行

Slide 18

Slide 18 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 18 Page Object Models テストコード fillMail fillPassword clickNext fillUserName fillAdress … 登録形式選択画面 fillMail fillPassword clickNext 基本情報入力画面 fillUserName fillAdress … テスト保守コストを最小限にする 設計を心がける!

Slide 19

Slide 19 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 19 リトライ回数 不安定なE2Eテストでは リトライでテスト信頼性を上げる!

Slide 20

Slide 20 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 20 “会員登録”という テストスイート 会員登録TOPが表示されるというテス トケース 登録したアカウントでログイン中という テストケース テストケースは 検証したい最小粒度にする!

Slide 21

Slide 21 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 21 Arrange Act Assert テストコードの可読性を上げる! (AAAパターン)

Slide 22

Slide 22 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 22 テストコード内に ロジック(if / forなど)を書かない!

Slide 23

Slide 23 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 23 作業用Mac ショートカット HTTP Request リアルタイム通知 テスト実行 テスト結果送信

Slide 24

Slide 24 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 24

Slide 25

Slide 25 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 25

Slide 26

Slide 26 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 26

Slide 27

Slide 27 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 27

Slide 28

Slide 28 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 28

Slide 29

Slide 29 text

Copyright coconala Inc. All Rights Reserved. テスト実装編 4 29

Slide 30

Slide 30 text

Copyright coconala Inc. All Rights Reserved. 【良かったこと】 ● Fail調査がやりやすく、修正も容易になったこと ● Slackからテスト実行・結果確認までワンストップで 実現できたこと テスト実装編 4 30

Slide 31

Slide 31 text

Copyright coconala Inc. All Rights Reserved. 【悪かったこと】 ● 技術戦略室とインフラのヘルプが無ければ一人で構 築することができなかった ● PlaywrightがAmazon Linuxに未対応であること にテスト環境構築時に気づいたこと テスト実装編 4 31 ● AWS周りを勉強しておけばよかった ● テスト実行環境も見据えてツール評価す べきだった

Slide 32

Slide 32 text

Copyright coconala Inc. All Rights Reserved. 32 Agenda まえおき ツール選定編 テスト設計編 テスト実装編 運用編 1 2 3 4 5

Slide 33

Slide 33 text

Copyright coconala Inc. All Rights Reserved. 運用編 5 33 ● 開発フローの中に自動テスト実行を組み 込む ● フロー変更について各部署に説明をす る

Slide 34

Slide 34 text

Copyright coconala Inc. All Rights Reserved. 運用編 5 34 自動テスト実行をフォローする

Slide 35

Slide 35 text

Copyright coconala Inc. All Rights Reserved. 運用編 5 35 Failしたテストの原因分析をする

Slide 36

Slide 36 text

Copyright coconala Inc. All Rights Reserved. 自動テストの品質を定義する 運用編 5 36 テスト信頼性 = Automation Bug / SUM 0.12% > 信頼不能性が1%になるあたり で、テストは価値を失い始める。 (Googleは0.15%くらいに留まっ ている)。

Slide 37

Slide 37 text

Copyright coconala Inc. All Rights Reserved. 運用編 5 37

Slide 38

Slide 38 text

Copyright coconala Inc. All Rights Reserved. 【良かったこと】 ● 運用開始から今に至るまで、自動テストに対してネ ガティブ意見がないこと ● テスト結果記録サービス(Report Portal)のデフォル ト機能のみで最低限の自動テスト品質のモニタリン グができていること 運用編 5 38

Slide 39

Slide 39 text

Copyright coconala Inc. All Rights Reserved. 【悪かった(改善したい)こと】 ● 機能追加・変更と連動してE2Eテストをメンテできて いないこと ● 指標定義のチューニングができてないこと ● WebのE2Eテスト保守できる要員が自分しかおら ず、これ以上のスケールが難しいこと 運用編 5 39 引き続き改善していく予定!

Slide 40

Slide 40 text

Copyright coconala Inc. All Rights Reserved. Fin. 40