Selenium のロケーター

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

Locator は、Selenium IDE にどの GUI 要素 (テキストなど) を伝えるコマンドです。 Box、ボタン、チェック Boxes など) を操作する必要があります。 正しい GUI 要素を識別することは、自動化スクリプトを作成するための前提条件です。 しかし、GUI 要素を正確に識別することは、思っているよりも困難です。 場合によっては、間違った GUI 要素を使用したり、まったく要素を使用しないことになる場合があります。 したがって、Selenium は、GUI 要素を正確に見つけるための多数のロケーターを提供します。

ロケーターを必要としないコマンドもあります (「open」コマンドなど)。 ただし、それらのほとんどは Selenium Webdriver の要素ロケーターを必要とします。

ロケーターの選択は、テスト対象のアプリケーションに大きく依存します。。このチュートリアルでは、これらのアプリケーションがサポートするロケーターに基づいて、Facebook、新しい Tours.demoaut を切り替えます。のようにwise 自分で テスト プロジェクトでは、アプリケーションのサポートに基づいて、Selenium Webdriver で上記の要素ロケーターのいずれかを選択します。

IDで探す

ID は要素ごとに一意であると考えられているため、これは要素を検索する最も一般的な方法です。

ターゲットフォーマット: id=要素のID

この例では、Mercury Tours は ID 属性を使用しないため、テスト アプリとして Facebook を使用します。

ステップ1) このチュートリアルが作成されて以来、Facebook はログイン ページのデザインを変更しました。 このデモページを使用してください http://demo.guru99.com/test/facebook.html テスト用。 「E」を検査します。mail または電話」のテキスト box Firebug を使用してその ID をメモします。 この場合のIDは「e」です。mailに設立された地域オフィスに加えて、さらにローカルカスタマーサポートを提供できるようになります。」

IDで探す

ステップ2) Selenium IDE を起動し、「id=e」と入力します。mailターゲットの「」 box。 「検索」ボタンをクリックすると、「E」mail または電話」のテキスト box が黄色で強調表示され、緑色で囲まれます。これは、Selenium IDE がその要素を正しく見つけることができたことを意味します。

IDで探す

名前による検索

名前による要素の検索は、ID による検索とよく似ていますが、 「名前=」 代わりにプレフィックスを付けます。

ターゲットフォーマット: name=要素の名前

続きましてwing デモンストレーションでは、すべての重要な要素に名前があるため、ここでは Mercury Tours を使用します。

ステップ1) MFAデバイスに移動する http://demo.guru99.com/test/newtours/ Firebug を使用して「ユーザー名」テキストを検査します。 box。 その name 属性に注目してください。

名前による検索

ここでは、要素の名前が「userName」であることがわかります。

ステップ2) Selenium IDE で、ターゲットに「name=userName」と入力します。 box そして「検索」ボタンをクリックします。 Selenium IDE はユーザー名のテキストを見つけることができるはずです box それを強調表示することによって。

名前による検索

フィルターを使用して名前で要素を検索する方法

フィルターは、複数の要素が同じ名前を持つ場合に使用できます。 フィルターは、同じ名前の要素を区別するために使用される追加の属性です。

ターゲットフォーマット: 名前=要素の名前フィルター=フィルターの値

例を見てみましょう –

ステップ1) マーキュリーツアーにログオンします。

ユーザー名とパスワードとして「tutorial」を使用して、Mercury Tours にログオンします。 以下に示す Flight Finder ページが表示されます。

フィルターを使用して名前で要素を検索する

ステップ2) firebug を使用する場合は、VALUE 属性を使用します。

Firebug を使用すると、往復ラジオ ボタンと片道ラジオ ボタンが同じ「tripType」という名前になっていることがわかります。 ただし、それらは異なる VALUE 属性を持っているため、それぞれをフィルターとして使用できます。

フィルターを使用して名前で要素を検索する

ステップ3) 最初の行をクリックします。

  • 最初に [One Way] ラジオ ボタンにアクセスします。 エディターの最初の行をクリックします。
  • コマンド内 box Selenium IDE の「クリック」コマンドを入力します。
  • ターゲット内で box, 「name=tripType value=oneway」と入力します。 「value=oneway」の部分がフィルターです。

フィルターを使用して名前で要素を検索する

ステップ4) 「検索」ボタンをクリックします。

Selenium IDE は、[One Way] ラジオ ボタンを緑色で強調表示できることに注目してください。これは、VALUE 属性を使用して要素に正常にアクセスできることを意味します。

フィルターを使用して名前で要素を検索する

ステップ5) [片道] ラジオ ボタンを選択します。

キーボードの「X」キーを押して、このクリック コマンドを実行します。 [One Way] ラジオ ボタンが選択されていることに注目してください。

フィルターを使用して名前で要素を検索する

