ロケーターを学んでテスト自動化上級者を目指そう

ロケーターを学んで
テスト⾃動化上級者を⽬指そう
MagicPod CEO
伊藤望
JaSST’23 Tokyo

View Slide

About me
• 伊藤望 (Ito Nozomi)
• 株式会社MagicPod CEO
• ⾃動テストツール歴：約13年
• Twitter：@ito_nozomi
• 著書

View Slide

MagicPod
• Web & モバイルアプリのE2Eテスト⾃動化SasS
• ノーコードで簡単にテスト作成
• 柔軟性とメンテナンス性が強み
(magicpod.com)

View Slide

ユーザーさんのブログ記事‧発表
MagicPodでE2Eテストを実装した話
みてねのE2E⾃動テスト導⼊戦略
アプリのテストに
MagicPodを導⼊している話
【インターンレポート】⾃動テストを
実装したら衝撃を受けた学⽣の話
Ubieのアプリ開発を⽀える
MagicPodを使った⾃動テスト
テスト⾃動化初⼼者がノーコードツール
「MagicPod」でテスト⾃動化に挑戦してみた

View Slide

Agenda
1. ロケーター概要
2. HTML概要
3. ロケーター⽂法解説
4. ロケーター実践トラブルシューティング
5. ロケーターの使い分け基準
6. XPath & CSSセレクター早⾒表

View Slide

2. HTML概要

View Slide

「ロケーター」って?
• UI⾃動テストツールにはロケーターの概念がある
• セレクターとも⾔う
• コード型ツールの場合、理解必須
• ノーコード型ツールも裏で使っている
- 理解すると、よりツールを使いこなせる
１. ロケーター概要
※ 例外もあります

View Slide

Webページの各画⾯要素(=画⾯項⽬)には、
エンジニアが裏でシステムIDを付けている

View Slide

userArea
passwdArea
signIn
Webページの各画⾯要素(=画⾯項⽬)には、
エンジニアが裏でシステムIDを付けている

View Slide

passwdArea
signIn
UI⾃動テストツールは、
このシステムIDで操作対象を認識する
テスト⼿順(=スクリプト)
テキスト⼊⼒(userArea, nozomi.ito)
テキスト⼊⼒(passwdArea, pass01)
クリック(signIn)
userArea

View Slide

???
???
システムIDがなかったり、
あってもツールで認識できない時は？
テスト⼿順
テキスト⼊⼒(???, nozomi.ito)
テキスト⼊⼒(???, pass01)
クリック(???)
???

View Slide

???
???
input[1] (上から1番⽬の⼊⼒エリアの意味) のような、
別の指定⽅法を使う
テキスト⼊⼒(input[1], nozomi.ito)
テキスト⼊⼒(input[2], pass01)
クリック(button[1])
???
テスト⼿順

View Slide

「ロケーター」とは
userArea input[1] のように、
テスト内で操作対象の画⾯要素を指定する部分
テキスト⼊⼒(userArea, nozomi.ito)
テキスト⼊⼒(passwdArea, pass01)
クリック(signIn)
テキスト⼊⼒(input[1], nozomi.ito)
テキスト⼊⼒(input[2], pass01)
クリック(button[1])

View Slide

ロケーターの⽂法の例
※ 細かい⽂法はツールによって異なる
※ MagicPodはSeleniumに近い⽂法
id=signIn システムIDがsignInの画⾯要素
xpath=//input[1] 上から1番⽬の⼊⼒エリア
xpath=//button[text()=ʻ検索’] テキストが「検索」のボタン

View Slide

要素のロケーターを調べるには?
①Chrome上で要素を右クリックして「検証」

View Slide

要素のロケーターを調べるには?
②システムIDを発⾒！

View Slide

• Webページの内部はHTMLで表される
• ロケーターの理解にはHTMLの理解が不可⽋
HTML

View Slide

2. HTML概要

View Slide

Webページの内部はHTML
2. HTML概要

placeholder="キーワード">
検索

View Slide

検索

HTMLの構造
2. HTML概要
「開始タグ」と「終了タグ」
のペアが1つの要素

View Slide

検索

HTMLの構造
2. HTML概要
「開始タグ」のみの
要素もある

View Slide

検索

HTMLの構造
2. HTML概要
「タグ名」で要素の種類が分かる
• input：各種⼊⼒エリア
• button：ボタン

View Slide

検索

HTMLの構造
2. HTML概要
テキストは開始と終了タグに
囲まれる

View Slide

HTMLの構造
2. HTML概要

検索

「属性」で要素の各種情報を指定
• システムID、システム名
• 初期表⽰テキスト(placeholder)
• …

View Slide

検索

HTMLの構造
2. HTML概要
⼊れ⼦の要素は
親⼦関係を表す

View Slide

2. HTML概要

View Slide

HTMLも分かったところで、
よく使うロケーター⽂法を解説

