2つ以上のHTMLページがWebアプリケーションを構成しています。
ウェブ要素とは、テキストボックスやボタンなど、ウェブページを構成するすべての構成単位/フィールドを指します。
静的要素とは、あらゆるHTMLページでブラウザによってレンダリングされるデータオブジェクトモデル(DOM)上のすべての要素です。
動的要素とは、実行時に呼び出され、ページに動的に追加されるウェブページの要素のことです。
こちらもお読みください。
Web アプリケーションの自動テストにおいてもっとも重要なフェーズの1つは Web 要素 (UI) の位置を特定することです。
Selenium の要素セレクタの一部です。
- ID
- 名前
- クラス名
- リンクされたテキスト
- 部分的にリンクされたテキスト
- タグ名
- XPath
- およびCSSセレクタ
Web要素のID、Name、Class Nameは、それを見つけるのに最も便利な方法です。
コードに適切な値を入力し、プログラムを実行するだけで、動作するかどうかを確認することができます。
なぜこれほど多くのセレクタが必要なのか?
なぜウェブページの要素の位置を特定するさまざまな方法が必要なのか、不思議に思われるかもしれません。
それは、ウェブページからデータを取得する必要があるたびに、そのページの HTML コード(DOM)を批判的に調べて、固有のセレクタや共通のセレクタを探す必要があるからです。
また、動的に読み込まれるサイトや、AJAXサイトなどに関する問題もあります。
Selenium のロケータの種類
from selenium import webdriver
driver = webdriver.Chrome( './chromedriver.exe' )
driver.get( "https://www.python.org" )
search_bar = driver.find_element_by_id( "id-search-field" )
|
HTML タグ、属性、HTML テキストをもとに、ウェブ要素を見つけるためにロケータが使われます。
Selenium WebDriver では、8 種類のロケータがあります。
- ID。ID: Web ページで Web 要素を探すときに、このロケータが優先されます。この値は、ウェブページ全体の各要素に対して常に一意であるため、このロケータを使用すると、重複してマッチすることがありません。HTMLコードにidプロパティが存在する場合は、それを利用します。
- 名前。このロケータは、HTML コード内のあらゆる Web 要素の name 属性が存在する場所で使用されます。
- className: className: HTMLコードにclass属性がある場合、この場所が使用されます。
- tagName: このロケータは、Web 要素が特徴的な HTML タグを持つ場合にのみ使用されます。
- linkText: このロケータは、リンクがそれに接続された固有の HTML テキストを持つ場合に使用される。
- partialLinkText:部分リンクテキスト。Webページ上に長いテキストがリンクされている場合、そのリンクの部分的なHTMLテキストを使用することにより、このロケータを利用します。
- cssSelector: cssSelectorは、XPathよりもかなり高速なロケータで、かなり広範囲に使われている。他のロケータよりも複雑ですが、特定のhtml要素がない場合でも、このロケータを使用してWeb要素を特定できるため、最も効果的なロケータです。
- XPath タグ、属性、テキストを利用してWeb要素を検索するロケータです。XPathは、HTMLとXMLの両方のテキストに対して使用することができます。絶対XPathと相対XPathがXPathの2つの形式です。
-
- 絶対的な XPath – ルート要素から必要な子ノードまでのように、この XPath はウェブ要素の位置を特定します。Absolute XPath は、リアルタイムの自動化プログラムでは使用しないでください。
- 相対的XPath – タグ、属性、テキストを使用してアイテムを発見する、修正されたXPathです。
さて、Selenium を使ってウェブページの要素を見つけるためのすべての異なる方法について説明しました。
今、私たちはより簡単な選択と属性のためにPython Seleniumで最も重要で広く使われているセレクタを議論します。
1. CSS ID によって Selenium の要素を見つける
これは要素を発見するための最も簡単な方法です。
CSS ID は HTML DOM 要素の id プロパティで保持され、ウェブページ上の各要素に対して一意になるように設計されています。
そのため、ID を使用して要素を一意に識別することができます。
この機能にアクセスするには、webdriverクラスのfind_element_by_id()メソッドを使用する必要があります。
ここでは、その使い方を説明します。
from selenium import webdriver
driver = webdriver.Chrome( './chromedriver' )
driver.get( "https://www.python.org" )
first_search_bar = driver.find_element_by_class_name( "class-name" )
|
検索対象の ID を持つ DOM 要素が存在しない場合は ‘No Such Element’ Exception をスローしますが、try-catch ブロックを使用することで効率的に処理することができます。
ページ上のすべての DOM 要素は、理論的にはそれ自身の ID を持つべきものです。
しかし、実際のところ、このようなことはあまりありません。
ほとんどの項目が ID を持っていなかったり、同じ ID を持つ 2 つの要素に出くわしたりすることがあります。
このような場合、DOMの要素を一意に識別するために、別の手法を用いなければなりません。
2. CSS のクラス名で Selenium の要素を検索する
ページ上のコンポーネントを見つけるための別の方法は検索用語としてクラス名を使うことです。
クラス名は HTML タグの class プロパティに保存されます。
CSS クラスは DOM コンポーネントの集合に適用されることを意図しています。
マッチするクラスを持つ最初の要素だけが、find_element_by_class_name() 関数によって返されます。
指定されたクラス名を持つ要素がない場合は、NoSuchElementException をスローします。
以下は、ドライバでの活用例です。
email_input = driver.find_element_by_xpath( "//form[input/@name='email']" )
|
注意点: 上記のコードでは、クラスが一致する最初の要素のみを返します。
マッチングクラスが同じ要素(一括選択)については、ループを使ってfind elementメソッドを繰り返し実行し、繰り返し実行するたびにこのwhileに情報を格納する必要があります。
3. Selenium で XPath を使って要素を探す
要素の ID やクラス、名前から要素を特定できない場合は、 要素の XML パスを用いて位置を特定する必要があります。
この方法は、XML ドキュメントを読み込むときにも使用できます。
今回は、絶対パスではWebページのHTML構造(DOM)が変化したときに間違えやすいため、絶対ルートではなく相対パスを利用する方法について見ていきます。
ドキュメント内の適切な要素を発見するために、find_element_by_xpath()関数を利用します。
要素へのパスは、find_element_by_xpath()関数のパラメータとして渡されます。
次のコードは、HTMLフォームの電子メール入力ボックスを見つけるために使用されます。
first_name = driver.find_element_by_xpath( "//form[@id='loginForm']/input[1]" )
last_name = driver.find_element_by_xpath( "//form[@id='loginForm']/input[2]" )
|
このコードでは、ページの最初のフォーム要素を探します。
このフォームは、emailという名前とemailという値を持つ項目を探し、必要な要素に絞り込みます。
では、フォームの姓と名の入力要素を発見してみましょう。
page_heading = driver.find_element_by_tag_name( 'h1' )
|
これはIDログインフォームを持つフォームを探し、そのフォームの1番目と2番目の入力要素を、適切であれば姓と名に選びます。
4. Python で単一の HTML 要素を探す Selenium – Misc
これまで述べた一般的な方法に加えて、Selenium WebDriverにはさらにいくつかの要素ロケータがあります。
Finding elements by their HTML tag names は find_element_by_tag_name() 関数を使用することで実現可能です。
click_here_link = driver.find_element_by_link_text( 'Click Here' )
|
ハイパーリンクの要素は、リンクテキストから探すこともできます。
find_element_by_link_text() メソッドで特定のリンクテキストを検索したり、 find_element_by_partial_link_text() メソッドで部分リンクテキストを検索することが可能です。
Exact Link Text – (正確なリンクテキストの場合)
click_here_link = driver.find_element_by_partial_link_text( 'Click' )
|
部分リンクテキスト
結論
これで、Pythonプログラミング言語を使ったSeleniumのロケーターに関するレッスンの結論に達しました。
HTMLページ内のアイテムを選択するための多くの異なるテクニックを議論しました。
ウェブページの要素を見つけることについてよく学び、自分自身で実装する準備ができていることを願っています。