ヘルススコア100に到達した理由 / MagicPod Meetup Health score Night

MagicPodと半年間向き合って「ヘルススコア30から100まで改善できた理由」についてご紹介します。実装スピード・安定性を上げる共有ステップの活用方法と考え方に加え、testid付与の代用手段としてxpathロケータを特定する方法について、実践で学んだことを中心にご紹介します。

MagicPodミートアップ ヘルススコアNight

Transcript

1. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 1 ヘルススコア     に到達した理由 @Daishu 2024/07/05 MagicPodミートアップ ヘルススコアNight 向け
2. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 2 2022年⼊社  ‧医療 SaaS である        のプロダクト開発に従事   ‧FYI, 複数プロダクト横断したプロジェクトをどうやって成功させたのかメンバーに聞いてみました 前職はSHIFT  ‧toC向けのWebアプリ企業にて、QAを3年間やっておりました 趣味 ⼩島 ⼤周 (Kojima Daishu) はじめに @Daishu プロダクト開発が好きです！ 👦⼦供と遊ぶ  🐩愛⽝のお世話  🐠アクアリウム         | QA Engineer
3. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 3 担当プロダクトについて はじめに 病院‧診療所 患者 私のQA‧テスト⾃動化の担当領域 こちらは別の⽅の担当領域 iOS Android Web SaaS CLINICS(クリニクス)  オンライン診療‧服薬指導アプリ いずれのプロダクトでも MagicPod を活⽤しています！
4. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 4 本⽇のMagicPodヘルススコア (2024/07/05) はじめに 病院‧診療所 患者 iOS‧Android‧Webブラウザで ヘルススコア100 達成
5. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 5 本⽇のMagicPodヘルススコア (2024/07/05) はじめに 病院‧診療所 患者 本発表は‧‧ ブラウザテスト向けです！ 本発表の対象
6. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 6 半年前のCLINICSのヘルススコア
7. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 7 100点満点中、30点！ 半年前のCLINICS 1年前にテストケースを3件⾃動化したきり、その後は保守のみしてきた状態‧‧‧
8. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 8 100点満点中、30点！ 半年前のCLINICS ⾃動テストカバレッジの充実を⽬指して改善着⼿ 🔥🔥 1年前にテストケースを3件⾃動化したきり、その後は保守のみしてきた状態‧‧‧
9. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 9 半年前と現在の⽐較
10. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 10 MagicPod 活⽤状況 半年前と現在の⽐較 項⽬ 半年前 現在 実⾏頻度 週1 テストケース数 3 総Step数 300 共有Step数 20 半年前 • ほとんど不具合を拾えない • FlakyでFailしやすかった 項⽬ 半年前 現在 毎⽇ 22 3000 170 現在 • 定期的に不具合が拾える • 再発防⽌策として活⽤される • ⾃動テストへの信頼感が増した
11. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 11 ヘルススコアの採点項⽬の⽐較 半年前と現在の⽐較 項⽬ 半年前 現在 ヘルススコア： 30 100  ⼗分なメンバーが参加する  ⼗分なテストケースを作成する  共有ステップを活⽤する  テストケースを⻑すぎないように保つ  テストケースを⽇次実⾏する  定期実⾏によるテストが安定して成功する  安定したロケータを使⽤する ほぼ全ての採点項⽬が😞の状態‧‧‧
12. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 12 改善に向けて、取り組んだこと
13. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 13 主な改善点 取り組んだこと ⾃動テストの成功率とテストカバレッジを⾼めるために.. 1. デイリー実⾏に切り替えた a. Failは当⽇中に必ず確認、Flakyは許容せずに追求 2. テストケース数を増やした a. ⼿動テストケースの作成を省いて、先⾏して⾃動化を⾏った 3. あると便利な共有Stepを⼤量⽣産した
14. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 14 3. あると便利な共有Stepを⼤量⽣産した 主な改善点 取り組んだこと ⾃動テストの成功率とテストカバレッジを⾼めるために.. 1. デイリー実⾏に切り替えた a. Failは当⽇中に必ず確認、Flakyは許容せずに追求 2. テストケース数を増やした a. ⼿動テストケースの作成を省いて、先⾏して⾃動化を⾏った 共有Stepの活⽤について掘り下げていきます！ 重要 !!
15. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 15 共有Stepの活⽤
16. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 16 共有Stepの作成基準 共有Stepの活⽤ 基本的な基準 • 複数のテストで同ステップを利⽤している場合、共有Stepを作成する 個⼈的な基準 • 現時点で他から利⽤がなくても、将来的に「あると便利」なら共有Stepとして作成する ◦ 先⾏投資的に作成したことで、早い段階で共有Stepが拡充された 共有Stepという部品を⽤いて、パズルを組み上げて実装するスタイルが確⽴された 🧩
17. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 17 共有Step作成における個⼈的鉄則 共有Stepの活⽤ 汎⽤性を持たせる • 特定のテストケースに依存した形で作らない ◦ 特定の期待値の検証は呼び出し元で⾏い、あくまでテスト “⼿順” の共通化にフォーカスする • 共有変数が定義されている前提で作らない ◦ 設定がない場合、未定義でFailする懸念あり ▪ 引数指定する ▪ もしくは、チーム内で共有変数の利⽤ルールを明確にする (↓例参照) 例：共有変数の棚卸しを⾏い「全テストで利⽤したい物」と「秘匿にする必要がある物」だけ定義して、   この中にあるものは無条件で共有Step内で直接利⽤してOKと決めた。
18. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 18 共有Step作成における個⼈的鉄則 共有Stepの活⽤ 拡張性を持たせる • 共有Step内のステップは短くつくる ◦ 様々な場⾯で、使いやすい処理の形で細かく作ると良い ▪ 共有Step内で⼊れ⼦にする際も、共有Step同⼠を組み合わせて実装しやすくなる • 引数で処理を分岐させる ◦ 部分的に分岐する処理に対して、複数の共有Stepを作成しないこと ▪ フラグを引数で渡して処理を分岐させる (↓例参照) 例：診察予約を⾏う共有Stepで、対⾯/オンライン診療どちらも選択できるよう引数で分岐させている
19. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 19 共有Step化を考えてみる例 共有Stepの活⽤ // リンク先が新しいタブで開くまでの時間調整 // 開いたリンクが表⽰されたタブに移動 // URL確認後、開いたタブを閉じて // リンク先を開く前のタブに戻る // 今回URLを確認したい対象 # 利⽤規約のテキストリンクに設定されたURLが正しいか確認する
20. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 20 共有Step化を考えてみる例 共有Stepの活⽤ // リンク先が新しいタブで開くまでの時間調整 // 開いたリンクが表⽰されたタブに移動 // URL確認後、開いたタブを閉じて // リンク先を開く前のタブに戻る // 今回URLを確認したい対象 共有Step！✅ 共有Step！✅ # 利⽤規約のテキストリンクに設定されたURLが正しいか確認する 共有Step！✅
21. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 21 明⽇から使える共有Stepのご紹介 共有Stepの活⽤ 利⽤規約以外の確認でも利⽤できる • 使いたいシーン毎に対象URLを設定すればOK • また、待機時間も調整できる 分割した共有Stepを⼊れ⼦にした • ⼊れ⼦の共有Stepは単独でも良く使います 共有Stepならメンテが容易 • ChromeのIssueでタブを閉じるとsessionが不安定に なるケースがあり、回避策を⼊れている # 遷移先のURLが正しいか確認する 📝テストケース内での利⽤イメージ 6⾏のステップが2⾏にまとまり、可読性UP
22. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 22 共有Stepの活⽤ 明⽇から使える共有Stepのご紹介 # 遷移先のURLが正しいか確認する 確認対象のページが開くまで、X秒待つ 引数に設定されたURLと開いたページのURLを確認 タブを閉じて元のタブに戻る
23. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 23 共有Stepを活⽤によるヘルススコア推移 共有Stepの活⽤ 採点項⽬ 共有Step 活⽤後 ヘルススコア： 30  →  90  ⼗分なメンバーが参加する  ⼗分なテストケースを作成する  ‧共有ステップを活⽤する  テストケースを⻑すぎないように保つ  テストケースを⽇次実⾏する  定期実⾏によるテストが安定して成功する  安定したロケータを使⽤する 共有Stepを活⽤して⾃動テストを拡充しつつ適正化できたことで、スコアが90後半まで向上！
24. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 24 共有Stepを活⽤によるヘルススコア推移 共有Stepの活⽤ 採点項⽬ 共有Step 活⽤後 ヘルススコア： 30  →  90  ⼗分なメンバーが参加する  ⼗分なテストケースを作成する  ‧共有ステップを活⽤する  テストケースを⻑すぎないように保つ  テストケースを⽇次実⾏する  定期実⾏によるテストが安定して成功する  安定したロケータを使⽤する 共有Stepを活⽤して⾃動テストを拡充しつつ適正化できたことで、スコアが90後半まで向上！ 安定したロケータが未達だが、成功率は安定しているし問題なし！😸👍 と当時は思っていた‧‧‧
25. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 25 不安定なロケータの問題
26. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 26 悲報 不安定なロケータの問題 ディレクトリ変更が⾏われた際、ロケータに利⽤していたCSSのランダムなクラス名がすべて変更さ れてしまい、全ての要素特定に失敗。結果、全件Failする事件が起きた... ⾔ってたやん！💢 開発者が意図的に付与した値ではなく、ランダムな値 ※MagicPodのヘルススコアの改善項⽬にて、以前からフィードバック頂いていた..
27. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 27 悲報 不安定なロケータの問題 ディレクトリ変更が⾏われた際、ロケータに利⽤していたCSSのランダムなクラス名がすべて変更さ れてしまい、全ての要素特定に失敗。結果、全件Failする事件が起きた... 開発者が意図的に付与した値ではなく、ランダムな値 全て元の状態に修正するのに、1週間掛かりました😭
28. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 28 安定したロケータとは？ 不安定なロケータの問題 • ⼀⾔で⾔うと、対象が持つ固有ID等を利⽤した ”変更に強いロケータ” のこと ◦ 固有IDの付与は、アプリ側の実装に⼿を⼊れる必要あり テスト対象アプリがバージョンアップしてもテストが安定して動作するためには、 次の2点が⾮常に重要です。 • アプリ開発時に、各UI要素にユニークID(画⾯内の他の全ての要素と値が 異なる、⼀意なID)を付与しておくこと。 • アプリの画⾯を修正した場合も、上記のユニークIDは変更しないこと。 MagicPodは、内部的にアプリのシステム情報を利⽤して操作対象のUI要素を特定す るため、要素を特定しやすいユニークIDがなかったり、変更されてしまったりする と、テスト失敗の原因となります。ユニークIDを各UI要素に付与し、変更しないよ うにすることで、安定したテスト運⽤が可能になります。 MagicPodヘルプより引⽤：https://support.magic-pod.com/hc/ja/articles/4408904655769
29. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 29 変更に強い固有IDを振るぞ！！ 不安定なロケータの問題 え、ちょっとまって！不安定なロケータが1,246個..!?!!? 😇 再発防⽌の意味も込めて変更に強い ”data-testid” を実装に付与することになったが、、
30. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 30 Xpath活⽤
31. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 31 Xpathについて Xpath活⽤ Xpathとは • XML⽂書内の対象を指定するための⾔語 • 画⾯に表⽰された「⽂字列とHTMLのタグ名」を元に要素を特定できるので、実装側のコード との依存を剥がすことが可能 • MagicPodも対応しており、data-testidの代⽤⼿段として利⽤価値あり！ 注意点 • 当然、タグや⽂字列が変更されるケースもある • 同画⾯に複数の同⼀⽂字列がある場合、INDEXをつけて特定できるが、並び順が変わると無⼒ • ⾔うまでもなく、data-testidが最強である  画⾯上に同⼀の⽂字列とタグがない場合、安定したロケータとして使える！
32. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 32 SelectorsHubのご紹介 Xpath活⽤ SelectorsHub • Chromeアドオン ◦ Xpathロケータを特定する際の強い味⽅です メリット • 指定した画⾯要素に対応するXpathの候補をサジェストしてくれる • (重要) Xpathの試し打ちができる ◦ ロケータを調整しながら、MagicPodでデバッグ実⾏する⼿間を削減できる！ デメリット • 課⾦圧がものすごく強いぐらい ◦ 鎮座する巨⼤広告、定期的なモーダル、横からスライドしてくる広告⽂...
33. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 33 SelectorsHubの活⽤⽅法 Xpath活⽤ Inspect Page > 対象要素をクリック • Xpathの候補をサジェストしてくれる “XX” element matching • ⼊⼒したXpathで特定される要素の数を表⽰する ⼊⼒欄に直接打ち込む • Xpathの試し打ちができる • 利⽤できるXpathの候補を教えてくれる 1 element matching のXpathを探そう 🔍 (画⾯内に対象要素が1つしかない = 安定) Inspect Page ヒットした要素
34. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 34 特定したXpathはロケータ編集から追加する Xpath活⽤ MagicPodのサジェストに 利⽤したいXpathがない場合も... SelectorsHubで変更に強いXpathを特定 特定したXpathをロケータに追加！ 安定したXpathロケータを素早く特定して利⽤可能！ (Xpathの知識が⾃然と⾝に付くメリットあり📝)
35. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 35 紹介した共有StepにXpathを利⽤した応⽤例 Xpath活⽤ # 遷移先のURLと表⽰項⽬を確認する • リンクの遷移先URLの検証に加えて、ページが正 しく表⽰されるか？まで検証できる共有Step • 引数で対象のXpathを丸ごと渡すことで、遷移先 のページ構成に依存せず、共通利⽤できる 📝利⽤イメージ 引数でXpathロケータを丸ごとセット
36. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 36 //h1[text()='利⽤規約'] ↑利⽤規約を特定するXpath “確認対象”のロケータの中⾝ Xpath活⽤ 紹介した共有StepにXpathを利⽤した応⽤例 引数のXpathでAssert
37. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 37 終わりに
38. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 38 Xpathで不安定なロケータを倒す⽇々を乗り越え.. 終わりに 推奨値を下回りニコニコマークになりました！😄 毎朝9:00の更新(⾒すぎて気づいた)を ソワソワしながら⾒ていた...
39. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 39 そして、ヘルススコア100へ..！ 終わりに Xpathで不安定なロケータを減らして、100に到達！！ 各ケース作成時に安定したロケータを意識して実装していれば..と反省
40. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 40 共有StepとXpath活⽤がスコアアップに有効なワケ 終わりに ヘルススコアの採点項⽬ Xpathの活⽤ 共有Stepの活⽤     ⼗分なメンバーが参加する     ⼗分なテストケースを作成する     共有ステップを活⽤する     テストケースを⻑すぎないように保つ     テストケースを⽇次実⾏する     定期実⾏によるテストが安定して成功する     安定したロケータを使⽤する 両⽅使いこなせば、すべての採点項⽬にコミットできる！💪 Xpathの活⽤ SelectorHub等を利⽤すれば学習容易 SelectorHub等でXpathを素早く特定すれば 素早くテストケースを作成できる 共有Stepを応⽤して利⽤できる ⽂字列の部分⼀致で短く実装できる Xpathを修正すればキャプチャの取り直しが 不要になるので、Failした時の修正が容易 不安定なロケータによるFailを減らせる 変更に強いロケータを利⽤できる 共有Stepの活⽤ 共有Stepを組み合わせることで、 最⼩限のコストで実装できる 共通⼿順の流⽤で実装が早くなる ずばりそのもの ステップ数を短縮できる Failした時の修正が容易 仕様変更の反映が1箇所で済むので、 変更漏れによるfailを避けられる 安定したロケータで共有Stepを作れば呼 び出し側が安定する
41. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 41 ご清聴ありがとうございました！