View Slide

よく使うロケーターその1 - id

検索

id=search
システムIDがsearchの要素 = id属性がsearhの要素

View Slide

よく使うロケーターその2 - name

検索

name=keyword
システム名がkeywordの要素 = name属性がkeywordの要素

View Slide

idとnameは何が違うのか？
• プログラム上の役割が違う
• どちらも要素を⼀意に特定するのに使える
• 両⽅ある時はnameの⽅が変更されにくい

View Slide

よく使うロケーターその3 - XPath

検索

xpath=//input[1]
上から1番⽬の⼊⼒エリア = 上から1番⽬のinputタグの要素

View Slide


検索

xpath=
//input[@name=ʻkeyword’]
name属性がkeywordのinput要素

View Slide


検索

テキストが「検索」のbutton要素
(属性ではないので@textと書けない)
xpath=
//button[text()=ʻ検索’]

View Slide


戻る
次へ

id属性がmainのform要素の下にある中で2番⽬のbutton要素
xpath=
//form[@id=ʻmain’]/button[2]

View Slide


戻る

次へ

xpath=
//form[@id=ʻmain’]/span[2]/button[1]

View Slide

よく使うロケーターその4 - CSSセレクター
• 表現⼒はXPathとだいたい同じ
• 開発者はこちらのが好き
• 詳細は今⽇は割愛

View Slide

2. HTML概要

View Slide

UI⾃動テストでよく⾒る
「要素が⾒つからない」エラーの
解決にチャレンジ！

View Slide

初級編

View Slide

4. ロケーター実践トラブルシューティング ‒ 初級編
クリック(id=OKButton)
昨⽇まで動いていたテスト

View Slide

「id=OKButton」の要素が⾒つかりません
エラー
エラー時の画⾯
いつものように実⾏
クリック(id=OKButton)

View Slide

OKボタン
あるやん..

View Slide

HTMLでOKButtonがあるか確認
要素を右クリックして「検証」

OK

HTMLを確認

View Slide

OKButtonちゃんとありそうだが..

OK

View Slide

OKButtonちゃんとありそうだが..

OK

よく⾒るとok
が⼩⽂字！

View Slide

原因エンジニアがボタンのidを変更した
テスト⼿順も変更
修正
クリック(id=OKButton) クリック(id=okButton)

View Slide

ちなみに

View Slide

クリック(id=OKButton) クリック(id=okButton)
MagicPodなら
このくらいは⾃動で修復します

View Slide

上級編

View Slide

