Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【mabl experience 2024登壇スライド】仕様変更に対応した強固かつ柔軟な アサ...
Search
Roku Mikami
November 21, 2024
Technology
0
97
【mabl experience 2024登壇スライド】仕様変更に対応した強固かつ柔軟な アサーションを実現するXPathの活用法〜ビットキーにおける課題とその解決策〜
下記イベントに登壇した際の資料になります
https://experience.mabl.com/ja/
Roku Mikami
November 21, 2024
Tweet
Share
More Decks by Roku Mikami
See All by Roku Mikami
【Developers Summit 2024】自動テスト歴0年でもできる! ~1年目で得られた成果と展望~
r0ku
0
2.9k
【mablers_JP - Online MeetsUp vol.4】Bitkeyでのmablを活用したテストエンジニアの思考プロセス機械化
r0ku
0
770
Other Decks in Technology
See All in Technology
VCC 2025 Write-up
bata_24
0
180
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
150
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
1k
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
140
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
120
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
340
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
430
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
430
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
230
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
78k
about #74462 go/token#FileSet
tomtwinkle
1
480
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Building Applications with DynamoDB
mza
96
6.6k
KATA
mclloyd
32
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Code Reviewing Like a Champion
maltzj
525
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
GraphQLとの向き合い方2022年版
quramy
49
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Transcript
Copyright © Bitkey Inc. All rights reserved. 仕様変更に対応した強固かつ柔軟な アサーションを実現するXPathの活用法 〜ビットキーにおける課題とその解決策〜
株式会社ビットキー 三上 鹿 | 2024/11/20
© 2024 Bitkey Inc. 自己紹介
Copyright © Bitkey Inc. All rights reserved. 三上 鹿 Mikami
Roku ~2022 2022/10~ 2023/1~ ・某ゲーム会社のテスターとして活動を開始 ・主にソフトウェアのアップデートに関する テスト実行業務に従事 ・ビットキーにテストエンジニアとして Join ・スマートロックに関する製品のうち、 Web アプリケーションを中心にテスト活動を行う ・ビットキーにてmablの利用を開始 ・社内でのテスト自動化チームの一員として活動 2024/11~ ・社内転職してソフトウェアエンジニアに。 ・Webアプリケーションの設計、実装段階での 製品の品質を維持・向上させるために活動中 ◾所属 株式会社ビットキー QAエンジニア/テストエンジニア
© 2024 Bitkey Inc. 会社紹介
5 Copyright © 2024 Bitkey Inc. All right reserved.
Copyright © Bitkey Inc. All rights reserved.
7 Copyright © 2024 Bitkey Inc. All right reserved. homehubは住宅における、スマートロックによる出入りの管理を主軸とし、「暮らし」に関わる様々な体験を実現します
8 Copyright © 2024 Bitkey Inc. All right reserved. workhubは「働く空間」と「働くひとや業務」を管理し、体験をつなぎ合わせ、快適な仕事を実現する。
Outline Copyright © Bitkey Inc. All rights reserved. 1. 本セッションで伝えたいこと
2. mablアプリ内のXPathでできること 3. XPathを使うきっかけになった課題 4. XPathを使うまでの試み 5. XPathの導入 6. 課題に対してのXPathの活用 7. まとめ
© 2024 Bitkey Inc. 本セッションで伝えたいこと
11 Copyright © 2024 Bitkey Inc. All right reserved. XPathはwebページの要素を直
接指定して操作を行うことがで きる 本セッションで伝えたいこと
12 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと
XPathはwebページの要素を直 接指定して操作を行うことがで きる →独立性を高めることで他の要 素と切り離してテストを行うこと ができる
13 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと
XPathはmablでテストを作成す る際の手段の1つ
14 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと
XPathはmablでテストを作成す る際の手段の1つ →自動修復機能が働き難い ページや、精度の高い検証が 必要なテストで活躍します
15 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと
XPathを利用するためには 学習コストが必要
16 Copyright © 2024 Bitkey Inc. All right reserved. 本セッションで伝えたいこと
XPathを利用するためには 学習コストが必要 →1~2日あれば使い始められる くらいのボリューム
© 2024 Bitkey Inc. mablアプリ内のXPathでできること
18 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾XPathとは ①“XML Path Language” ②XML文書内の要素や属性を指定 して検索・抽出などを行うための 言語 ③HTML文書に対しても使用可能
19 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾mablでのXPathの使い方 ①「ステップを追加」を選択 ②「ステップの挿入」を選択 ③「要素の検索」を選択 ④「クエリ > XPath」を選択 ※CSSにしてもXPathのクエリ使える...
20 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾クエリ条件に合致した要素がある時の表示
21 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾ヒットした件数を変数に保存したり・・・
22 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾要素に対して各キーボード操作を行えたり・・・
23 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾アサーションを行うことが可能
24 Copyright © 2024 Bitkey Inc. All right reserved. mablアプリ内のXPathでできること
◾補足 ・要素の検索ではCSS検索も可能 ・CSS検索はまだ最近使い始めたばかりで紹介するほどの 内容がないので今回のセッションでは扱いません
© 2024 Bitkey Inc. XPathを使うきっかけになった課題
26 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うきっかけになった課題
◾下記の事象に遭遇 ①テスト作成後、テストステップを実 行すると失敗した ②クラウド環境でのみ、失敗するテス トステップがあった
27 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うきっかけになった課題
・作成した時は問題なく動いた ・ローカル環境での実行は成功 ・クラウドで動かした場合だけなぜ か失敗してしまう ・再作成しても解決せず
28 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うきっかけになった課題
・作成した時は問題なく動いた ・ローカル環境での実行は成功 ・クラウドで動かした場合だけなぜ か失敗してしまう ・再作成しても解決せず → どうすればいいんだろう・・・
© 2024 Bitkey Inc. XPathを使うまでの試み
30 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
失敗した時の状況を 整理してみよう
31 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
◾失敗したテストステップの共通点 ・レコーディング機能で作成 ・画面上の要素を対象に操作を行う ・“Element not found”のエラーメッセージ ・同じ名前のボタンが画面上に複数表示されているような状態
32 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
「要素が見つかりませんでした」 というエラーメッセージが表示 されている
33 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
「要素が見つかりませんでした」 というエラーメッセージが表示 されている → 対象の要素に関する追加の情報 を与えてあげれば良い?
34 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS)
35 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・
36 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう
37 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
検索の設定ではどの情報を追加で与 えるか選択できる
38 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
検索の設定ではどの情報を追加で与 えるか選択できる → container(どこにあるか)・ role(どういう働きをするか) ・innerText(何というテキストが表示さ れているか)に指定を行ってみた
39 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・
XPathを使うまでの試み
40 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・
一部のテストは成功! XPathを使うまでの試み
41 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・
一部のテストは成功! → しかし引き続き”Element not found”で失敗するテストが ある・・・ XPathを使うまでの試み
42 Copyright © 2024 Bitkey Inc. All right reserved. 別のアプローチで原因を
探ってみた XPathを使うまでの試み
43 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
44 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
45 Copyright © 2024 Bitkey Inc. All right reserved. レコーディング機能で作成
した際の情報を確認できる XPathを使うまでの試み
46 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
47 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
XPathってどういう情報?🧐
48 Copyright © 2024 Bitkey Inc. All right reserved. XPathを使うまでの試み
これがXPathを知った きっかけでした
49 Copyright © 2024 Bitkey Inc. All right reserved. ◾XPathの読み方について軽く調べた結果・・・
・パスの開始地点(ルートノード) がhtmlになっている ・htmlはhtml文書の最初に 記載するもの 課題に対してのXPathの活用
50 Copyright © 2024 Bitkey Inc. All right reserved. ◾XPathの読み方について軽く調べた結果・・・
・パスの開始地点(ルートノード) がhtmlになっている ・htmlはhtml文書の最初に 記載するもの 課題に対してのXPathの活用 → ページ全体を一つずつ掘り下げている → 他の要素に影響されてしまっているかも?
51 Copyright © 2024 Bitkey Inc. All right reserved. ◾XPathの読み方について軽く調べた結果・・・
・パスの開始地点(ルートノード) がhtmlになっている ・htmlはhtml文書の最初に 記載するもの 課題に対してのXPathの活用 → ページ全体を一つずつ掘り下げている → 他の要素に影響されてしまっているかも? XPathを使えば開始地点 をもっと近くできそう
© 2024 Bitkey Inc. XPathの導入
53 Copyright © 2024 Bitkey Inc. All right reserved. XPathの導入
◾要素の追加情報を与える方法 ①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう
54 Copyright © 2024 Bitkey Inc. All right reserved. ◾要素の追加情報を与える方法
①検索の設定 ②要素の検索(XPath/CSS) → 要素の検索は難しそう・・・ → 学習コストが低い①から試そう どれくらい時間がかかるかわ からないけどとりあえず 1日やってみよう・・・ XPathの導入
55 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・
XPathの導入
56 Copyright © 2024 Bitkey Inc. All right reserved. 意外と1日で覚えられました
※後日他メンバーにオンボーディングを 行ってもらった際も1~2日で完了 ◾結果・・・ XPathの導入
57 Copyright © 2024 Bitkey Inc. All right reserved. ◾覚える際に意識したこと
①HTML文書の読み方 XPathの導入
58 Copyright © 2024 Bitkey Inc. All right reserved. ◾覚える際に意識したこと
①HTML文書の読み方 ②HTML要素の読み方 XPathの導入
59 Copyright © 2024 Bitkey Inc. All right reserved. ◾覚える際に意識したこと
①HTML文書の読み方 ②HTML要素の読み方 ③XPathの書き方 XPathの導入
60 Copyright © 2024 Bitkey Inc. All right reserved. ◾補足
・Webサイト全体の作りを覚えようとする と学習コストは大きい ・XPathを利用するだけならHTMLの基 礎知識を覚えるだけでOKでした XPathの導入
© 2024 Bitkey Inc. 課題に対してのXPathの活用
62 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か
削除ダイアログ上の「削除」ボタンを選 択して動作を確認するテスト 課題に対してのXPathの活用
63 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か
削除ダイアログ上の「削除」ボタンを選 択して動作を確認するテスト → 操作を行った結果どうだったかはこの 直後に確認する。そのためここ では「ダイアログ上の削除ボタン」が 選択できれば良いのでは? 課題に対してのXPathの活用
64 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か
HTMLから階層を指定するので はなく、ダイアログを構成する要 素から階層を指定するようにし てみる 課題に対してのXPathの活用
65 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か
HTMLから階層を指定するので はなく、ダイアログを構成する要 素から階層を指定するようにし てみる →抽象度をあげることで 動きやすくさせる 課題に対してのXPathの活用
66 Copyright © 2024 Bitkey Inc. All right reserved. ◾検索の設定と差をつけるために何が必要か
HTMLから階層を指定するので はなく、ダイアログを構成する要 素から階層を指定するようにし てみる //ダイアログのルート要素 //button[text()=’削除’] →抽象度をあげることで 動きやすくさせる 課題に対してのXPathの活用
67 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・
課題に対してのXPathの活用
68 Copyright © 2024 Bitkey Inc. All right reserved. ◾結果・・・
残りのテストも成功するように! 課題に対してのXPathの活用
69 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・
//div/div[2]/button[text()=’削除’] 課題に対してのXPathの活用
70 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・
//div/div[2]/button[text()=’削除’] ダイアログ以外のコンポーネントで 同じ構造を持つものが現れたら失敗 するな・・・ 課題に対してのXPathの活用
71 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・
//div/div[2]/button[text()=’削除’] //*[@role=’dialog’]//button[text()=’削除’] 課題に対してのXPathの活用
72 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・
・ダイアログである証明はrole 属性に’dialog’をもっているこ と ・role属性を指定できればタ グ名は任意(*)で良い 課題に対してのXPathの活用
73 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う中でさらに工夫を重ね・・・
・ダイアログである証明はrole 属性に’dialog’をもっているこ と ・role属性を指定できればタ グ名は任意(*)で良い 「データ削除時にダイアログを 表示する」という仕様が続くうちは安 定してテストできる 課題に対してのXPathの活用
© 2024 Bitkey Inc. XPathのさらなる活用
75 Copyright © 2024 Bitkey Inc. All right reserved. XPathのさらなる活用
XPathの使い方を覚えたことで mablで実装可能なテストの幅が広 がりました
76 Copyright © 2024 Bitkey Inc. All right reserved. ◾要素の数をカウントする機能
データの件数表示と実際に表示さ れているデータの要素数を 比較したい → 実装可能に! XPathのさらなる活用
77 Copyright © 2024 Bitkey Inc. All right reserved. ◾要素の順番指定
ランダムに任意の要素を選択 させたときに意図した挙動を 行うか確認したい → 実装可能に! XPathのさらなる活用
78 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う際の注意点
XPathは自動修復機能が使えない XPathのさらなる活用
79 Copyright © 2024 Bitkey Inc. All right reserved. ◾使う際の注意点
XPathは自動修復機能が使えない → 問題が発生した際、1つ1つ修 正する必要がある XPathのさらなる活用
80 Copyright © 2024 Bitkey Inc. All right reserved. 弊社では下記方針を採用しています
①基本はレコーディング機能 ②ダメだったら検索の設定を試す ③さらにダメだったらXPathを使う XPathのさらなる活用
81 Copyright © 2024 Bitkey Inc. All right reserved. 弊社では下記方針を採用しています
①基本はレコーディング機能 ②ダメだったら検索の設定を試す ③さらにダメだったらXPathを使う それぞれの機能を適材適所で用いる ことでパフォーマンスを向上 XPathのさらなる活用
© 2024 Bitkey Inc. まとめ
83 Copyright © 2024 Bitkey Inc. All right reserved. ①ビットキーにおいては自動修復機能が働き難い箇所でXPathを
活用することでテストが成功するようになった ②XPathを使うことで実装できるテストの範囲が広がった ③学習コストは1~2日程度 ④使用する際は自動修復機能が使えないことを考慮する まとめ
© 2024 Bitkey Inc. End of File