構文と例を含む究極のXPathライティングに関するチートシートチュートリアル

ultimate xpath writing cheat sheet tutorial with syntax

あらゆるタイプのWeb要素に対してUltimateXPATHを作成するトップ20の方法（XPATHが無効になることはありません）：

Webアプリケーションは、ボタンをクリックするためのWeb要素、テキストを入力するためのWeb要素の入力、ドロップダウン、ラジオボタンなど、さまざまなタイプのWeb要素で構成されています。

これらのWeb要素は、タグまたはノードとも呼ばれます。

Webアプリケーションの自動化に関しては、Web要素を検索し、ボタンをクリックし、入力ボックスにテキストを入力し、チェックボックスを選択し、ラジオボタンを選択するなどのアクションを実行する自動化スクリプトを作成することから始まります。上または下にスクロールし、最後にアクションの順番で期待される動作を確認します。

学習内容：

• XPathとは何ですか？どのように見えますか？
• 任意のWeb要素のXPathを作成するためのトップ20の方法
  • ＃1）リバースルックアップ
  • ＃2）変数とカスタム値の使用
  • ＃3）「XML」タグ、「AND」などの使用
  • ＃4）属性とテーブルXPATHの使用
  • ＃5）属性、表、およびテキストの使用
  • ＃6）ネストされた属性を使用したXPATHの生成
  • ＃7）属性、Div、およびボタンを組み合わせたXPath生成
  • ＃8）CONTAINS、REVERSELOOKUPなどを使用したXPATH生成。
  • ＃9）相対、CONTAINS、REVERSE、FOLLOWINGSIBLINGなどを使用したXPath生成。
  • ＃10）Attributes、Contains、Reverse、Preceding-Sibling、Divs、およびSpanを使用したXPath生成
  • ＃11）属性、XMLタグなどを使用する。
  • ＃12）ページ全体を調べるのではなく、代わりにすべてのリンクを調べて含むXPathの生成
  • ＃13）コンテインと属性の使用
  • ＃14）属性を使用して、兄弟と子孫をフォローする
  • ＃15）属性の使用、兄弟、子孫、およびテキストのフォロー
  • ＃16）ヘッダーとテキストの使用
  • ＃17）ヘッダーテキストの使用、兄弟、パスなどのフォロー
  • ＃18）属性、包含、および先行する兄弟の使用
  • ＃19）ID属性、特定のテキスト、および逆引き参照を使用してドロップダウンを探す
  • ＃20）「id」属性を組み合わせて特定のテキストとのリンクを探す
  • 結論
  • 推奨読書

XPathとは何ですか？どのように見えますか？

要素を見つけることは、地図上で誰かの家を見つけることに似ています。外部の助けなしに友人の家を見つける唯一の方法は、地図を用意して何を見つけるか（家）を知ることです。

この例えをこの例に当てはめると、マップはDOM（HTMLタグ、JavaScriptなど）として使用され、検索する特定のWeb要素とともにすべてのWeb要素が存在します。

アンドロイドのための最高の音楽mp3ダウンローダー

要素の一意のアドレスまたはパスが見つかると、自動化スクリプトはテストシナリオに基づいて要素に対していくつかのアクションを実行します。 例えば、 ボタンをクリックすると開くページのURLを確認したい。

ただし、類似したタグ、同じ属性値、同一のパスが存在する可能性があるため、Web要素の一意のアドレス/パスを見つけるのは簡単ではありません。「XPATH」と呼ばれるWeb要素に正確な一意のアドレスを作成するのは困難です。

ここでは、あらゆるタイプのWeb要素に対して有効で一意のXPATHを生成するための、優れた効果的な手法について詳しく説明します。

推奨読書=> SeleniumでXPathを使用してWeb要素を特定する

ブラウザ拡張機能を使用してXPathを簡単に作成できる場合もありますが、 自動化テスト キャリアの中で、従来のブラウザ拡張機能が機能せず、独自の創造性を使用して独自にカスタマイズしたXPathを考え出す必要があるという無数の状況に直面しました。あなたは同じような状況に直面している、または直面するだろうと確信しています。

このチュートリアルでは、コードが変更された場合でもXPathが常に有効であるように（開発者が全体を書き直さない限り）、Web要素の究極のXPathを作成する方法に関する20の最良の方法を見ていきます。機能/モジュール）。

これらのテクニックをすべて知っていると、独自のXPathを作成するマスターになり、無効になる可能性がほとんどないキラーXPathを作成できるようになります。

まず、XPath構文を理解することから始めて、その各部分を定義しましょう。

