【mabl experience 2024登壇スライド】仕様変更に対応した強固かつ柔軟な アサーションを実現するXPathの活用法〜ビットキーにおける課題とその解決策〜

下記イベントに登壇した際の資料になります
https://experience.mabl.com/ja/

Transcript

1. Copyright © Bitkey Inc. All rights reserved. 仕様変更に対応した強固かつ柔軟な アサーションを実現するXPathの活用法 〜ビットキーにおける課題とその解決策〜 株式会社ビットキー　三上 鹿　| 2024/11/20
2. © 2024 Bitkey Inc. 自己紹介
3. Copyright © Bitkey Inc. All rights reserved. 三上 鹿 Mikami Roku ~2022 2022/10~ 2023/1~ ・某ゲーム会社のテスターとして活動を開始 ・主にソフトウェアのアップデートに関する 　テスト実行業務に従事 ・ビットキーにテストエンジニアとして Join ・スマートロックに関する製品のうち、 Web 　アプリケーションを中心にテスト活動を行う ・ビットキーにてmablの利用を開始 ・社内でのテスト自動化チームの一員として活動 2024/11~ ・社内転職してソフトウェアエンジニアに。 ・Webアプリケーションの設計、実装段階での 　製品の品質を維持・向上させるために活動中 ◾所属 株式会社ビットキー QAエンジニア/テストエンジニア
4. © 2024 Bitkey Inc. 会社紹介
5. 5 Copyright © 2024 Bitkey Inc. All right reserved.
6. Copyright © Bitkey Inc. All rights reserved.
7. 7 Copyright © 2024 Bitkey Inc. All right reserved. homehubは住宅における、スマートロックによる出入りの管理を主軸とし、「暮らし」に関わる様々な体験を実現します
8. 8 Copyright © 2024 Bitkey Inc. All right reserved. workhubは「働く空間」と「働くひとや業務」を管理し、体験をつなぎ合わせ、快適な仕事を実現する。
9. Outline Copyright © Bitkey Inc. All rights reserved. 1. 本セッションで伝えたいこと 2. mablアプリ内のXPathでできること 3. XPathを使うきっかけになった課題 4. XPathを使うまでの試み 5. XPathの導入 6. 課題に対してのXPathの活用 7. まとめ
10. © 2024 Bitkey Inc. 本セッションで伝えたいこと
11. 11 Copyright © 2024 Bitkey Inc. All right reserved. XPathはwebページの要素を直 接指定して操作を行うことがで きる 本セッションで伝えたいこと
12. 12 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと XPathはwebページの要素を直 接指定して操作を行うことがで きる →独立性を高めることで他の要 素と切り離してテストを行うこと ができる
13. 13 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと XPathはmablでテストを作成す る際の手段の1つ
14. 14 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと XPathはmablでテストを作成す る際の手段の1つ →自動修復機能が働き難い ページや、精度の高い検証が 必要なテストで活躍します
15. 15 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと XPathを利用するためには 学習コストが必要
16. 16 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと XPathを利用するためには 学習コストが必要 →1~2日あれば使い始められる くらいのボリューム
17. © 2024 Bitkey Inc. mablアプリ内のXPathでできること
18. 18 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること ◾XPathとは ①“XML Path Language” ②XML文書内の要素や属性を指定 して検索・抽出などを行うための 言語 ③HTML文書に対しても使用可能
19. 19 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること ◾mablでのXPathの使い方 ①「ステップを追加」を選択 ②「ステップの挿入」を選択 ③「要素の検索」を選択 ④「クエリ > XPath」を選択 ※CSSにしてもXPathのクエリ使える...
20. 20 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること ◾クエリ条件に合致した要素がある時の表示
21. 21 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること ◾ヒットした件数を変数に保存したり・・・
22. 22 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること ◾要素に対して各キーボード操作を行えたり・・・
23. 23 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること ◾アサーションを行うことが可能
24. 24 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること ◾補足 ・要素の検索ではCSS検索も可能 ・CSS検索はまだ最近使い始めたばかりで紹介するほどの 　内容がないので今回のセッションでは扱いません
25. © 2024 Bitkey Inc. XPathを使うきっかけになった課題
26. 26 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うきっかけになった課題 ◾下記の事象に遭遇 ①テスト作成後、テストステップを実 行すると失敗した ②クラウド環境でのみ、失敗するテス トステップがあった
27. 27 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うきっかけになった課題 ・作成した時は問題なく動いた ・ローカル環境での実行は成功 ・クラウドで動かした場合だけなぜ か失敗してしまう ・再作成しても解決せず
28. 28 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うきっかけになった課題 ・作成した時は問題なく動いた ・ローカル環境での実行は成功 ・クラウドで動かした場合だけなぜ か失敗してしまう ・再作成しても解決せず → どうすればいいんだろう・・・
29. © 2024 Bitkey Inc. XPathを使うまでの試み
30. 30 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み 失敗した時の状況を 整理してみよう
31. 31 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み ◾失敗したテストステップの共通点 ・レコーディング機能で作成 ・画面上の要素を対象に操作を行う ・“Element not found”のエラーメッセージ ・同じ名前のボタンが画面上に複数表示されているような状態
32. 32 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み 「要素が見つかりませんでした」 というエラーメッセージが表示 されている
33. 33 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み 「要素が見つかりませんでした」 というエラーメッセージが表示 されている → 対象の要素に関する追加の情報 を与えてあげれば良い？
34. 34 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み ◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS)
35. 35 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み ◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・
36. 36 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み ◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう
37. 37 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み 検索の設定ではどの情報を追加で与 えるか選択できる
38. 38 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み 検索の設定ではどの情報を追加で与 えるか選択できる → container(どこにあるか)・ role(どういう働きをするか) ・innerText(何というテキストが表示さ れているか)に指定を行ってみた
39. 39 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・ XPathを使うまでの試み
40. 40 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・ 一部のテストは成功！ XPathを使うまでの試み
41. 41 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・ 一部のテストは成功！ → しかし引き続き”Element not found”で失敗するテストが ある・・・ XPathを使うまでの試み
42. 42 Copyright © 2024 Bitkey Inc. All right reserved. 別のアプローチで原因を 探ってみた XPathを使うまでの試み
43. 43 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
44. 44 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
45. 45 Copyright © 2024 Bitkey Inc. All right reserved. レコーディング機能で作成 した際の情報を確認できる XPathを使うまでの試み
46. 46 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
47. 47 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み XPathってどういう情報？🧐
48. 48 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み これがXPathを知った きっかけでした
49. 49 Copyright © 2024 Bitkey Inc. All right reserved. ◾XPathの読み方について軽く調べた結果・・・ ・パスの開始地点(ルートノード) がhtmlになっている ・htmlはhtml文書の最初に 記載するもの 課題に対してのXPathの活用
50. 50 Copyright © 2024 Bitkey Inc. All right reserved. ◾XPathの読み方について軽く調べた結果・・・ ・パスの開始地点(ルートノード) がhtmlになっている ・htmlはhtml文書の最初に 記載するもの 課題に対してのXPathの活用 → ページ全体を一つずつ掘り下げている → 他の要素に影響されてしまっているかも？
51. 51 Copyright © 2024 Bitkey Inc. All right reserved. ◾XPathの読み方について軽く調べた結果・・・ ・パスの開始地点(ルートノード) がhtmlになっている ・htmlはhtml文書の最初に 記載するもの 課題に対してのXPathの活用 → ページ全体を一つずつ掘り下げている → 他の要素に影響されてしまっているかも？ XPathを使えば開始地点 をもっと近くできそう
52. © 2024 Bitkey Inc. XPathの導入
53. 53 Copyright © 2024 Bitkey Inc. All right reserved. XPathの導入 ◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう
54. 54 Copyright © 2024 Bitkey Inc. All right reserved. ◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう どれくらい時間がかかるかわ からないけどとりあえず 1日やってみよう・・・ XPathの導入
55. 55 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・ XPathの導入
56. 56 Copyright © 2024 Bitkey Inc. All right reserved. 意外と1日で覚えられました ※後日他メンバーにオンボーディングを 行ってもらった際も1~2日で完了 ◾結果・・・ XPathの導入
57. 57 Copyright © 2024 Bitkey Inc. All right reserved. ◾覚える際に意識したこと ①HTML文書の読み方 XPathの導入
58. 58 Copyright © 2024 Bitkey Inc. All right reserved. ◾覚える際に意識したこと ①HTML文書の読み方 ②HTML要素の読み方 XPathの導入
59. 59 Copyright © 2024 Bitkey Inc. All right reserved. ◾覚える際に意識したこと ①HTML文書の読み方 ②HTML要素の読み方 ③XPathの書き方 XPathの導入
60. 60 Copyright © 2024 Bitkey Inc. All right reserved. ◾補足 ・Webサイト全体の作りを覚えようとする と学習コストは大きい ・XPathを利用するだけならHTMLの基 礎知識を覚えるだけでOKでした XPathの導入
61. © 2024 Bitkey Inc. 課題に対してのXPathの活用
62. 62 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か 削除ダイアログ上の「削除」ボタンを選 択して動作を確認するテスト 課題に対してのXPathの活用
63. 63 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か 削除ダイアログ上の「削除」ボタンを選 択して動作を確認するテスト → 操作を行った結果どうだったかはこの 直後に確認する。そのためここ では「ダイアログ上の削除ボタン」が 選択できれば良いのでは？ 課題に対してのXPathの活用
64. 64 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か HTMLから階層を指定するので はなく、ダイアログを構成する要 素から階層を指定するようにし てみる 課題に対してのXPathの活用
65. 65 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か HTMLから階層を指定するので はなく、ダイアログを構成する要 素から階層を指定するようにし てみる →抽象度をあげることで 　動きやすくさせる 課題に対してのXPathの活用
66. 66 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か HTMLから階層を指定するので はなく、ダイアログを構成する要 素から階層を指定するようにし てみる //ダイアログのルート要素 //button[text()=’削除’] →抽象度をあげることで 　動きやすくさせる 課題に対してのXPathの活用
67. 67 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・ 課題に対してのXPathの活用
68. 68 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・ 残りのテストも成功するように！ 課題に対してのXPathの活用
69. 69 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・ //div/div[2]/button[text()=’削除’] 課題に対してのXPathの活用
70. 70 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・ //div/div[2]/button[text()=’削除’] ダイアログ以外のコンポーネントで 同じ構造を持つものが現れたら失敗 するな・・・ 課題に対してのXPathの活用
71. 71 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・ //div/div[2]/button[text()=’削除’] //*[@role=’dialog’]//button[text()=’削除’] 課題に対してのXPathの活用
72. 72 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・ ・ダイアログである証明はrole 属性に’dialog’をもっているこ と ・role属性を指定できればタ グ名は任意(*)で良い 課題に対してのXPathの活用
73. 73 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・ ・ダイアログである証明はrole 属性に’dialog’をもっているこ と ・role属性を指定できればタ グ名は任意(*)で良い 「データ削除時にダイアログを 表示する」という仕様が続くうちは安 定してテストできる 課題に対してのXPathの活用
74. © 2024 Bitkey Inc. XPathのさらなる活用
75. 75 Copyright © 2024 Bitkey Inc. All right reserved. XPathのさらなる活用 XPathの使い方を覚えたことで mablで実装可能なテストの幅が広 がりました
76. 76 Copyright © 2024 Bitkey Inc. All right reserved. ◾要素の数をカウントする機能 データの件数表示と実際に表示さ れているデータの要素数を 比較したい → 実装可能に！ XPathのさらなる活用
77. 77 Copyright © 2024 Bitkey Inc. All right reserved. ◾要素の順番指定 ランダムに任意の要素を選択 させたときに意図した挙動を 行うか確認したい → 実装可能に！ XPathのさらなる活用
78. 78 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う際の注意点 XPathは自動修復機能が使えない XPathのさらなる活用
79. 79 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う際の注意点 XPathは自動修復機能が使えない → 問題が発生した際、1つ1つ修 正する必要がある XPathのさらなる活用
80. 80 Copyright © 2024 Bitkey Inc. All right reserved. 弊社では下記方針を採用しています ①基本はレコーディング機能 ②ダメだったら検索の設定を試す ③さらにダメだったらXPathを使う XPathのさらなる活用
81. 81 Copyright © 2024 Bitkey Inc. All right reserved. 弊社では下記方針を採用しています ①基本はレコーディング機能 ②ダメだったら検索の設定を試す ③さらにダメだったらXPathを使う それぞれの機能を適材適所で用いる ことでパフォーマンスを向上 XPathのさらなる活用
82. © 2024 Bitkey Inc. 　まとめ
83. 83 Copyright © 2024 Bitkey Inc. All right reserved. ①ビットキーにおいては自動修復機能が働き難い箇所でXPathを 活用することでテストが成功するようになった ②XPathを使うことで実装できるテストの範囲が広がった ③学習コストは1~2日程度 ④使用する際は自動修復機能が使えないことを考慮する まとめ
84. © 2024 Bitkey Inc. 　End of File