$30 off During Our Annual Pro Sale. View Details »

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

Nozomi Ito
March 15, 2023

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

2023.3.9に開催された「JaSST'23 Tokyo」の資料です。
https://www.jasst.jp/symposium/jasst23tokyo/details.html#D4-1

Nozomi Ito

March 15, 2023
Tweet

More Decks by Nozomi Ito

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. 要素のロケーターを調べるには?
    1. ロケーター概要
    ②システムIDを発⾒!

    View Slide

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

    View Slide

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

    View Slide

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



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



    View Slide




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



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

    View Slide




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



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

    View Slide




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



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

    View Slide




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



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

    View Slide

  24. HTMLの構造
    2. HTML概要



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



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

    View Slide




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



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

    View Slide

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

    View Slide

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

    View Slide

  28. 3. ロケーター⽂法解説
    よく使うロケーターその1 - id



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



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

    View Slide

  29. 3. ロケーター⽂法解説
    よく使うロケーターその2 - name



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



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

    View Slide

  30. 3. ロケーター⽂法解説
    idとnameは何が違うのか?
    • プログラム上の役割が違う
    • どちらも要素を⼀意に特定するのに使える
    • 両⽅ある時はnameの⽅が変更されにくい

    View Slide

  31. 3. ロケーター⽂法解説
    よく使うロケーターその3 - XPath



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



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

    View Slide

  32. 3. ロケーター⽂法解説
    よく使うロケーターその3 - XPath



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



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

    View Slide

  33. 3. ロケーター⽂法解説
    よく使うロケーターその3 - XPath



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



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

    View Slide

  34. 3. ロケーター⽂法解説
    よく使うロケーターその3 - XPath



    戻る
    次へ



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

    View Slide

  35. 3. ロケーター⽂法解説
    よく使うロケーターその3 - XPath




    戻る


    次へ




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

    View Slide

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

    View Slide

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

    View Slide

  38. UI⾃動テストでよく⾒る
    「要素が⾒つからない」エラーの
    解決にチャレンジ!
    4. ロケーター実践トラブルシューティング

    View Slide

  39. 初級編
    4. ロケーター実践トラブルシューティング

    View Slide

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

    View Slide

  41. 4. ロケーター実践トラブルシューティング ‒ 初級編
    「id=OKButton」の要素が⾒つかりません
    エラー
    エラー時の画⾯
    いつものように実⾏
    クリック(id=OKButton)

    View Slide

  42. 4. ロケーター実践トラブルシューティング ‒ 初級編
    OKボタン
    あるやん..

    View Slide

  43. 4. ロケーター実践トラブルシューティング ‒ 初級編
    HTMLでOKButtonがあるか確認
    要素を右クリックして「検証」




    OK




    HTMLを確認

    View Slide

  44. 4. ロケーター実践トラブルシューティング ‒ 初級編
    OKButtonちゃんとありそうだが..




    OK




    View Slide

  45. 4. ロケーター実践トラブルシューティング ‒ 初級編
    OKButtonちゃんとありそうだが..




    OK




    よく⾒るとok
    が⼩⽂字!

    View Slide

  46. 4. ロケーター実践トラブルシューティング ‒ 初級編
    原因 エンジニアがボタンのidを変更した
    テスト⼿順も変更
    修正
    クリック(id=OKButton) クリック(id=okButton)

    View Slide

  47. ちなみに
    4. ロケーター実践トラブルシューティング ‒ 初級編

    View Slide

  48. クリック(id=OKButton) クリック(id=okButton)
    MagicPodなら
    このくらいは⾃動で修復します
    4. ロケーター実践トラブルシューティング ‒ 初級編

    View Slide

  49. 上級編
    4. ロケーター実践トラブルシューティング

    View Slide

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

    View Slide

  51. 4. ロケーター実践トラブルシューティング ‒ 上級編
    「xpath=//div[@id=ʻmain’]/div[1]/div[1]/a[1]」
    の要素が⾒つかりません
    エラー
    エラー時の画⾯
    いつものように実⾏
    クリック(xpath=//div[@id=ʻmain’]/div[1]/div[1]/a[1])

    View Slide

  52. 4. ロケーター実践トラブルシューティング ‒ 上級編
    ちょっと何⾔って
    るか分かんない..

    View Slide

  53. 4. ロケーター実践トラブルシューティング ‒ 上級編
    まずは何⾔ってるのか解釈





    テスト⾃動化なら


    MagicPod





    エラー時のHTML

    View Slide

  54. 4. ロケーター実践トラブルシューティング ‒ 上級編
    まずは何⾔ってるのか解釈





    テスト⾃動化なら


    MagicPod





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

    View Slide

  55. 4. ロケーター実践トラブルシューティング ‒ 上級編
    まずは何⾔ってるのか解釈





    テスト⾃動化なら


    MagicPod





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

    View Slide

  56. 4. ロケーター実践トラブルシューティング ‒ 上級編
    まずは何⾔ってるのか解釈





    テスト⾃動化なら


    MagicPod





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

    View Slide

  57. 4. ロケーター実践トラブルシューティング ‒ 上級編
    まずは何⾔ってるのか解釈





    テスト⾃動化なら


    MagicPod





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

    View Slide

  58. 4. ロケーター実践トラブルシューティング ‒ 上級編
    たしかに⾒つからないが..
    そもそも何を操作したかったのか..

    View Slide

  59. 4. ロケーター実践トラブルシューティング ‒ 上級編
    テストを作った時のHTMLを⾒てみる





    MagicPod





    テスト作成時のHTML

    View Slide

  60. 4. ロケーター実践トラブルシューティング ‒ 上級編
    テストを作った時のHTMLを⾒てみる





    MagicPod





    テスト作成時のHTML
    //div[@id=ʻmain’]/div[1]/div[1]/a[1]
    あった!

    View Slide

  61. 4. ロケーター実践トラブルシューティング ‒ 上級編
    画⾯構成に変更がされていた模様





    MagicPod





    テスト作成時のHTML





    テスト⾃動化なら


    MagicPod
    エラー時のHTML

    View Slide

  62. 4. ロケーター実践トラブルシューティング ‒ 上級編
    画⾯構成に変更がされていた模様





    MagicPod





    テスト作成時のHTML





    テスト⾃動化なら


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

    View Slide

  63. 4. ロケーター実践トラブルシューティング ‒ 上級編
    変更後の新画⾯でのロケーターは?





    テスト⾃動化なら


    MagicPod





    エラー時のHTML
    //div[@id=ʻmain’]/div[1]/div[2]/a[1]
    //a[text()=ʻMagicPod’]
    or

    View Slide

  64. 4. ロケーター実践トラブルシューティング ‒ 上級編
    原因 エンジニアが画⾯構成を変更した
    テスト⼿順も変更
    修正
    クリック(xpath=//div[@id=ʻmain’]/div[1]/div[1]/a[1])
    クリック(xpath=//div[@id=ʻmain’]/div[1]/div[2]/a[1])

    View Slide

  65. ちなみに
    4. ロケーター実践トラブルシューティング ‒ 上級編

    View Slide

  66. MagicPodなら
    これも⾃動で修復します
    4. ロケーター実践トラブルシューティング ‒ 上級編
    ※ 修復し損ねるケースもあります
    クリック(xpath=//div[@id=ʻmain’]/div[1]/div[1]/a[1])
    クリック(xpath=//a[text()=ʻMagicPod’])

    View Slide

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

    View Slide

  68. 5. ロケーターの使い分け基準
    ロケーターはどれを使うのがいいのか?



    戻る
    次へ



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

    View Slide

  69. 5. ロケーターの使い分け基準
    メンテナンス性が⾼い

    画⾯の変更が⼊っても影響がない
    良いロケーター

    View Slide

  70. 5. ロケーターの使い分け基準
    各種ロケーターのメンテナンス性
    を考えてみる

    View Slide

  71. 5. ロケーターの使い分け基準
    システムID、システム名
    • 開発者が変更することは少なめ
    • ReactJSを使った最近のサイトでは、
    idは無かったりランダムだったりで使いにくいこと多し


    検索

    View Slide

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


    検索

    View Slide

  73. 5. ロケーターの使い分け基準
    テキスト ‒ 悪いテキスト
    • テストデータのテキストを
    ロケーターにベタ書きすると変更に弱くなる
    • テストケースの共通化の妨げにも

    7,000円

    View Slide

  74. 5. ロケーターの使い分け基準
    data-testid属性
    • テスト専⽤につけられた、要素を⼀意に識別する属性
    • 開発者は極⼒変更しないようにしてくれる(はず)
    • 無い時は開発チームに依頼してみましょう

    検索

    View Slide

  75. 5. ロケーターの使い分け基準
    class属性
    • 要素の⽬的‧デザインなどを表す種別
    • 多くの場合、要素を⼀意に識別するものではない

    検索

    View Slide

  76. 5. ロケーターの使い分け基準
    上からの順番
    変更に弱いので、できるだけ避けた⽅がよい

    検索

    xpath=//button[1]

    View Slide

  77. 5. ロケーターの使い分け基準
    要素のパス


    MagicPod


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

    View Slide

  78. 5. ロケーターの使い分け基準
    各テストツールは
    何を推奨しているか?

    View Slide

  79. 5. ロケーターの使い分け基準
    Selenium
    https://www.selenium.dev/documentation/test_practices/encouraged/locators
    • idを推奨
    • ReactJSの無い頃のドキュメントなので、
    時代に合っていない気が

    View Slide

  80. 5. ロケーターの使い分け基準
    Cypress
    https://docs.cypress.io/guides/references/best-practices#Selecting-Elements
    • data-testid的アプローチを推奨
    • id、name、テキストはケースバイケース

    View Slide

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

    View Slide

  82. 5. ロケーターの使い分け基準
    個⼈的おすすめ
    まずはdata-testid属性
    無理ならidかnameか良いテキスト

    View Slide

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

    View Slide

  84. 6. XPath & CSSセレクター早⾒表
    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

  85. 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なら可能
    6. XPath & CSSセレクター早⾒表

    View Slide

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

    View Slide

  87. MagicPodならロケーターは
    ⾃動計算&⾃動修復!
    @MagicPodJP

    View Slide

  88. イベント告知

    View Slide

  89. Thank you!

    View Slide