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

Copyright © Bitkey Inc. All rights reserved. 仕様変更に対応した強固かつ柔軟なアサーションを実現するXPathの活用法〜ビットキーにおける課題とその解決策〜
株式会社ビットキー　三上鹿　| 2024/11/20

Copyright © Bitkey Inc. All rights reserved. 三上鹿 Mikami
Roku ~2022 2022/10~ 2023/1~ ・某ゲーム会社のテスターとして活動を開始・主にソフトウェアのアップデートに関する　テスト実行業務に従事・ビットキーにテストエンジニアとして Join ・スマートロックに関する製品のうち、 Web 　アプリケーションを中心にテスト活動を行う・ビットキーにてmablの利用を開始・社内でのテスト自動化チームの一員として活動 2024/11~ ・社内転職してソフトウェアエンジニアに。・Webアプリケーションの設計、実装段階での　製品の品質を維持・向上させるために活動中 ◾所属株式会社ビットキー QAエンジニア/テストエンジニア

Outline Copyright © Bitkey Inc. All rights reserved. 1. 本セッションで伝えたいこと
2. mablアプリ内のXPathでできること 3. XPathを使うきっかけになった課題 4. XPathを使うまでの試み 5. XPathの導入 6. 課題に対してのXPathの活用 7. まとめ

11 Copyright © 2024 Bitkey Inc. All right reserved. XPathはwebページの要素を直
接指定して操作を行うことができる本セッションで伝えたいこと

12 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと
XPathはwebページの要素を直接指定して操作を行うことができる →独立性を高めることで他の要素と切り離してテストを行うことができる

XPathはmablでテストを作成する際の手段の1つ

XPathはmablでテストを作成する際の手段の1つ →自動修復機能が働き難いページや、精度の高い検証が必要なテストで活躍します

XPathを利用するためには学習コストが必要

XPathを利用するためには学習コストが必要 →1~2日あれば使い始められるくらいのボリューム

18 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾XPathとは ①“XML Path Language” ②XML文書内の要素や属性を指定して検索・抽出などを行うための言語 ③HTML文書に対しても使用可能

◾mablでのXPathの使い方 ①「ステップを追加」を選択 ②「ステップの挿入」を選択 ③「要素の検索」を選択 ④「クエリ > XPath」を選択 ※CSSにしてもXPathのクエリ使える...

◾クエリ条件に合致した要素がある時の表示

◾ヒットした件数を変数に保存したり・・・

◾要素に対して各キーボード操作を行えたり・・・

◾アサーションを行うことが可能

◾補足・要素の検索ではCSS検索も可能・CSS検索はまだ最近使い始めたばかりで紹介するほどの　内容がないので今回のセッションでは扱いません

26 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うきっかけになった課題
◾下記の事象に遭遇 ①テスト作成後、テストステップを実行すると失敗した ②クラウド環境でのみ、失敗するテストステップがあった

・作成した時は問題なく動いた・ローカル環境での実行は成功・クラウドで動かした場合だけなぜか失敗してしまう・再作成しても解決せず

・作成した時は問題なく動いた・ローカル環境での実行は成功・クラウドで動かした場合だけなぜか失敗してしまう・再作成しても解決せず → どうすればいいんだろう・・・

30 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
失敗した時の状況を整理してみよう

◾失敗したテストステップの共通点・レコーディング機能で作成・画面上の要素を対象に操作を行う・“Element not found”のエラーメッセージ・同じ名前のボタンが画面上に複数表示されているような状態

「要素が見つかりませんでした」というエラーメッセージが表示されている

「要素が見つかりませんでした」というエラーメッセージが表示されている → 対象の要素に関する追加の情報を与えてあげれば良い？

◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS)

◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・

◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう

検索の設定ではどの情報を追加で与えるか選択できる

検索の設定ではどの情報を追加で与えるか選択できる → container(どこにあるか)・ role(どういう働きをするか) ・innerText(何というテキストが表示されているか)に指定を行ってみた

39 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・
XPathを使うまでの試み

一部のテストは成功！ XPathを使うまでの試み

