CSS セレクターは、Selenium を使用してブラウザーのテストを自動化するときに、Web ページ上の要素を見つけるための強力なツールです。 CSS セレクターを使用すると、正確かつ柔軟な方法で要素をターゲットにすることができます。この包括的なガイドでは、Selenium の CSS セレクターによる要素検索のプロになるために知っておくべきことをすべてカバーします。
CSS セレクターの概要
CSS セレクターを使用すると、ID、クラス、属性、DOM ツリー内の位置などに基づいて HTML 要素を選択できます。最も一般的に使用される CSS セレクターのいくつかを次に示します。
IDセレクター – 一意の ID に基づいて要素を選択します。例えば
#main-headerid="main-header" を持つ要素が選択されます。クラスセレクター – クラス名に基づいて要素を選択します。例えば
.articleclass="article" を持つすべての要素が選択されます。属性セレクター – 特定の属性または属性値に基づいて要素を選択します。例えば
input[type="text"]type="text" を持つすべての入力要素が選択されます。子孫セレクター – 指定された別の要素の子孫である要素を選択します。例えば
div pdiv 要素内のすべての p 要素を選択します。子セレクター – 指定された別の要素の直接の子である要素を選択します。例えば
div > pdiv の直接の子である p 個の要素を選択します。隣接兄弟セレクター – 別の要素の直後にある兄弟要素を選択します。例えば
h2 + ph2 要素の直後にある p 要素を選択します。一般的な兄弟セレクター – 別の要素に続く兄弟要素をすべて選択します。例えば
h2 ~ ph2 要素の後にあるすべての p 要素を選択します。
これらは、多くの CSS セレクター タイプのほんの一例です。複数のセレクターを組み合わせて、非常に具体的な方法で要素をターゲットにすることができます。
Selenium の CSS セレクターによる要素の検索
Selenium は、CSS セレクターを使用して要素を検索するための 2 つの主な方法を提供します。
driver.find_element_by_css_selector()
このメソッドは、最初に一致した要素を返します。
element = driver.find_element_by_css_selector(‘#main-header‘)driver.find_elements_by_css_selector()
このメソッドは、一致するすべての要素のリストを返します。
elements = driver.find_elements_by_css_selector(‘.article‘)これらのメソッドを使用する場合は、CSS セレクターを文字列として渡します。さまざまなセレクターを使用して要素を検索する方法の例をいくつか示します。
ID 別:
driver.find_element_by_css_selector(‘#signup-form‘)クラス別:
driver.find_element_by_css_selector(‘.footer-links‘)属性別:
driver.find_element_by_css_selector(‘input[name="first_name"]‘)子孫：
driver.find_element_by_css_selector(‘div#content p.summary‘)子：
driver.find_element_by_css_selector(‘ul.menu > li.active‘) 隣接する兄弟:
driver.find_element_by_css_selector(‘h1 + p.intro‘)一般的な兄弟:
driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)ご覧のとおり、CSS セレクターには、さまざまな方法で要素をターゲットにするための多くのオプションが用意されています。
効果的な CSS セレクターを作成するためのヒント
Selenium で要素を検索するための CSS セレクターを作成する際に従うべきヒントをいくつか示します。
できるだけ具体的にする – ID、クラス、属性、および複数のセレクターを組み合わせて使用して、要素を正確にターゲットにします。これにより、誤検知の一致が回避されます。
タグ名よりクラスを優先する – div、p、a などのタグ名はあまり特徴的ではありません。クラスを使用すると、より具体的なターゲティングが可能になります。
name や title などの一意の属性を使用する – 通常、name 属性と title 属性には、単一の要素を特定できる一意の値が含まれます。
兄弟セレクターは慎重に使用してください – 隣接する一般的な兄弟セレクターは、適切に記述されていない場合、意図したよりも多くの要素と一致する可能性があります。
複雑なネストされたセレクターを避ける – 多数の子孫セレクターを連鎖させると、セレクターが壊れやすくなる可能性があります。各セレクターを 3 ～ 4 つのチェーン レベルに制限するようにしてください。
長いセレクターを複数行に分割します – CSS セレクターは単一行である必要はありません。複数の行に分割すると読みやすくなります。
これらのヒントに従うと、Web テストを自動化するための堅牢で保守可能な CSS セレクターを作成するのに役立ちます。
一般的な例と使用例
次に、Selenium を使用した Web スクレイピングとブラウザーのテストに CSS セレクターがどのように使用されるかの一般的な例をいくつか見てみましょう。
ナビゲーションリンクの選択
メインのナビゲーション リンクを選択するには、クラス セレクターを使用できます。
nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)フォームフィールドの選択
input タグと type 属性に基づいてフォーム入力フィールドを選択できます。
username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)テーブルの行と列の選択
CSS セレクターを使用すると、HTML テーブル内の特定の行とセルを簡単にターゲットにできます。
# Get second row
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘)
# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)子要素の選択
コンテナの直接の div 子のみを選択するには、子セレクターを使用できます。
children = driver.find_elements_by_css_selector(‘#container > div‘)テキストに基づいて要素を選択する
* セレクターを使用して、リンク テキストを部分的に一致させることができます。
contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]これらの例は、実際のテスト自動化シナリオで CSS セレクターを使用する方法を示しています。
他の言語での CSS セレクターの使用
これまでの例では Python を使用しましたが、CSS セレクターは Selenium の任意の言語バインディングで使用できます。
Java
// By.cssSelector
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));C#
// FindElement
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));JavaScriptを
// $
const element = await driver.$(‘div.main #login-form‘);使用している言語に関係なく、CSS セレクターは要素をターゲットにするための強力かつ柔軟な方法を提供します。
クラス名による要素の検索
一般的な使用例は、クラス名で要素を検索することです。 Selenium でクラスによって選択するためのヒントをいくつか示します。
正確なクラス名と一致します –
driver.find_element_by_class_name(‘primary-btn‘)CSS クラス セレクターを使用する –
driver.find_element_by_css_selector(‘.primary-btn‘)複数のクラスの部分一致 –
driver.find_element_by_css_selector(‘.primary.btn‘)子孫をクラスと一致させる –
driver.find_element_by_css_selector(‘div .primary-btn‘)一意性を持たせるために複数のクラスを使用する –
driver.find_element_by_css_selector(‘.primary-btn.large‘)
クラス名によるマッチングは非常に便利ですが、ページ上で一意のクラスをターゲットにするようにしてください。
タグ名による要素の検索
HTML タグ名による要素の検索も、Selenium の一般的なタスクです。ここではいくつかの例を示します。
タグ名の最初のインスタンスを検索します。
element = driver.find_element_by_tag_name(‘button‘) タグ名のすべてのインスタンスを検索します。
buttons = driver.find_elements_by_tag_name(‘button‘)CSS セレクターと組み合わせる:
submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)のようなタグ名なので、 <div> & <span> 要素を一意に識別するために、ID、クラス、または属性も使用するようにしてください。
名前または ID による要素の検索
要素に id または name 属性がある場合、最も簡単なオプションは名前または ID で検索することです。
正確な ID で検索:
element = driver.find_element_by_id(‘signup-form‘)正確な名前で検索:
element = driver.find_element_by_name(‘email‘) ID ロケーターと名前ロケーターは、正確な属性値のみと一致します。これにより、非常に具体的になりますが、ID や名前が変更されると壊れる傾向もあります。
XPath と CSS セレクターによる要素の検索
XPath は、Selenium のもう 1 つの一般的な要素の配置戦略です。では、XPath セレクターと CSS セレクターをいつ使用する必要があるのでしょうか?
いくつかの違いを次に示します。
読みやすさ – CSS セレクターは、ほとんどの開発者にとって読みやすく、理解しやすくなっています。
メンテナンス – CSS セレクターは、長く複雑な XPath に比べて脆弱性が低く、破壊的な変更が発生する傾向があります。
機能 – XPath は、CSS セレクターがアクセスできない一部の要素プロパティ (テキスト コンテンツなど) にアクセスできます。
性能 – CSS セレクターは、複雑な XPath と比較して、ブラウザーの照合が高速です。
一般に、保守性とパフォーマンスのために CSS セレクターを優先します。 XPath は、CSS では不可能なアクセスに必要な場合にのみ使用してください。
CSS セレクターを使用する場合のベスト プラクティス
CSS セレクターを使用して要素を検索するときに従うべきベスト プラクティスをいくつか示します。
複雑さよりも一意性を優先する – 可能であれば、ネストされたセレクターの長いチェーンを避けます。
タグ名やネストではなく、ID とクラスを使用します。
3 つ以下の連鎖レベルを一致させるようにしてください。レベルが増えると脆弱性が増加します。
次のようなユニバーサル セレクターは避けてください。
*– これらは誤検知の一致が発生する傾向があります。長いセレクターを複数行に分割 – 読みやすさが向上します。
よく使用されるセレクターをキャッシュする – 繰り返し行われたセレクターの検索を保存します。
説明的なセレクター名を使用する – 意図を明確にし、マジック文字列を回避するのに役立ちます。
これらのベスト プラクティスに従うと、Selenium 自動化用の堅牢で読みやすく信頼性の高い CSS セレクターを作成するのに役立ちます。
CSS セレクターのデバッグに関するヒント
CSS セレクターのデバッグは、テスト自動化にとって不可欠なスキルです。トラブルシューティングのヒントをいくつか紹介します。
ブラウザの開発者ツールを使用してセレクターをテストします。Chrome DevTools には便利な要素インスペクターが用意されています。
一致した要素を印刷して検査する – 実行後
find_elements()、結果を印刷して、何が一致したかを確認します。レスリング
NoSuchElementException– 要素が見つからない場合は、try/excel ブロックで find をラップしてキャッチします。ターゲット要素から XPath を生成 – 多くのブラウザでは XPath をコピーでき、これは CSS セレクターの構築に役立ちます。
複雑なセレクターを簡素化する – セレクターが機能するまで、属性/クラス/ネストを削除してみてください。
必要に応じて明示的な待機を使用する – 動的ページでは、セレクターが使用可能になるまで待機する必要がある場合があります。
セレクターの精度を検証する – セレクターが単なる要素ではなく、実際に目的の要素を見つけていることを確認します。
時間をかけてセレクターを慎重にデバッグすると、より安定したテストが得られます。
まとめ
このガイドでは、Selenium の CSS セレクターによる要素の検索に関する重要な側面をすべて説明しました。
- CSS セレクターの構文と種類
- Selenium での使用
find_elementメソッド - 正確で保守可能なセレクターの作成
- 一般的な使用例と例
- XPathとの比較
- デバッグとベストプラクティス
CSS セレクターは、Web スクレイピングとテスト自動化の対象となる要素を設定する強力かつ柔軟な方法を提供します。ここで紹介するテクニックをマスターすると、アプリケーション UI の変更に強い堅牢な自動化スクリプトを作成できます。 CSS セレクターを適切に使用することは、熟練した Selenium エンジニアにとって必須のスキルです。
