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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 2 2022年⼊社 ‧医療 SaaS であるのプロダクト開発に従事 ‧FYI, 複数プロダクト横断したプロジェクトをどうやって成功させたのかメンバーに聞いてみました前職はSHIFT ‧toC向けのWebアプリ企業にて、QAを3年間やっておりました趣味⼩島⼤周 (Kojima Daishu) はじめに @Daishu プロダクト開発が好きです！ 👦⼦供と遊ぶ 🐩愛⽝のお世話 🐠アクアリウム | QA Engineer

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 10 MagicPod 活⽤状況半年前と現在の⽐較項⽬半年前現在実⾏頻度週1 テストケース数 3 総Step数 300 共有Step数 20 半年前 ● ほとんど不具合を拾えない ● FlakyでFailしやすかった項⽬半年前現在毎⽇ 22 3000 170 現在 ● 定期的に不具合が拾える ● 再発防⽌策として活⽤される ● ⾃動テストへの信頼感が増した

Slide 11

Slide 11 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 11 ヘルススコアの採点項⽬の⽐較半年前と現在の⽐較項⽬半年前現在ヘルススコア： 30 100 ⼗分なメンバーが参加する⼗分なテストケースを作成する共有ステップを活⽤するテストケースを⻑すぎないように保つテストケースを⽇次実⾏する定期実⾏によるテストが安定して成功する安定したロケータを使⽤するほぼ全ての採点項⽬が😞の状態‧‧‧

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 13 主な改善点取り組んだこと⾃動テストの成功率とテストカバレッジを⾼めるために.. 1. デイリー実⾏に切り替えた a. Failは当⽇中に必ず確認、Flakyは許容せずに追求 2. テストケース数を増やした a. ⼿動テストケースの作成を省いて、先⾏して⾃動化を⾏った 3. あると便利な共有Stepを⼤量⽣産した

Slide 14

Slide 14 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 14 3. あると便利な共有Stepを⼤量⽣産した主な改善点取り組んだこと⾃動テストの成功率とテストカバレッジを⾼めるために.. 1. デイリー実⾏に切り替えた a. Failは当⽇中に必ず確認、Flakyは許容せずに追求 2. テストケース数を増やした a. ⼿動テストケースの作成を省いて、先⾏して⾃動化を⾏った共有Stepの活⽤について掘り下げていきます！重要 !!

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 16 共有Stepの作成基準共有Stepの活⽤基本的な基準 ● 複数のテストで同ステップを利⽤している場合、共有Stepを作成する個⼈的な基準 ● 現時点で他から利⽤がなくても、将来的に「あると便利」なら共有Stepとして作成する ○ 先⾏投資的に作成したことで、早い段階で共有Stepが拡充された共有Stepという部品を⽤いて、パズルを組み上げて実装するスタイルが確⽴された 🧩

Slide 17

Slide 17 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 17 共有Step作成における個⼈的鉄則共有Stepの活⽤汎⽤性を持たせる ● 特定のテストケースに依存した形で作らない ○ 特定の期待値の検証は呼び出し元で⾏い、あくまでテスト “⼿順” の共通化にフォーカスする ● 共有変数が定義されている前提で作らない ○ 設定がない場合、未定義でFailする懸念あり ■ 引数指定する ■ もしくは、チーム内で共有変数の利⽤ルールを明確にする (↓例参照) 例：共有変数の棚卸しを⾏い「全テストで利⽤したい物」と「秘匿にする必要がある物」だけ定義して、この中にあるものは無条件で共有Step内で直接利⽤してOKと決めた。

Slide 18

Slide 18 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 18 共有Step作成における個⼈的鉄則共有Stepの活⽤拡張性を持たせる ● 共有Step内のステップは短くつくる ○ 様々な場⾯で、使いやすい処理の形で細かく作ると良い ■ 共有Step内で⼊れ⼦にする際も、共有Step同⼠を組み合わせて実装しやすくなる ● 引数で処理を分岐させる ○ 部分的に分岐する処理に対して、複数の共有Stepを作成しないこと ■ フラグを引数で渡して処理を分岐させる (↓例参照) 例：診察予約を⾏う共有Stepで、対⾯/オンライン診療どちらも選択できるよう引数で分岐させている

Slide 19

Slide 19 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 19 共有Step化を考えてみる例共有Stepの活⽤ // リンク先が新しいタブで開くまでの時間調整 // 開いたリンクが表⽰されたタブに移動 // URL確認後、開いたタブを閉じて // リンク先を開く前のタブに戻る // 今回URLを確認したい対象 # 利⽤規約のテキストリンクに設定されたURLが正しいか確認する

Slide 20

