Seleniumロケーター：SeleniumでXPathを使用してWeb要素を特定する（例）

selenium locators identify web elements using xpath selenium

Selenium Locatorsチュートリアル：SeleniumでXPathを使用してWeb要素を識別する方法と例

の中に 前のチュートリアル 、Firebugという名前の別の自動化テストツールを紹介しました。また、Firebugとその機能を使用して、独自の自動化スクリプトを手動で作成しました。また、スクリプトに必要な変更を加えることも学びました。

先に進むと、このチュートリアルでは、 Seleniumのさまざまなタイプのロケーターとテストスクリプトを構築するためのそれらのアクセシビリティ技術 。したがって、このチュートリアルは、さまざまなタイプのロケーターの詳細な紹介で構成されています。

これは私たちです Seleniumチュートリアルの5番目のチュートリアル シリーズ。

ロケーターとは何ですか？

ロケーターは、Webページ内でWeb要素を一意に識別するアドレスと呼ぶことができます。ロケーターは、アクションを実行するために必要なWeb要素についてSeleniumに通知するWeb要素のHTMLプロパティです。

Web要素にはさまざまな種類があります。 それらの中で最も一般的なものは次のとおりです。

• テキストボックス
• ボタン
• 落ちる
• ハイパーリンク
• チェックボックス
• ラジオボタン

学習内容：

• ロケーターの種類
• IDをロケーターとして使用する
• ClassNameをロケーターとして使用する
• 名前をロケーターとして使用する
• リンクテキストをロケーターとして使用する
• XPathをロケーターとして使用する
• 結論
• 推奨読書

ロケーターの種類

これらの要素を特定することは常に非常に難しい問題であり、したがって、正確で効果的なアプローチが必要です。これにより、ロケーターがより効果的で、自動化スクリプトがより安定すると断言できます。基本的に、すべてのSeleniumコマンドでは、Web要素を見つけるためにロケーターが必要です。したがって、これらのWeb要素を正確かつ正確に識別するために、さまざまなタイプのロケーターがあります。

それでは、それぞれを個別に実行して、さらに理解しましょう。

ロケーターから始める前に、テスト対象のアプリケーションを紹介します。さまざまなロケータータイプを使用してさまざまなタイプのWeb要素を検索するには、「https://accounts.google.com/」を使用します。

IDをロケーターとして使用する

Web要素を識別するための最良かつ最も一般的な方法は、IDを使用することです。各要素のIDは一意であると主張されています。

このサンプルでは、​​gmail.comのログインフォームにある「Eメール」テキストボックスにアクセスします。

Web要素のIDを見つける Firebugを使用する

アンドロイドのための最高の音楽プレーヤーとダウンローダー

ステップ1 ：Webブラウザ（Firefox）を起動し、「https://accounts.google.com/」に移動します。

ステップ2 ：Firebugを開きます（F12キーを押すか、ツールを使用します）。

ステップ3 ：検査アイコンをクリックして、Web要素を識別します。

ステップ4 ：何らかのアクションを実行したいWeb要素（この場合は電子メールテキストボックス）にカーソルを合わせます。 Firebugセクションでは、対応するHTMLタグが強調表示されているのを確認できます。

ステップ5 ：ID属性を認識し、メモしてください。次に、識別されたIDが要素を一意かつ完璧に見つけることができるかどうかを確認する必要があります。

構文 ：id =要素のID

この場合、IDは「Eメール」です。

代替アプローチ：

手順2〜4を実行する代わりに、ロケーター値を検査する必要のあるWeb要素（Eメールテキストボックス）を右クリックし、(Firebugで要素を検査)オプションをクリックすることで、Web要素を直接検索/検査できます。したがって、このクリックイベントは、Firebugセクションの展開をトリガーし、対応するHTMLタグが強調表示されます。

ロケーター値を確認します

ブラウザが開いていて、「https://accounts.google.com/」にリダイレクトされていると仮定します。

ステップ1 ：SeleniumIDEを起動します。

ステップ2 ：エディターセクションの最初の行をクリックします。

ステップ3 ：「id = Email」、つまりターゲットボックスにロケーター値を入力します。

ステップ4 ：(検索)ボタンをクリックします。指定されたロケーター値が正当な場合、Eメールテキストボックスは黄色で強調表示され、フィールドの周囲に蛍光緑色の境界線が表示されます。指定されたロケーター値が正しくない場合、SeleniumIDEの下部にあるログペインにエラーメッセージが出力されます。