「ラウンドトリップ」ラジオボタンでもまったく同じことを行うことができます。今回はターゲットとして「name=tripType value=roundtrip」を使用します。

リンクテキストによる検索

Selenium のこのタイプの CSS ロケーターは、ハイパーリンク テキストにのみ適用されます。 ターゲットの前に「link=」を付け、その後にハイパーリンク テキストを続けることで、リンクにアクセスします。

ターゲットフォーマット: リンク=リンク_テキスト

この例では、Mercury Tours のホームページにある「REGISTER」リンクにアクセスします。

ステップ1)

  • まず、Mercury Tours からログオフしていることを確認してください。
  • マーキュリーツアーズのホームページにアクセスします。

ステップ2)

  • Firebug を使用して、「REGISTER」リンクを調べます。 リンク テキストは と タグの間にあります。
  • この場合、リンクテキストは「REGISTER」です。 リンクテキストをコピーします。

リンクテキストによる検索

ステップ3) Firebug のリンク テキストをコピーし、Selenium IDE のターゲットに貼り付けます。 box。 先頭に「link=」を付けます。

リンクテキストによる検索

ステップ4) 「検索」ボタンをクリックすると、Selenium IDE が REGISTER リンクを正しく強調表示できることがわかります。

リンクテキストによる検索

ステップ5) さらに確認するには、コマンドに「clickAndWait」と入力します。 box そしてそれを実行します。 Selenium IDE はその REGISTER リンクをクリックして、以下に示す登録ページに移動できるはずです。

リンクテキストによる検索

DOM (ドキュメント オブジェクト モデル) による検索

最大XNUMXWの出力を提供する ドキュメントオブジェクトモデル(DOM)簡単に言えば、HTML 要素を構造化する方法です。 Selenium IDE は、ページ要素にアクセスする際に DOM を使用できます。 この方法を使用すると、ターゲットは box 常に「dom=document…」で始まります。 ただし、Selenium IDE は、キーワード「document」で始まるすべてのものを Selenium の DOM 内のパスとして自動的に解釈できるため、「dom=」接頭辞は通常は削除されます。

Selenium で DOM を通じて要素を見つけるには、次の XNUMX つの基本的な方法があります。

  • getElementByIdを
  • getElementsByName
  • dom:name (名前付きフォーム内の要素にのみ適用されます)
  • dom:インデックス

DOM による検索 – getElementById

最初のメソッドに注目してみましょう。Selenium の DOM の getElementById メソッドを使用します。 構文は次のようになります。

構文

document.getElementById("id of the element")

  • 要素の ID = アクセスする要素の ID 属性の値です。 この値は常に括弧 ("") で囲む必要があります。

ステップ1) このデモページを使用してください http://demo.guru99.com/test/facebook.html そこに移動し、Firebug を使用して「ログインしたままにする」チェックを検査します。 box。 その ID をメモしておきます。

DOM による検索 – getElementById

使用する必要がある ID は「persist_」であることがわかります。box"。

ステップ2) Selenium IDE を開き、ターゲット内で box、「document.getElementById(“persist_box「)」を選択し、「検索」をクリックします。 Selenium IDE は「ログインしたままにする」チェックを見つけることができるはずです box。 小切手の内側を強調することはできませんが、 box, Selenium IDE では、以下に示すように要素を明るい緑色の境界線で囲むことができます。

DOM による検索 – getElementById

DOM による検索 – getElementsByName

getElementById メソッドは、一度に 0 つの要素のみにアクセスできます。それは、指定した ID を持つ要素です。 getElementsByName メソッドは異なります。 指定した名前を持つ要素の配列を収集します。 XNUMX から始まるインデックスを使用して個々の要素にアクセスします。

DOM による検索 – getElementsByName

getElementByIdを

  • 取得できる要素は XNUMX つだけです。
  • その要素には、getElementById() のかっこ内に指定した ID が付けられます。

DOM による検索 – getElementsByName

getElementsByName

  • すべて同じ名前を持つ要素のコレクションを取得します。
  • 各要素には配列と同様に 0 から始まる番号が付けられます。
  • 四角形の中にインデックス番号を入力して、アクセスしたい要素を指定します。 brackets 以下の getElementsByName の構文で。

構文

document.getElementsByName(“name“)[index]

  • name = 'name' 属性で定義された要素の名前
  • Index = getElementsByName の配列内のどの要素が使用されるかを示す整数。

ステップ1) Mercury Tours のホームページに移動し、ユーザー名とパスワードとして「tutorial」を使用してログインします。 Firefox フライトファインダー画面が表示されます。

ステップ2) Firebug を使用して、ページの下部にある XNUMX つのラジオ ボタン (エコノミー クラス、ビジネス クラス、およびファースト クラスのラジオ ボタン) を調べます。 これらはすべて「servClass」という同じ名前を持っていることに注意してください。