4. ロケーター実践トラブルシューティング ‒ 上級編
クリック(xpath=//div[@id=ʻmain’]/div[1]/div[1]/a[1])
昨⽇まで動いていたテスト

View Slide

「xpath=//div[@id=ʻmain’]/div[1]/div[1]/a[1]」
の要素が⾒つかりません
エラー
エラー時の画⾯
いつものように実⾏

View Slide

ちょっと何⾔って
るか分かんない..

View Slide

まずは何⾔ってるのか解釈

テスト⾃動化なら

MagicPod

エラー時のHTML

View Slide



MagicPod

エラー時のHTML
//div[@id=ʻmain’]

View Slide



MagicPod

エラー時のHTML
//div[@id=ʻmain’]/div[1]

View Slide



MagicPod

エラー時のHTML
//div[@id=ʻmain’]/div[1]/div[1]

View Slide



MagicPod

エラー時のHTML
//div[@id=ʻmain’]/div[1]/div[1]
//div[@id=ʻmain’]/div[1]/div[1]/a[1]
??

View Slide

たしかに⾒つからないが..
そもそも何を操作したかったのか..

View Slide

テストを作った時のHTMLを⾒てみる

MagicPod

テスト作成時のHTML

View Slide

テストを作った時のHTMLを⾒てみる

MagicPod

あった！

View Slide

画⾯構成に変更がされていた模様

MagicPod



MagicPod
エラー時のHTML

View Slide

画⾯構成に変更がされていた模様

MagicPod



MagicPod
エラー時のHTML
クリック
したかったもの

View Slide

変更後の新画⾯でのロケーターは？


MagicPod

エラー時のHTML
//a[text()=ʻMagicPod’]
or

View Slide

原因エンジニアが画⾯構成を変更した
テスト⼿順も変更
修正

View Slide

ちなみに

View Slide

MagicPodなら
これも⾃動で修復します
※ 修復し損ねるケースもあります
クリック(xpath=//a[text()=ʻMagicPod’])

View Slide

2. HTML概要

View Slide

ロケーターはどれを使うのがいいのか？

戻る
次へ

xpath=//button[text()=ʻ戻る’]
xpath=//button[1]
xpath=
//form[@id=ʻmain’]/button[1]
全部同じ要素！

View Slide

メンテナンス性が⾼い
＝
画⾯の変更が⼊っても影響がない
良いロケーター
＝

View Slide

各種ロケーターのメンテナンス性
を考えてみる

View Slide

システムID、システム名
• 開発者が変更することは少なめ
• ReactJSを使った最近のサイトでは、
idは無かったりランダムだったりで使いにくいこと多し
…

検索
…

View Slide

テキスト ‒ 良いテキスト
• テストデータと関係ない画⾯表⽰テキストは、
変更されることは少なめ
• 多⾔語対応のテストをしたい場合は使えない
…

検索
…

View Slide

テキスト ‒ 悪いテキスト
• テストデータのテキストを
ロケーターにベタ書きすると変更に弱くなる
• テストケースの共通化の妨げにも
…
7,000円
…

View Slide

data-testid属性
• テスト専⽤につけられた、要素を⼀意に識別する属性
• 開発者は極⼒変更しないようにしてくれる(はず)
• 無い時は開発チームに依頼してみましょう
…
検索
…

View Slide

class属性
• 要素の⽬的‧デザインなどを表す種別
• 多くの場合、要素を⼀意に識別するものではない
…
検索
…

View Slide

上からの順番
変更に弱いので、できるだけ避けた⽅がよい
…
検索
…
xpath=//button[1]

View Slide

要素のパス
…

MagicPod

…
xpath=//div[@id=ʻmain’]/div[1]
変更に弱いので、できるだけ避けた⽅がよい

View Slide

各テストツールは
何を推奨しているか？

View Slide

Selenium
https://www.selenium.dev/documentation/test_practices/encouraged/locators
• idを推奨
• ReactJSの無い頃のドキュメントなので、
時代に合っていない気が

View Slide

Cypress
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements
• data-testid的アプローチを推奨
• id、name、テキストはケースバイケース

View Slide

Playwright
https://playwright.bootcss.com/python/docs/selectors#best-practices
• UIがあまり変わらない場合は、
テキストなどユーザーに⾒えているもの推奨
• そうでなければdata-testid推奨
• 多⾔語テストが少ない英語圏の発想な気が

View Slide

個⼈的おすすめ
まずはdata-testid属性
無理ならidかnameか良いテキスト

View Slide

2. HTML概要

View Slide

XPath CSSセレクター
id属性がokのbutton要素 //button[@id=’ok’] あまり使われません
id属性がokの要素 //*[@id=ʻok’] #ok
name属性がuserのinput要素 //input[@name=ʻuser’] input[name=ʻuser’]
name属性がradio
かつvalue属性がonのinput要素
//input[@name=ʻradio’][@value=ʻon’] input[name=ʻradio’][value=ʻon’]
data-testid属性がokのbutton要素 //button[@data-testid=’ok’] button[data-testid=’ok’]
テキストがOKのbutton要素 //button[text()=ʻOK’] ⾮対応
テキストがOKを含むbutton要素 //button[contains(text(),’OK’)] ⾮対応
class属性logoを持つ要素 CSSセレクターの利⽤がお勧め .logo
class属性logoを持つdiv要素 CSSセレクターの利⽤がお勧め div.logo
class属性logoとmainを持つdiv要素 CSSセレクターの利⽤がお勧め div.logo.main

View Slide

XPath CSSセレクター
上から2番⽬のinput要素 //input[2] ⾮対応
id属性がmainの要素直下のdiv要素 //*[@id=’main’]/div #main > div
id属性がmainの要素の下にある
div要素
//*[@id=’main’]//div #main div
id属性がmainの要素の直下にある
Div要素のうち上から2番⽬のもの
//*[@id=’main’]//div[2] #main > div:nth-of-type(2)
id属性がmainの要素直下のdiv要素の
さらに直下のinput要素
//*[@id=’main’]/div/input #main > div > input
id属性がokのbutton要素の親要素 //button[@id=ʻok’]/.. ⾮対応
id属性がmainの要素と同階層で、
それよりも後ろにあるdiv要素
//*{@id=ʻmain’/following-sibling::div #main ~ div
id属性がmainの要素と同階層で、
それよりも前にあるdiv要素
//*{@id=ʻmain’/preceding-sibling::div ⾮対応
※ 「⾮対応」の⼀部はPlaywrightなら可能

View Slide

今⽇お話できなかったこと
• CSSセレクターの詳細
• モバイルアプリ(Appium)のロケーター
• 相対ロケーター(Relative Locator)
• 良いロケーターが本当に無い場合

View Slide

MagicPodならロケーターは
⾃動計算＆⾃動修復！
@MagicPodJP

View Slide

イベント告知

View Slide

Thank you！

View Slide

ロケーターを学んでテスト自動化上級者を目指そう

ロケーターを学んでテスト自動化上級者を目指そう

Nozomi Ito

More Decks by Nozomi Ito

Other Decks in Technology

Featured

Transcript