ケース1 –ロケーター値=正解

ケース2 –ロケーター値=不正解

ステップ5 ：さらに検証するために、ユーザーは「値」フィールドに値を入力することにより、指定されたターゲットに対して「タイプ」コマンドを実行することもできます。コマンドの実行で指定された値が(電子メール)テキストボックスに入力された場合、識別されたロケータータイプが正しく、アクセス可能であることを意味します。

ClassNameをロケーターとして使用する

IDをロケーターとして使用することと、クラス名をロケーターとして使用することには、わずかな違いしかありません。

このサンプルでは、​​「ヘルプが必要ですか？」にアクセスします。 gmail.comのログインフォームの下部にあるハイパーリンク。

Windows10用の最高のドライバー更新ソフトウェア

Web要素のクラス名を見つける Firebugを使用する

ステップ1 ：ロケーター値を検査する必要があるWeb要素を右クリックし、(Firebugで要素を検査する)オプションをクリックして、Web要素（この場合は「ヘルプが必要ですか？」リンク）を見つけて検査します。

ステップ2 ：クラス名属性を認識し、メモしてください。次に、識別されたクラス名が要素を一意かつ正確に見つけることができるかどうかを確認する必要があります。

構文： class =要素のクラス名

この場合、クラス名は「need-help-reverse」です。

ロケーター値を確認します

ステップ1 ：SeleniumIDEのターゲットボックスに「class = need-help-reverse」と入力します。

ステップ2 ：(検索)ボタンをクリックします。ハイパーリンクが黄色で強調表示され、フィールドの周囲に蛍光緑色の境界線が表示されることに注意してください。

（クリックすると拡大画像が表示されます）

名前をロケーターとして使用する

名前を使用してWeb要素を検索することは、前の2つのロケータータイプと非常によく似ています。唯一の違いは構文にあります。

このサンプルでは、​​gmail.comのログインフォームにある「パスワード」テキストボックスにアクセスします。

構文： name =要素の名前

この場合、名前は「Passwd」です。

ロケーター値を確認します

ステップ1 ：ターゲットボックスに「name = Passwd」と入力し、(検索)ボタンをクリックします。 「パスワード」テキストボックスが強調表示されることに注意してください。

リンクテキストをロケーターとして使用する

Webページ上のすべてのハイパーリンクは、リンクテキストを使用して識別できます。 Webページ上のリンクは、アンカータグ（ ）。アンカータグは、Webページにハイパーリンクを作成するために使用され、アンカータグの開始と終了の間のテキストがリンクテキストを構成します（ いくつかのテキスト ）。

このサンプルでは、​​gmail.comのログインフォームの下部にある(アカウントの作成)リンクにアクセスします。

Firebugを使用してWeb要素のリンクテキストを検索する

ステップ1 ：ロケーター値を検査する必要があるWeb要素を右クリックし、(Firebugで要素を検査する)オプションをクリックして、Web要素（この場合は(ア​​カウントの作成)リンク）を見つけて検査します。

ステップ2 ：内に存在するテキストを認識してください タグを付けてメモします。したがって、このテキストは、Webページ上のリンクを一意に識別するために使用されます。

（クリックすると拡大画像が表示されます）

構文： link =要素のリンクテキスト

この場合、リンクテキストは「アカウントの作成」です。

jarファイルを開く方法

ロケーター値を確認します

ステップ1 ：「link =アカウントの作成」と入力します。つまり、SeleniumIDEのターゲットボックスにロケーター値を入力します。

ステップ2 ：(検索)ボタンをクリックします。リンクが黄色で強調表示され、フィールドの周囲に蛍光緑色の境界線が表示されることに注意してください。

XPathをロケーターとして使用する

Xpathは、XMLパスに基づいてWeb要素を見つけるために使用されます。 XMLはExtensibleMarkup Languageの略で、任意のデータを保存、整理、および転送するために使用されます。 HTMLタグと非常によく似たキーと値のペアでデータを格納します。どちらもマークアップ言語であり、同じ傘下にあるため、xpathを使用してHTML要素を見つけることができます。

Xpathを使用して要素を見つけることの背後にある基本は、ページ全体でさまざまな要素間を移動することです。これにより、ユーザーは別の要素を参照して要素を見つけることができます。

Xpathは、次の2つの方法で作成できます。

相対Xpath