DOM による検索 – getElementsByName

ステップ3) まずは「エコノミークラス」のラジオボタンにアクセスしてみましょう。 これら 0 つのラジオ ボタンすべてのうち、この要素が最初に来るため、インデックスは 0 になります。Selenium IDE で、「document.getElementsByName(“servClass”)[XNUMX]」と入力し、[検索] ボタンをクリックします。 Selenium IDE はエコノミークラスのラジオボタンを正しく識別できるはずです。

DOM による検索 – getElementsByName

ステップ4) インデックス番号を 1 に変更すると、ターゲットは document.getElementsByName(“servClass”)[1] になります。 「検索」ボタンをクリックすると、以下に示すように、Selenium IDE によって「ビジネス クラス」ラジオ ボタンが強調表示されるようになります。

DOM による検索 – getElementsByName

DOM による検索 – dom:name

前述したように、このメソッドは、アクセスしている要素が名前付きフォーム内に含まれている場合にのみ適用されます。

構文

document.forms[“name of the form“].elements[“name of the element“]

  • フォームの名前 = アクセスする要素を含む form タグの name 属性の値
  • 要素の名前 = アクセスする要素の name 属性の値

ステップ1) マーキュリーツアーのホームページに移動します http://demo.guru99.com/test/newtours/ Firebug を使用してユーザー名のテキストを検査します box。 これが「home」という名前のフォームに含まれていることに注目してください。

DOM による検索 – dom:name

ステップ2) Selenium IDE で、「document.forms[“home”].elements[“userName”]」と入力し、[検索] ボタンをクリックします。 Selenium IDE は要素に正常にアクセスできる必要があります。

DOM による検索 – dom:name

DOM による検索 – dom:index

このメソッドは、名前ではなくフォームのインデックスを使用するため、要素が名前付きフォーム内にない場合にも適用されます。

構文

document.forms[index of the form].elements[index of the element]

  • フォームのインデックス = ページ全体に対するフォームのインデックス番号 (0 から始まる)
  • 要素のインデックス = 要素を含むフォーム全体に対する要素のインデックス番号 (0 から始まる)

「電話」テキストにアクセスします box マーキュリーツアー登録ページ内。 このページのフォームには名前と ID 属性がないため、これが良い例になります。

ステップ1) Mercury Tours の登録ページに移動し、電話のテキストを確認します。 box。 これを含むフォームには ID 属性と名前属性がないことに注意してください。

DOM による検索 – dom:index

ステップ2) Selenium IDE のターゲットに「document.forms[0].elements[3]」と入力します。 box そして「検索」ボタンをクリックします。 Selenium IDE は電話テキストにアクセスできる必要があります box 正しく

DOM による検索 – dom:index

ステップ3) あるいは、インデックスの代わりに要素の名前を使用しても、同じ結果が得られます。 Selenium IDE のターゲットに「document.forms[0].elements[“phone”]」と入力します。 box。 電話のテキスト box まだ強調表示されるはずです。

DOM による検索 – dom:index

XPathによる検索

XPath は、XML (Extensible Markup Language) ノードを見つけるときに使用される言語です。 HTML は XML の実装と考えることができるため、次のようにすることもできます。 XPath HTML要素を見つける際に。

  • 利点: class、name、または id 属性を持たない要素も含め、ほぼすべての要素にアクセスできます。
  • デメリット: これは、さまざまなルールや考慮事項が多すぎるため、要素を識別する最も複雑な方法です。

幸いなことに、Firebug は XPath Selenium ロケーターを自動的に生成できます。 続きましてwing たとえば、前に説明した方法ではアクセスできない可能性がある画像にアクセスします。

ステップ1) Mercury Tours ホームページに移動し、Firebug を使用して黄色の「リンク」の右側にあるオレンジ色の四角形を調べます。 box。 下の画像を参照してください。

XPathによる検索

ステップ2) 要素の HTML コードを右クリックし、[XPath をコピー] オプションを選択します。

XPathによる検索

ステップ3) In セレンIDE、ターゲットにスラッシュ「/」を XNUMX つ入力します。 box 次に、前の手順でコピーした XPath を貼り付けます。 ターゲットのエントリ box XNUMX つのスラッシュ「//」で始める必要があります。

XPathによる検索

ステップ4) 「検索」ボタンをクリックします。 Selenium IDE はオレンジ色を強調表示できるはずです box としてジョブステータス出力ログに記録されます。

XPathによる検索

まとめ

ロケーターの使用法の構文

方法 ターゲット構文
ID別 id=要素のid id=email
名前で name=要素の名前 名前=ユーザー名
フィルターを使用した名前による 名前=要素の名前フィルター=フィルターの値 名前=旅行タイプ 値=片道
リンクテキスト別 リンク=リンクテキスト リンク=登録