一部のテストは成功！ → しかし引き続き”Element not found”で失敗するテストがある・・・ XPathを使うまでの試み

42 Copyright © 2024 Bitkey Inc. All right reserved. 別のアプローチで原因を
探ってみた XPathを使うまでの試み

45 Copyright © 2024 Bitkey Inc. All right reserved. レコーディング機能で作成
した際の情報を確認できる XPathを使うまでの試み

XPathってどういう情報？🧐

これがXPathを知ったきっかけでした

49 Copyright © 2024 Bitkey Inc. All right reserved. ◾XPathの読み方について軽く調べた結果・・・
・パスの開始地点(ルートノード) がhtmlになっている・htmlはhtml文書の最初に記載するもの課題に対してのXPathの活用

・パスの開始地点(ルートノード) がhtmlになっている・htmlはhtml文書の最初に記載するもの課題に対してのXPathの活用 → ページ全体を一つずつ掘り下げている → 他の要素に影響されてしまっているかも？

・パスの開始地点(ルートノード) がhtmlになっている・htmlはhtml文書の最初に記載するもの課題に対してのXPathの活用 → ページ全体を一つずつ掘り下げている → 他の要素に影響されてしまっているかも？ XPathを使えば開始地点をもっと近くできそう

53 Copyright © 2024 Bitkey Inc. All right reserved. XPathの導入
◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう

54 Copyright © 2024 Bitkey Inc. All right reserved. ◾要素の追加情報を与える方法
①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そうどれくらい時間がかかるかわからないけどとりあえず 1日やってみよう・・・ XPathの導入

XPathの導入

56 Copyright © 2024 Bitkey Inc. All right reserved. 意外と1日で覚えられました
※後日他メンバーにオンボーディングを行ってもらった際も1~2日で完了 ◾結果・・・ XPathの導入

57 Copyright © 2024 Bitkey Inc. All right reserved. ◾覚える際に意識したこと
①HTML文書の読み方 XPathの導入

①HTML文書の読み方 ②HTML要素の読み方 XPathの導入

①HTML文書の読み方 ②HTML要素の読み方 ③XPathの書き方 XPathの導入

削除ダイアログ上の「削除」ボタンを選択して動作を確認するテスト → 操作を行った結果どうだったかはこの直後に確認する。そのためここでは「ダイアログ上の削除ボタン」が選択できれば良いのでは？課題に対してのXPathの活用

HTMLから階層を指定するのではなく、ダイアログを構成する要素から階層を指定するようにしてみる課題に対してのXPathの活用

HTMLから階層を指定するのではなく、ダイアログを構成する要素から階層を指定するようにしてみる →抽象度をあげることで　動きやすくさせる課題に対してのXPathの活用

HTMLから階層を指定するのではなく、ダイアログを構成する要素から階層を指定するようにしてみる //ダイアログのルート要素 //button[text()=’削除’] →抽象度をあげることで　動きやすくさせる課題に対してのXPathの活用

課題に対してのXPathの活用

残りのテストも成功するように！課題に対してのXPathの活用

//div/div[2]/button[text()=’削除’] ダイアログ以外のコンポーネントで同じ構造を持つものが現れたら失敗するな・・・課題に対してのXPathの活用

//div/div[2]/button[text()=’削除’] //*[@role=’dialog’]//button[text()=’削除’] 課題に対してのXPathの活用

・ダイアログである証明はrole 属性に’dialog’をもっていること・role属性を指定できればタグ名は任意(*)で良い課題に対してのXPathの活用

・ダイアログである証明はrole 属性に’dialog’をもっていること・role属性を指定できればタグ名は任意(*)で良い「データ削除時にダイアログを表示する」という仕様が続くうちは安定してテストできる課題に対してのXPathの活用

【mabl experience 2024登壇スライド】仕様変更に対応した強固かつ柔軟な アサ...

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

More Decks by Roku Mikami

Other Decks in Technology

Featured

Transcript

【mabl experience 2024登壇スライド】仕様変更に対応した強固かつ柔軟なアサ...

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