相対Xpathは現在の場所から始まり、接頭辞「//」が付いています。

例：// span (@ class = ’Email’)

絶対Xpath

絶対Xpathはルートパスで始まり、接頭辞「/」が付いています。

例：/ HTML / body / div / div (@ id = ’Email’)

キーポイント：

• Xpathを使用して要素を見つける成功率が高すぎます。前のステートメントに加えて、XpathはWebページ上の比較的すべての要素を見つけることができます。したがって、Xpathを使用して、ID、クラス、または名前を持たない要素を見つけることができます。
• 有効なXpathの作成は、トリッキーで複雑なプロセスです。 Xpathを生成するために使用できるプラグインがありますが、ほとんどの場合、生成されたXpathはWeb要素を正しく識別できません。
• xpathを作成するとき、ユーザーはさまざまな命名法とプロトコルに注意する必要があります。

Selenium XPathの例：

Xpathチェッカー

Xpath Checkerを使用すると、Xpathの作成が少し簡単になります。 Xpath Checkerは、Web要素のXpathを自動的に生成するFirefoxアドオンです。アドオンは、他のプラグインと同じようにダウンロードしてインストールできます。プラグインは「https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/」からダウンロードできます。

プラグインがインストールされるとすぐに、xpathを生成する要素を右クリックすると、コンテキストメニューに表示されます。

「ViewXpath」をクリックして、要素のXpath式を確認します。生成されたXpath式を含むエディターウィンドウが表示されます。これで、ユーザーは生成されたXpath式を自由に編集および変更できます。対応する結果は累積的に更新されます。

XPathチェッカーは他のブラウザーでも使用できることに注意してください。

しかし、ほとんどの場合、生成されたXpathはWeb要素を正しく識別できないという事実を繰り返します。したがって、事前定義されたルールとプロトコルに従って独自のXpathを作成することをお勧めします。

このサンプルでは、​​gmail.comのログインフォームの上部にある「Google」画像にアクセスします。

Web要素のXpathを作成する

ステップ1 ：「// img (@ class = ’logo’)」と入力します。つまり、SeleniumIDE内のターゲットボックスにロケーター値を入力します。

構文： 要素のXpath

ステップ2 ：(検索)ボタンをクリックします。画像が黄色で強調表示され、フィールドの周囲に蛍光緑色の境界線があることに注意してください。

結論

これがこの記事の核心です。

• ロケーターは、アクションを実行する必要があるWeb要素についてSeleniumに通知するWeb要素のHTMLプロパティです。
• ユーザーが定期的に操作しなければならない可能性のあるさまざまなWeb要素があります。それらのいくつかは、テキストボックス、ボタン、ドロップダウン、ハイパーリンク、チェックボックス、およびラジオボタンです。
• Web要素の範囲が多様であるため、これらのWeb要素を見つけるための戦略/アプローチの広大な領域があります。
• 広く使用されているロケータータイプには、ID、ClassName、リンクテキスト、XPath、CSSセレクター、および名前があります。

注：CSSセレクターとXPathの作成には多くの労力と練習が必要であるため、このプロセスはより洗練されたトレーニングを受けたユーザーのみが実行できます。

このチュートリアルでは、SeleniumXpathを含むさまざまなタイプのロケーターについて学習しました。

次のチュートリアル＃6 ： このSeleniumLocatorタイプのチュートリアルに続いて、使用方法を学習します ロケーターとしてのCSSセレクター。

質問はありますか？コメントで教えてください。私たちはすべてを解決しようとします。

推奨読書

• Seleniumは例を含むテキストチュートリアルで要素を検索します
• 30以上の最高のSeleniumチュートリアル：実際の例でSeleniumを学ぶ
• Seleniumスクリプトを構築するためにChromeおよびIEブラウザーで要素を見つける方法– Seleniumチュートリアル＃7
• SeleniumスクリプトでのWebテーブル、フレーム、および動的要素の処理– Seleniumチュートリアル＃18
• Webページ上のドロップダウン要素を処理するためのSeleniumSelectクラスの使用– Seleniumチュートリアル＃13
• Cucumber Seleniumチュートリアル：Cucumber Java SeleniumWebDriverの統合
• SeleniumスクリプトのWeb要素を識別するためのCSSセレクターの使用方法– Seleniumチュートリアル＃6
• さまざまなタイプのWebDriverコマンドを使用してWeb要素の可視性を確認する– Seleniumチュートリアル＃14