以下の画像は、XPathがどのように見えるかを各部分の説明とともに示しています。

• //： input、divなどの現在のノードを選択します。
• タグ名： Web要素/ノードのタグ名
• @： 属性を選択
• 属性： ノード/特定のWeb要素の属性名
• 値： 属性の値

ここで、XPathが原因で自動化テストスクリプトが80％失敗したという、いくつかのヒントを共有したいと思います。これは、提供されたXPathに複数のWeb要素があるか、XPathが無効であるか、ページがまだロードされていないことが原因です。

したがって、テストケースが失敗するたびに：

1. XPathをコピーします。
2. DOMのブラウザー（F12または開発者ツールウィンドウ）で検索して、有効かどうかを確認します（下の画像を参照）。

プロタイプ1： DOMで2回検索したときに、一意であり、他のWeb要素が表示されないことを確認してください。

プロタイプ2： タイミングの問題が発生する場合があります。これは、スクリプトがWeb要素/ページを検索しているときにまだロードされていないため、待機時間を追加して再テストすることを意味します。

プロタイプ3： Web要素を検索する前に、DOM全体を印刷してみてください。このように、コンソールを調べることで、Web要素がDOMに存在するかどうかを判断できます。

XPathルックアップについて詳しく説明する前に、共有したい重要なことの1つは、開発チームに直接アクセスできる場合、またはチームが現在の場所にある場合は、開発チームに一意のIDを提供するように依頼することです。各Web要素、または少なくとも自動化に使用する要素。これにより、時間を大幅に節約できます。

これが不可能な場合は、創造性を駆使して独自のカスタマイズされたXPathを考え出す必要があるかもしれません。これは、これから学習する内容です。

任意のWeb要素のXPathを作成するためのトップ20の方法

キラーXPathへのトップ20の方法を作成する方法を詳しく見ていきましょう。

＃1）リバースルックアップ

ボタンをクリックしたいとして、同様のボタンがあるとします。両方のボタンにはid属性がありますが、それらは動的であり、どちらの属性も両方のボタン要素で一意ではありません。

以下のシナリオでは、「TestInteractive」の「Setting」ボタンをクリックします。

コード

「設定」ボタンを見ると、どちらのコードも似ています。 id、name、value、containsなどの従来の方法を使用すると、たとえば、それらのいずれも機能しません。

// * (contains（text（）、 ‘Setting’）)、これにより2つのWeb要素が作成されます。したがって、それは一意ではありません。

これが最終的な戦略です。

>> まず、一意である最も近いタグを見つけます。この場合は、

>> 次に、目的のWeb要素に最も近いWeb要素を見つけます。この場合は（text（）、 ‘TEST Interactive’）が含まれています。これで、(設定)ボタンが存在する場所と同じになりましたが、ボタンをクリックするには、まず、以下に示すように、二重ドットを使用してメインに移動する必要があります。

>> ご覧のとおり、「設定」ボタンとして2番目のWeb要素があるレベルにいます。これには2つのボタンがあり、2番目のボタンである「設定」ボタンに移動します。最後に「/ button (2)」を追加すると、以下に示すように、「設定」ボタンに固有のXPATHを取得できます。

最終的なXPATH：

Web要素のタイプを「ボタン」から別のタイプに変更する可能性があると思われる場合に生成する別の方法を次に示します。

または「following-sibling」を使用する

＃2）変数とカスタム値の使用

ファイルをアップロード/ダウンロードするためのFTP（「ファイル転送プロトコル」）機能を備えたWebアプリケーションがあり、ダウンロードリンクをクリックして特定のファイルをダウンロードするテストケースがあるとします。

まず、探しているファイル名を変数として定義できます。

String expectedfileName =“ Test1”;

XPATHを使用して、実際のファイル名を見つけることができます。

上記のXPathでは、… ‘/ tr / td (1) .getAttribute（“ title”）’は特定の行と最初の列に移動し、title属性の値を取得します。実際のファイル名を別の変数に保存できます。

予想されるファイル名と実際のファイル名の両方を取得したら、両方を比較できます。両方が一致する場合は、ダウンロードリンクをクリックするだけです。

また、各行にループを作成し、ファイル名が見つかるまで確認を続けることもできます。

＃3）「XML」タグ、「AND」などの使用

カスタマイズされたタグを使用して一意のXPATHを生成し、他の条件を追加できます。

例えば、 目的のWeb要素がメインタグに存在し、複数のアドレスタグがありますが、特定の1つだけを検索するとします。すべてのアドレスタグにはクラス属性があるため、最初から始めることができます。

