のロケーター Selenium
Krishna ルンタ
ロケーターとは何ですか?
ロケーターは、次のことを伝えるコマンドです。 Selenium IDE の GUI 要素 (テキストなど) Box、ボタン、チェック Boxes など) を操作する必要があります。正しい GUI 要素の識別は、自動化スクリプトを作成するための前提条件です。しかし、GUI 要素を正確に識別することは、思ったよりも難しいです。間違った GUI 要素で作業したり、要素がまったくない状態で作業してしまうこともあります。そのため、 Selenium GUI 要素を正確に見つけるための多数のロケーターを提供します
ロケーターを必要としないコマンドもあります (「open」コマンドなど)。ただし、それらのほとんどは要素ロケーターを必要とします。 Selenium ウェブドライバー。
ロケーターの選択は、テスト対象のアプリケーションに大きく依存します。このチュートリアルでは、これらのアプリケーションがサポートするロケータに基づいて、Facebook、new tours.demautを切り替えます。同様に、 テスト プロジェクトでは、上記の要素ロケーターのいずれかを選択します。 Selenium Webdriver、アプリケーションのサポートに基づいて。
IDで探す
ID は要素ごとに一意であると考えられているため、これは要素を検索する最も一般的な方法です。
Target フォーマット： id=要素のID
この例では、Facebookをテストアプリとして使用します。 Mercury ツアーでは ID 属性は使用されません。
ステップ1） このチュートリアルが作成されて以来、Facebook はログイン ページのデザインを変更しました。 このデモページを使用してください http://demo.guru99.com/test/facebook.html テスト用です。Firebug を使用して「メールまたは電話」テキスト ボックスを調べ、その ID をメモします。この場合、ID は「email」です。
ステップ2） 起動する Selenium IDEで「id=email」と入力し、 Target ボックス。検索ボタンをクリックすると、「メールまたは電話」テキストボックスが黄色にハイライトされ、緑の枠で囲まれます。 Selenium IDE はその要素を正しく見つけることができました。
名前による検索
名前による要素の検索は、ID による検索とよく似ていますが、 「名前=」 代わりにプレフィックスを付けます。
Target フォーマット： name=要素の名前
次のデモンストレーションでは、 Mercury すべての重要な要素に名前が付いているため、ツアーになります。
ステップ1） MFAデバイスに移動する http://demo.guru99.com/test/newtours/ Firebug を使用して「ユーザー名」テキスト ボックスを調べます。その名前属性をメモします。
ここでは、要素の名前が「userName」であることがわかります。
ステップ2） In Selenium IDEでは、 Target ボックスをクリックし、[検索] ボタンをクリックします。 Selenium IDE はユーザー名テキスト ボックスを強調表示することでそれを見つけることができます。
フィルターを使用して名前で要素を検索する方法
フィルターは、複数の要素が同じ名前を持つ場合に使用できます。 フィルターは、同じ名前の要素を区別するために使用される追加の属性です。
Target フォーマット: 名前=要素の名前フィルター=フィルターの値
例を見てみましょう –
ステップ1） にログオンします Mercury ツアー。
にログオンします Mercury ユーザー名とパスワードに「tutorial」を使用したツアー。以下に示すフライト検索ページに移動します。
ステップ2） firebug を使用する場合は、VALUE 属性を使用します。
Firebug を使用すると、往復ラジオ ボタンと片道ラジオ ボタンが同じ「tripType」という名前になっていることがわかります。 ただし、それらは異なる VALUE 属性を持っているため、それぞれをフィルターとして使用できます。
ステップ3） 最初の行をクリックします。
- 最初に [One Way] ラジオ ボタンにアクセスします。 エディターの最初の行をクリックします。
- コマンドボックスで Selenium IDE で「クリック」コマンドを入力します。
- Target ボックスに「name=tripType value=oneway」と入力します。「value=oneway」の部分がフィルターになります。
ステップ4） 「検索」ボタンをクリックします。
注意してください Selenium IDE は、一方向ラジオ ボタンを緑色で強調表示できます。これは、VALUE 属性を使用して要素に正常にアクセスできることを意味します。
ステップ5） [片道] ラジオ ボタンを選択します。
キーボードの「X」キーを押して、このクリック コマンドを実行します。 [One Way] ラジオ ボタンが選択されていることに注目してください。
「ラウンドトリップ」ラジオボタンでもまったく同じことを行うことができます。今回はターゲットとして「name=tripType value=roundtrip」を使用します。
リンクテキストによる検索
このタイプの CSS ロケーターは Selenium ハイパーリンク テキストにのみ適用されます。ターゲットの前に「link=」を付け、その後にハイパーリンク テキストを続けることで、リンクにアクセスします。
Target フォーマット: リンク=リンク_テキスト
この例では、 Mercury ツアーのホームページ。
ステップ1）
- まず、ログオフしていることを確認してください Mercury ツアー。
- に行く Mercury ツアーのホームページ。
ステップ2）
- Firebug を使用して、「REGISTER」リンクを調べます。 リンク テキストは と タグの間にあります。
- この場合、リンクテキストは「REGISTER」です。 リンクテキストをコピーします。
ステップ3） Firebug のリンク テキストをコピーし、次の場所に貼り付けます。 Selenium IDEの Target ボックス。先頭に「link=」を付けます。
ステップ4） 「検索」ボタンをクリックすると、 Selenium IDE は REGISTER リンクを正しく強調表示できました。
ステップ5） さらに確認するには、コマンドボックスに「clickAndWait」と入力して実行します。 Selenium IDE はその REGISTER リンクをクリックして、以下に示す登録ページに移動できるはずです。
DOM (ドキュメント オブジェクト モデル) による検索
この ドキュメントオブジェクトモデル（DOM）簡単に言えば、HTML 要素を構造化する方法です。 Selenium IDEはページ要素にアクセスする際にDOMを使用することができます。この方法を使用すると、 Target ボックスは常に「dom=document…」で始まります。ただし、「dom=」プレフィックスは通常削除されます。 Selenium IDE は、キーワード「ドキュメント」で始まるすべてのものを DOM 内のパスとして自動的に解釈できます。 Selenium とにかく。
DOM を通じて要素を見つけるには 4 つの基本的な方法があります。 Selenium:
- getElementByIdを
- getElementsByName
- dom:name (名前付きフォーム内の要素にのみ適用されます)
- dom:インデックス
DOM による検索 – getElementById
最初のメソッドに注目してみましょう。DOM の getElementById メソッドを使用します。 Selenium。 構文は次のようになります。
構文
document.getElementById("id of the element")
- 要素の ID = アクセスする要素の ID 属性の値です。 この値は常に括弧 ("") で囲む必要があります。
ステップ1） このデモページを使用してください http://demo.guru99.com/test/facebook.html そこに移動し、Firebug を使用して「ログイン状態を維持する」チェックボックスを調べます。その ID をメモします。
使用すべき ID は「persist_box」であることがわかります。
ステップ2） Open Selenium IDEと Target ボックスに「document.getElementById(“persist_box”)」と入力し、「検索」をクリックします。 Selenium IDEは「ログイン状態を維持する」チェックボックスを見つけることができるはずです。チェックボックスの内部をハイライトすることはできませんが、 Selenium IDE では、以下に示すように要素を明るい緑色の境界線で囲むことができます。
DOM による検索 – getElementsByName
getElementById メソッドは、一度に 0 つの要素のみにアクセスできます。それは、指定した ID を持つ要素です。 getElementsByName メソッドは異なります。 指定した名前を持つ要素の配列を収集します。 XNUMX から始まるインデックスを使用して個々の要素にアクセスします。
|
|
getElementByIdを
|
|
|
getElementsByName
|
構文
document.getElementsByName(“name“)[index]
- name = 'name' 属性で定義された要素の名前
- Index = getElementsByName の配列内のどの要素が使用されるかを示す整数。
ステップ1） MFAデバイスに移動する Mercury ツアーのホームページにアクセスし、ユーザー名とパスワードとして「tutorial」を使用してログインします。 Firefox フライトファインダー画面が表示されます。
ステップ2） Firebug を使用して、ページの下部にある XNUMX つのラジオ ボタン (エコノミー クラス、ビジネス クラス、およびファースト クラスのラジオ ボタン) を調べます。 これらはすべて「servClass」という同じ名前を持っていることに注意してください。
ステップ3） まずは「エコノミークラス」のラジオボタンにアクセスしてみましょう。これら 0 つのラジオ ボタンすべてのうち、この要素が最初に来るため、インデックスは XNUMX になります。 Selenium IDE で「document.getElementsByName(“servClass”)[0]」と入力し、[検索] ボタンをクリックします。 Selenium IDE はエコノミークラスのラジオ ボタンを正しく識別できる必要があります。
ステップ4） インデックス番号を1に変更して、 Target はdocument.getElementsByName(“servClass”)[1]になります。検索ボタンをクリックして、 Selenium 以下に示すように、IDE は「ビジネス クラス」ラジオ ボタンを強調表示できるはずです。
DOM による検索 – dom:name
前述したように、このメソッドは、アクセスしている要素が名前付きフォーム内に含まれている場合にのみ適用されます。
構文
document.forms[“name of the form“].elements[“name of the element“]
- フォームの名前 = アクセスする要素を含む form タグの name 属性の値
- 要素の名前 = アクセスする要素の name 属性の値
ステップ1） MFAデバイスに移動する Mercury ツアーのホームページ http://demo.guru99.com/test/newtours/ Firebug を使用してユーザー名テキスト ボックスを調べます。このテキスト ボックスが「home」という名前のフォームに含まれていることに注意してください。
ステップ2） In Selenium IDE で「document.forms[“home”].elements[“userName”]」と入力し、「検索」ボタンをクリックします。 Selenium IDE は要素に正常にアクセスできる必要があります。
DOM による検索 – dom:index
このメソッドは、名前ではなくフォームのインデックスを使用するため、要素が名前付きフォーム内にない場合にも適用されます。
構文
document.forms[index of the form].elements[index of the element]
- フォームのインデックス = ページ全体に対するフォームのインデックス番号 (0 から始まる)
- 要素のインデックス = 要素を含むフォーム全体に対する要素のインデックス番号 (0 から始まる)
「電話」テキストボックスにアクセスします Mercury ツアー登録ページ。このページのフォームには名前と ID 属性がないので、これは良い例になります。
ステップ1） MFAデバイスに移動する Mercury ツアー登録ページにアクセスし、電話番号テキスト ボックスを調べます。このテキスト ボックスを含むフォームには ID 属性と名前属性がないことに注意してください。
ステップ2） に「document.forms[0].elements[3]」と入力します。 Selenium IDEの Target ボックスをクリックし、[検索] ボタンをクリックします。 Selenium IDE は電話テキスト ボックスに正しくアクセスできる必要があります。
ステップ3） あるいは、インデックスの代わりに要素の名前を使用しても、同じ結果が得られます。に「document.forms[0].elements[“phone”]」と入力します。 Selenium IDEの Target ボックス。電話番号テキスト ボックスは引き続き強調表示されます。
XPathによる検索
XPath は、XML (Extensible Markup Language) ノードを見つけるときに使用される言語です。 HTML は XML の実装と考えることができるため、次のようにすることもできます。 XPath HTML要素を見つける際に。
- 利点： class、name、または id 属性を持たない要素も含め、ほぼすべての要素にアクセスできます。
- デメリット： これは、さまざまなルールや考慮事項が多すぎるため、要素を識別する最も複雑な方法です。
幸いなことに、Firebug は XPath を自動的に生成できます。 Selenium ロケーター。次の例では、前に説明した方法ではアクセスできない画像にアクセスします。
ステップ1） MFAデバイスに移動する Mercury Tours ホームページにアクセスし、Firebug を使用して、黄色の「リンク」ボックスの右側にあるオレンジ色の四角形を調べます。下の画像を参照してください。
ステップ2） 要素の HTML コードを右クリックし、[XPath をコピー] オプションを選択します。
ステップ3） In Selenium IDE、スラッシュ「/」を1つ入力します。 Target ボックスに、前の手順でコピーした XPath を貼り付けます。 あなたのエントリ Target ボックスは 2 つのスラッシュ「//」で始まる必要があります。
ステップ4） 「検索」ボタンをクリックします。 Selenium IDE では、以下に示すようにオレンジ色のボックスを強調表示できるはずです。
まとめ
ロケーターの使用法の構文
| 方法 | Target 構文 | 例 |
|---|---|---|
| ID別 | id=要素のid | id=メール |
| 名前で | name=要素の名前 | 名前=ユーザー名 |
| フィルターを使用した名前による | 名前=要素の名前フィルター=フィルターの値 | 名前=旅行タイプ 値=片道 |
| リンクテキスト別 | リンク=リンクテキスト | リンク=登録 |