Slide 20 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 20 共有Step化を考えてみる例共有Stepの活⽤ // リンク先が新しいタブで開くまでの時間調整 // 開いたリンクが表⽰されたタブに移動 // URL確認後、開いたタブを閉じて // リンク先を開く前のタブに戻る // 今回URLを確認したい対象共有Step！✅ 共有Step！✅ # 利⽤規約のテキストリンクに設定されたURLが正しいか確認する共有Step！✅

Slide 21

Slide 21 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 21 明⽇から使える共有Stepのご紹介共有Stepの活⽤利⽤規約以外の確認でも利⽤できる ● 使いたいシーン毎に対象URLを設定すればOK ● また、待機時間も調整できる分割した共有Stepを⼊れ⼦にした ● ⼊れ⼦の共有Stepは単独でも良く使います共有Stepならメンテが容易 ● ChromeのIssueでタブを閉じるとsessionが不安定になるケースがあり、回避策を⼊れている # 遷移先のURLが正しいか確認する 📝テストケース内での利⽤イメージ 6⾏のステップが2⾏にまとまり、可読性UP

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 23 共有Stepを活⽤によるヘルススコア推移共有Stepの活⽤採点項⽬共有Step 活⽤後ヘルススコア： 30 → 90 ⼗分なメンバーが参加する⼗分なテストケースを作成する ‧共有ステップを活⽤するテストケースを⻑すぎないように保つテストケースを⽇次実⾏する定期実⾏によるテストが安定して成功する安定したロケータを使⽤する共有Stepを活⽤して⾃動テストを拡充しつつ適正化できたことで、スコアが90後半まで向上！

Slide 24

Slide 24 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 24 共有Stepを活⽤によるヘルススコア推移共有Stepの活⽤採点項⽬共有Step 活⽤後ヘルススコア： 30 → 90 ⼗分なメンバーが参加する⼗分なテストケースを作成する ‧共有ステップを活⽤するテストケースを⻑すぎないように保つテストケースを⽇次実⾏する定期実⾏によるテストが安定して成功する安定したロケータを使⽤する共有Stepを活⽤して⾃動テストを拡充しつつ適正化できたことで、スコアが90後半まで向上！安定したロケータが未達だが、成功率は安定しているし問題なし！😸👍 と当時は思っていた‧‧‧

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 26 悲報不安定なロケータの問題ディレクトリ変更が⾏われた際、ロケータに利⽤していたCSSのランダムなクラス名がすべて変更されてしまい、全ての要素特定に失敗。結果、全件Failする事件が起きた... ⾔ってたやん！💢 開発者が意図的に付与した値ではなく、ランダムな値 ※MagicPodのヘルススコアの改善項⽬にて、以前からフィードバック頂いていた..

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 31 Xpathについて Xpath活⽤ Xpathとは ● XML⽂書内の対象を指定するための⾔語 ● 画⾯に表⽰された「⽂字列とHTMLのタグ名」を元に要素を特定できるので、実装側のコードとの依存を剥がすことが可能 ● MagicPodも対応しており、data-testidの代⽤⼿段として利⽤価値あり！注意点 ● 当然、タグや⽂字列が変更されるケースもある ● 同画⾯に複数の同⼀⽂字列がある場合、INDEXをつけて特定できるが、並び順が変わると無⼒ ● ⾔うまでもなく、data-testidが最強である画⾯上に同⼀の⽂字列とタグがない場合、安定したロケータとして使える！

Slide 32

Slide 32 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 32 SelectorsHubのご紹介 Xpath活⽤ SelectorsHub ● Chromeアドオン ○ Xpathロケータを特定する際の強い味⽅ですメリット ● 指定した画⾯要素に対応するXpathの候補をサジェストしてくれる ● (重要) Xpathの試し打ちができる ○ ロケータを調整しながら、MagicPodでデバッグ実⾏する⼿間を削減できる！デメリット ● 課⾦圧がものすごく強いぐらい ○ 鎮座する巨⼤広告、定期的なモーダル、横からスライドしてくる広告⽂...

Slide 33

Slide 33 text

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 ヒットした要素

Slide 34

Slide 34 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 34 特定したXpathはロケータ編集から追加する Xpath活⽤ MagicPodのサジェストに利⽤したいXpathがない場合も... SelectorsHubで変更に強いXpathを特定特定したXpathをロケータに追加！安定したXpathロケータを素早く特定して利⽤可能！ (Xpathの知識が⾃然と⾝に付くメリットあり📝)

Slide 35

Slide 35 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 35 紹介した共有StepにXpathを利⽤した応⽤例 Xpath活⽤ # 遷移先のURLと表⽰項⽬を確認する ● リンクの遷移先URLの検証に加えて、ページが正しく表⽰されるか？まで検証できる共有Step ● 引数で対象のXpathを丸ごと渡すことで、遷移先のページ構成に依存せず、共通利⽤できる 📝利⽤イメージ引数でXpathロケータを丸ごとセット

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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を作れば呼び出し側が安定する