目的のWeb要素が、「テスト」と呼ばれるテキストを含むタグに含まれていることに気付きました。

その結果、複数のWeb要素が見つかったことがわかりました。したがって、よりユニークにするために、「id」などの他の条件を追加して、最終的に探しているWeb要素を指すようにすることができます。

＃4）属性とテーブルXPATHの使用

テーブル内に配置されているWeb要素に入力し、テーブルがフォーム要素内に配置されていると仮定します。

「myForm」という名前のDOM内のすべてのフォームを見つけることができます。

これで、すべてのフォームでIDが「tbl_testdm」のテーブルが見つかります。

テーブル内で特定の行と列に移動します。

セル内に複数の入力がある場合は、値=「OpenRFS」の入力を見つけます。これにより、フィールドの最終的なXPathが得られます。

＃5）属性、表、およびテキストの使用

目的のWeb要素がパネルテーブルにあり、いくつかの一般的なテキストがあると想定します。

最高の無料のコンピュータスキャンと修復

まず、一意の属性（この場合は「TITLE」）を持つパネルから始めます。

次に、すべてのテーブルタグをナビゲートします。

すべてのテーブル内で、「作成者」というテキストが含まれる列を見つけます。

最終的なXPathは次のようになります。

＃6）ネストされた属性を使用したXPATHの生成

ターゲットWeb要素のXPathは、ネストされた属性を使用して生成することもできます。 例えば、 この場合、DOM全体で特定の属性を検索してから、その中の別の属性を検索します。

＃7）属性、Div、およびボタンを組み合わせたXPath生成

例えば、 以下のXPathでは、id（相対XPath）、いくつかのdivタグ、およびボタンを使用して、ターゲットWeb要素を見つけることができました。

＃8）CONTAINS、REVERSELOOKUPなどを使用したXPATH生成。

かつて私は直接識別のないドロップダウンを持っていました。以下に示すように、最終的なXPATHを作成するには、CONTAINS、REVERSE、DIV、属性を使用する必要がありました。

＃9）相対、CONTAINS、REVERSE、FOLLOWINGSIBLINGなどを使用したXPath生成。

アプリケーションがグラフを表示し、各グラフ値を検証する必要がある状況がありました。ただし、残念ながら、各値には一意のIDがありませんでした。そのため、relative、contains、reverse、following-sibling、divタグを組み合わせた1つのグラフ値について、以下に示す最終的なXPATHを作成しました。

＃10）Attributes、Contains、Reverse、Preceding-Sibling、Divs、およびSpanを使用したXPath生成

異なるアラームデータを検証する必要があり、特定の計算またはタイミングに基づいて各アラーム値が表示されたことがあります。各値をキャプチャするために、属性、contains、reverse、preceeding-sibling、divs、およびspanタグを使用する以下のXPATHを考え出す必要がありました。

＃11）属性、XMLタグなどを使用する。

以下のXPATH、属性、およびXMLタグでは、シーケンスを使用してWeb要素の最終的な一意のアドレスを作成します。

＃12）ページ全体を調べるのではなく、代わりにすべてのリンクを調べて含むXPathの生成

以下のXPathは、「パラメータデータの手動入力」というテキストを含むページ全体のリンクのみを検索します。

＃13）コンテインと属性の使用

＃14）属性を使用して、兄弟と子孫をフォローする

＃15）属性の使用、兄弟、子孫、およびテキストのフォロー

＃16）ヘッダーとテキストの使用

Web要素が特定のテキストを含むヘッダーである場合、XPathは次のようになります。

＃17）ヘッダーテキストの使用、兄弟、パスなどのフォロー

＃18）属性、包含、および先行する兄弟の使用

一意の属性を持たないスパンができたら、absolute、Contains、先行する兄弟、および別の絶対パスを組み合わせてXPATHを作成しました。

＃19）ID属性、特定のテキスト、および逆引き参照を使用してドロップダウンを探す

＃20）「id」属性を組み合わせて特定のテキストとのリンクを探す

結論

キラーXPATHを作成する場合、コードをどれだけよく理解して分析するかによって異なります。コードを理解すればするほど、効果的なXPATHを作成する方法が増えます。

XPathを作成する最初のステップは、ターゲットWeb要素に最も近い一意のWeb要素を見つけ、属性、DIV、フォロー、包含など、上記で説明したさまざまな手法を使用して近づき続けることです。

最後になりますが、関心のあるすべてのWeb要素に一意のIDを追加するように開発チームに要求すると、作業が本当に楽になります。

