4. 要素の配置

あるページに要素を配置するには、さまざまな方法があります。あなたのケースに最も適したものを使用することができます。Seleniumは、ページ内の要素を見つけるための以下のメソッドを提供します。:

  • find_element_by_id
  • find_element_by_name
  • find_element_by_xpath
  • find_element_by_link_text
  • find_element_by_partial_link_text
  • find_element_by_tag_name
  • find_element_by_class_name
  • find_element_by_css_selector

To find multiple elements (these methods will return a list):

  • find_elements_by_name
  • find_elements_by_xpath
  • find_elements_by_link_text
  • find_elements_by_partial_link_text
  • find_elements_by_tag_name
  • find_elements_by_class_name
  • find_elements_by_css_selector

上記の公開メソッドとは別に、ページオブジェクト内のロケータで便利な2つのプライベートメソッドがあります。これらは、 find_elementfind_elements の2つのプライベートメソッドです。

使用例:

from selenium.webdriver.common.by import By

driver.find_element(By.XPATH, '//button[text()="Some text"]')
driver.find_elements(By.XPATH, '//button')

これらは By クラスで使用できる属性です。:

ID = "id"
XPATH = "xpath"
LINK_TEXT = "link text"
PARTIAL_LINK_TEXT = "partial link text"
NAME = "name"
TAG_NAME = "tag name"
CLASS_NAME = "class name"
CSS_SELECTOR = "css selector"

4.1. ID属性で探す

要素の id 属性を知っている場合は使用しましょう。この戦略では、 id 属性値を持つ最初の要素が返されます。id 属性が一致する要素がない場合、 NoSuchElementException が発生します。

たとえば、以下のページソースを考えてみましょう。:

<html>
 <body>
  <form id="loginForm">
   <input name="username" type="text" />
   <input name="password" type="password" />
   <input name="continue" type="submit" value="Login" />
  </form>
 </body>
<html>

フォーム要素は次のように配置できます。:

login_form = driver.find_element_by_id('loginForm')

4.2. name属性で探す

要素の name 属性が分かっている場合に使用します。この戦略では、 name 属性値を持つ最初の要素が返されます。name 属性が一致する要素がない場合、 NoSuchElementException が発生します。

たとえば、以下のページソースを考えてみましょう。:

<html>
 <body>
  <form id="loginForm">
   <input name="username" type="text" />
   <input name="password" type="password" />
   <input name="continue" type="submit" value="Login" />
   <input name="continue" type="button" value="Clear" />
  </form>
</body>
<html>

ユーザー名とパスワードの要素は、次のように見つけることが出来ます。:

username = driver.find_element_by_name('username')
password = driver.find_element_by_name('password')

これにより、「ログイン」ボタンが「クリア」ボタンの前に表示されます。:

continue = driver.find_element_by_name('continue')

4.3. XPathによる検索

XPathは、XML文書内のノードの位置を特定するために使用される言語です。HTMLはXML(XHTML)を実装できるため、Seleniumユーザーはこの強力な言語を活用して、Webアプリケーションの要素をターゲットにすることができます。XPathは、id属性やname属性で簡単に検索する方法を超えて(サポートするだけでなく)拡張し、ページ上の3番目のチェックボックスの位置付けなど、あらゆる可能性を開拓します。

XPathを使用する主な理由の1つは、探したい要素に適切なIDまたは名前属性がない場合です。XPathを使用して、要素を絶対的な用語(アドバイスされていない)に配置するか、id属性またはname属性を持つ要素に関連付けることができます。XPathロケータを使用して、idやname以外の属性を使用して要素を指定することもできます。

絶対XPathにはルート(html)からのすべての要素の位置が含まれているため、アプリケーションにわずかな調整しか加えられずに失敗する可能性があります。idまたはname属性(理想的には親要素)を持つ近くの要素を見つけることによって、関係に基づいてターゲット要素を見つけることができます。これは変更する可能性が低く、テストをより堅牢にすることができます。

たとえば、以下のページソースを考えてみましょう。:

<html>
 <body>
  <form id="loginForm">
   <input name="username" type="text" />
   <input name="password" type="password" />
   <input name="continue" type="submit" value="Login" />
   <input name="continue" type="button" value="Clear" />
  </form>
</body>
<html>

フォーム要素は次のように配置できます。:

login_form = driver.find_element_by_xpath("/html/body/form[1]")
login_form = driver.find_element_by_xpath("//form[1]")
login_form = driver.find_element_by_xpath("//form[@id='loginForm']")
  1. 絶対パス(HTMLがわずかに変更された場合には破損する)

  2. HTMLの最初のフォーム要素

  3. id という名前の属性を持つフォーム要素と loginForm という値

username要素は次のように見つけることが出来ます。:

username = driver.find_element_by_xpath("//form[input/@name='username']")
username = driver.find_element_by_xpath("//form[@id='loginForm']/input[1]")
username = driver.find_element_by_xpath("//input[@name='username']")
  1. name 属性と username という値を持つ入力子要素を持つ最初のフォーム要素

  2. id 属性と loginForm という値を持つフォーム要素の最初の入力子要素

  3. name 属性と usernameと いう名前の属性を持つ最初の入力要素

「クリア」ボタンの要素は、次のように配置できます。:

clear_button = driver.find_element_by_xpath("//input[@name='continue'][@type='button']")
clear_button = driver.find_element_by_xpath("//form[@id='loginForm']/input[4]")
  1. name 属性の値が continue のinput要素と type 属性の値が button のinput要素

  2. id 属性と loginFoem をもつformのinput要素の4番目の子要素

これらの例はいくつかの基本をカバーしていますが、詳細を知るために次の参考資料をおすすめします。:

また、要素のXPathを発見するのに役立つ、非常に便利なアドオンがいくつかあります。:

  • XPath Checker - suggests XPath and can be used to test XPath results.
  • Firebug - XPath suggestions are just one of the many powerful features of this very useful add-on.
  • XPath Helper - for Google Chrome

4.5. タグ名による要素の検索

タグ名で要素を検索する場合に使用します。この戦略では、指定されたタグ名を持つ最初の要素が返されます。一致するタグ名を持つエレメントがない場合、 NoSuchElementException が発生します。

たとえば、以下のページソースを考えてみましょう。:

<html>
 <body>
  <h1>Welcome</h1>
  <p>Site content goes here.</p>
</body>
<html>

見出し(h1)要素は次のように配置できます。:

heading1 = driver.find_element_by_tag_name('h1')

4.6. クラス名による要素の検索

クラス属性名で要素を検索する場合に使用します。この戦略では、一致するクラス属性名を持つ最初の要素が返されます。要素に一致するクラス属性名がない場合、 NoSuchElementException が発生します。

たとえば、以下のページソースを考えてみましょう。:

<html>
 <body>
  <p class="content">Site content goes here.</p>
</body>
<html>

p要素は次のように置くことができます。:

content = driver.find_element_by_class_name('content')

4.7. CSSセレクタによる要素の特定

CSSセレクタ構文で要素を検索する場合に使用します。この戦略では、一致するCSSセレクタを持つ最初の要素が返されます。要素に一致するCSSセレクタがない場合、 NoSuchElementException が発生します。

たとえば、以下のページソースを考えてみましょう。:

<html>
 <body>
  <p class="content">Site content goes here.</p>
</body>
<html>

p要素は次のように置くことができます。:

content = driver.find_element_by_css_selector('p.content')

Sauce Labs には、CSSセレクタに関する優れたドキュメントがあります。