スプリントサイクルまたは新しい要件の作業が開始され、チームが新しいモックアップと共有されるときはいつでも、私は常にすべてのモックアップを調べて、頭の中で潜在的な自動化テストケースについて考え、使用されるすべての潜在的なWeb要素のリストを準備します自動化テストで、自分のIDを準備します。

提案されたIDとともにすべてのWeb要素のリストが完成したら、開発コードで使用するために、事前に開発者と共有します。このように、XPATH書き込みの戦いを簡単にすることで、常に一意のIDを取得します。

以下は、XPATHを作成するさまざまな方法を組み合わせたリストです。

1. 「// * (@ id = ’rcTEST’) // * (contains（text（）、 ‘TEST Interactive’）) /../ button (2)”
2. 「// * (@ id = ’rcTEST’) // * (contains（text（）、 ‘TEST Interactive’）) /..// * (contains（text（）、 ‘Setting’）)」
3. 「// * (@ id = ’rcTEST’) // * (contains（text（）、 ‘TEST Interactive’）) / follow-sibling :: button”
4. 「stringactualFileName = WebDriverAccess.getDriver（）。findElement（By.xpath（“ // *” + fileName +” / tr / td (1)”））。getAttribute（“ title”）;”
5. WebDriverAccess.getDriver（）。findElement（By.xpath（“ // *” + fileName +” / tr / td (4)”））。click（）;
6. '// address (@ class = 'ng-scope ng-isolate-scope') // div (contains（。、Testing '）and @ id =' msgTitle ')'
7. 「// * (@ name = ’myForm’) // table (@ id = ’tbl_ testdm’) / tbody / tr / td (6) /
8. input (@ value = ’Open RFS’)」
9. 「// * (@ title = ’曲リストアプレット’) // table // td (contains（text（）、 ’Author’）)」
10. 「// * (@ id = ’parameters’) // * (@ id = ’testUpdateTime’)”）」
11. 「// * (@ id = 'MODEL / PLAN') / div (1) / div (2) / div (1) / div (1) / widget / section / div (1) / div / div (1) / div / div / button (1)」
12. “ // * (contains（text（）、 ’Watch Dial）) /../ div / select (@ data-ng-model =’ context.questions (subqts.subHandleSubId) ’)”）、”
13. “ // * (@ id = 'RESEARCH / PLAN') // * (contains（@ id、 'A4'）) /../../ follow-sibling :: div (1) / div (1) /スパン(1) /スパン(1)」
14. “ // * (@ id = 'ALARMDATA') // * (contains（@ id、 'AFC2'）) /../../ preceding-sibling :: div (1) / div (1) / span ( 1) / span (1)”
15. 「// * (@ id = 'RESEARCH / REVIEW') // widget / section / div (1) / div / div (2) / div (1) / div (3) / div (1) // span ( @ class = 'details')”
16. 「// a (contains（。、 'Parameter Data Manual Entry'）)」
17. 「// * (contains（@ style、 ’display：block; top：’）) // input (@ name = ’daterangepicker_end’)」
18. 「// * (@ id = ’dropdown-filter-serviceTools’) / follow-sibling :: ul / descendant :: a (text（）= ’Notepad’)」
19. 「// * (@ id = ’dropdown-filter-serviceTools’) / follow-sibling :: ul / descendant :: a (text（）= ’Trigger Dashboard’)」
20. 「// h3 (text（）= '内部報告')」
21. 「// h3 (contains（text（）、 'Helium Level'）) / follow-sibling :: div / label / input」
22. 「// div (div (p (contains（text（）、 ’Status’）))) / preceding-sibling :: div / div / span (3) / span」
23. 「// * (@ id = ’COUPLING’) // * (contains（text（）、 ’COUPLE Trend’）) /../div/select”
24. 「// * (@ id = ’ffaHeaderDropdown’) // a (contains（text（）、 ’Start Workflow’）)」

この有益な記事がXPathの作成に関する知識を深めることを願っています。

著者略歴：この記事は、9年以上にわたるキャリアの中で多様な経験とスキルを持つITプロフェッショナルであるAdnanArifによって書かれています。

推奨読書

• 初心者向けの詳細なEclipseチュートリアル
• 例を含むPythonDateTimeチュートリアル
• Unix Catコマンド構文、例付きオプション
• 構文、オプション、例を含むUnixソートコマンド
• 例を含むUnixシェルスクリプトチュートリアル
• Seleniumは例を含むテキストチュートリアルで要素を検索します
• 実践例を含むPythonメイン関数チュートリアル
• JMeterのXpathExtractorポストプロセッサー