CSS セレクター Selenium

CSSセレクターとは何ですか Selenium?

A CSS セレクター Selenium CSSセレクタは、HTMLタグ、ID、クラス、属性の組み合わせによってWeb要素を識別する文字列パターンです。CSSセレクタはIDや名前による検索よりもやや高度ですが、経験豊富な開発者の間では最も一般的な手法です。 Selenium なぜなら、ユーザーはIDや名前属性がまったくない要素にもアクセスできるからです。

CSS セレクター Selenium さまざまな形態がありますが、このガイドでは、 Selenium IDE：

• タグとID
• タグとクラス
• タグと属性
• タグ、クラス、および属性
• 内部テキスト

この戦略を使用する際は Selenium IDE は常にプレフィックスを付けます Target 「css=以下のすべての例で示されているとおりです。

CSSセレクタを使用する理由 Selenium?

CSSセレクタは多くの人にとって好ましいロケーター戦略です Selenium 自動化エンジニアは、速度、柔軟性、可読性のバランスが取れているため、CSSセレクタを使用します。現代のWebアプリケーションでは、動的に生成されたIDを使用したり、名前属性を完全に削除したりすることが多く、ページ上の特定の要素を対象とする唯一の信頼できる方法としてCSSセレクタが残されています。

CSSセレクタを使用する主な利点は以下のとおりです。

• パフォーマンス： CSSセレクタはブラウザのネイティブエンジンによって処理されるため、特にInternet Explorerなどの古いブラウザでは、同等のXPath式よりも高速に実行されます。
• 柔軟性: これらはタグ、クラス、属性、部分一致ロジックを組み合わせることで、安定したIDを持たない要素をテスターが対象とすることを可能にする。
• 可読性： この構文は、開発者が既にCSSルールを記述する方法を反映しているため、QAエンジニアとフロントエンドチームの両方にとって学習曲線が短縮されます。
• クロスブラウザでの安定性： CSSセレクタはChrome全体で一貫して動作します。 FirefoxEdge、Safariに対応し、不安定なテスト失敗を減らします。

タグとID – CSSセレクタ

この例では、Facebook ログインページのメールテキストボックスを使用します。要素の ID は「メール「、そしてそれはすでに「IDによる検索」セクションでアクセスされていました。今、同じ要素が、 Selenium ID属性を持つCSSセレクタ。

構文

css=tag#id

• tag = アクセスされる要素の HTML タグ
• # = ハッシュ記号。 Selenium ID 付き CSS セレクター
• id = アクセスされる要素のID

ID の前には常にハッシュ記号 (#) が付くことに注意してください。

ステップ1） MFAデバイスに移動する www.facebook.comブラウザの開発者ツール（またはFirebugなどの従来のツール）を使用して、「メールアドレスまたは電話番号」テキストボックスを調べます。

HTMLタグは「 」そしてそのIDは「メール「。したがって、完全なCSSセレクタは次のようになります」css=入力#メール"

ステップ2） 入る "css=入力#メール」に Target 〜の箱 Selenium IDE を起動し、「検索」ボタンをクリックします。 Selenium IDEはページ上の該当する要素をハイライト表示します。

タグとクラス – CSSセレクタ

CSSセレクター Selenium HTMLタグとクラス名を使用するものは、タグとIDと同じ考え方に従いますが、ハッシュ記号の代わりにドット（.）を使用します。

構文

css=tag.class

• tag = アクセスされる要素の HTML タグ
• . = ドット記号。クラス付きの CSS セレクタを使用する場合は、常に存在する必要があります。
• class = アクセスされる要素のクラス

ステップ1） デモページを開く https://demo.guru99.com/test/facebook.html そして「メールまたは電話」テキストボックスを調べます。HTMLタグは「 「そしてそのクラスは「入力テキスト"

ステップ2） In Selenium IDE で「css=入力.入力テキスト" の中に Target ボックスをクリックし、[検索] をクリックします。 Selenium IDEは、メールアドレスまたは電話番号のテキストボックスを認識します。

複数の要素が同じHTMLタグとクラスを共有している場合、ソースコード内で最初に一致する要素のみが認識されることに注意してください。 同じページにあるパスワード入力欄を調べてみると、メールアドレス入力欄や電話番号入力欄と同じクラスに属していることが分かります。

前の図では、ページソースの最初に表示されるため、「メールアドレス」または「電話番号」のテキストボックスのみが強調表示されていました。

タグと属性 – CSSセレクタ

この手法では、HTMLタグと、アクセスしたい要素に属する特定の属性を組み合わせます。

構文

css=tag[attribute=value]

• tag = アクセスされる要素の HTML タグ
• [ と ] は、属性とその対応する値を囲む角括弧です。
• attribute = 使用する属性。name や id など、要素固有の属性を選択してください。
• value = 選択した属性の対応する値。

ステップ1） に移動します Mercury ツアー登録ページ https://demo.guru99.com/test/newtours/register.php そして、「姓」のテキストボックスを調べます。そのHTMLタグ（「input」）とname属性（「lastName」）に注目してください。

ステップ2） In Selenium IDE で「css=input[名前=姓]" の中に Target ボックスをクリックし、[検索] をクリックします。 Selenium IDEは「姓」フィールドを正常に検出しました。

複数の要素が同じHTMLタグと属性を共有している場合、最初に認識された要素のみが認識されます。 この動作は、同じタグとクラスを持つ要素を検索する場合と全く同じです。

タグ、クラス、属性 – CSSセレクタ

構文

css=tag.class[attribute=value]

• tag = アクセスされる要素の HTML タグ
• . = ドット記号。クラス付きの CSS セレクタを使用する場合は、常に存在する必要があります。
• class = アクセスされる要素のクラス
• [ と ] は、特定の属性とその対応する値を囲む角括弧です。
• attribute = 使用する属性。name や id など、要素固有の属性を選択してください。
• value = 選択した属性の対応する値。

ステップ1） デモページを開く https://demo.guru99.com/test/facebook.html そして、「メールアドレスまたは電話番号」と「パスワード」の入力ボックスを調べます。それらの HTML タグ、クラス、属性をメモしてください。この例では「タブインデックス" 属性。

ステップ2） まず、タブインデックス値を 1 にして「メールアドレスまたは電話番号」テキストボックスにアクセスします。「css=input.inputtext[tabindex=1]」に Selenium IDEの Target ボックスを開き、「検索」をクリックします。「メールアドレス」または「電話番号」のフィールドがハイライト表示されます。

ステップ3） パスワード入力ボックスを対象とするには、tabindex の値を置き換えるだけです。「css=input.inputtext[tabindex=2]" の中に Target ボックスをクリックし、[検索] をクリックします。 Selenium IDEはパスワード入力欄を正常に検出しました。

内部テキスト – CSSセレクタ

HTMLラベルにはid、name、class属性がほとんど付与されません。では、どのようにアクセスすればよいのでしょうか？ Selenium答えは、彼らの本文の中にあります。 内部テキストとは、HTMLラベルがページ上に表示される実際の文字列パターンです。

構文

css=tag:contains("inner text")

• tag = アクセスされる要素の HTML タグ
• 内部テキスト = 要素の表示可能なテキストコンテンツ

ステップ1） に移動します Mercury ツアーのホームページ https://demo.guru99.com/test/newtours/ そして、「パスワード」ラベルを調べます。そのHTMLタグ（この場合は「font」）に注目し、その要素にはclass、id、またはname属性がないことを確認してください。

ステップ2） タイプ css=font:contains(“パスワード:”) に Selenium IDEの Target ボックスをクリックし、[検索] をクリックします。 Selenium IDEは、以下に示すようにパスワードラベルの位置を特定します。

ステップ3） 今回は、内部テキストを「ボストン」に置き換えて、 Target 「css=font:contains(“Boston”)「. [検索]をクリックします。「ボストンからサンフランシスコ」ラベルが強調表示され、 Selenium IDEは、ラベル内部のテキストの最初の単語だけが指定されている場合でも、長いラベルを特定できます。

CSSセレクターとXPathの比較 Selenium

CSSセレクタとXPathはどちらもWeb要素を識別するために使用されます。 Seleniumしかし、それぞれに異なる強みがあります。以下の表は、2つのロケーター戦略を主要な側面から比較したものです。

基準	CSSセレクター	XPath
速度	より高速で、ブラウザのネイティブエンジンで動作します	特に古いブラウザでは動作が遅くなる。
リーダーシップ	転送のみ（親から子へ）	前進と後退（子から親へ）
構文	CSSルールに似ていて、より短い。	より長い階層的なパス式
テキストマッチング	:contains() 擬似クラスに限定	強力な text() 関数と contains() 関数
ベスト	静的レイアウトと最新のウェブアプリ	複雑なDOMトラバーサルとテキストベースのロケーター

CSSセレクターの書き方のベストプラクティス Selenium

信頼性の高い CSS セレクターを作成するには、構文を知っているだけでは不十分です。以下のプラクティスは、テスターが安定した保守可能なセレクターを作成するのに役立ちます。 Selenium UI変更後も動作し続けるスクリプト：

1. 独自の属性を好む： 自動化のために明示的に追加された id、data-test-id、または name 属性を必ず選択してください。これらの属性は、ビジュアルレイアウトが変更されても安定した状態を維持します。
2. 過度にネストされたセレクタは避けてください。 長い鎖など div > div > ul > li > a 開発者がマークアップをリファクタリングすると、簡単に壊れてしまうため、セレクタはできるだけ短くしてください。
3. 部分一致は賢く使いましょう。 次のようなパターン [class*="btn-primary"] クラス名の小さな変更は許容しますが、意図しない要素と一致してしまう可能性もあります。
4. インデックスベースのロケーターは避けてください。 セレクターのような nth-child(3) 兄弟要素を追加するとすべての位置がずれるため、脆弱です。
5. DevToolsでセレクターを検証する： 実行する前に Selenium スクリプトを使用して、セレクターを Chrome DevTools コンソールに貼り付けます。 document.querySelector() 正確に1つの要素を返すことを確認するため。
6. 独自性を高めるために属性を組み合わせる： クラスが多くの要素で共有されている場合は、次のような属性フィルターを追加します。 input.form-control[name="email"] 対象を明確にするため。
7. 文書化と再利用： セレクタをページオブジェクトクラス内に一元化することで、一度の更新で同じ要素を参照するすべてのテストが修正されるようにします。

これらのガイドラインに従うことで不安定さが軽減され、テスト実行速度が向上し、 Selenium スイートは長期的に見てメンテナンスが容易です。

概要：CSSセレクタ構文クイックリファレンス

以下の表は、 Selenium このガイドで解説するCSSセレクターパターン：

方法	Target 構文	例:
タグとID	css=タグ#id	css=入力#メール
タグとクラス	css=タグ.クラス	css=入力.入力テキスト
タグと属性	css=タグ[属性=値]	css=input[名前=姓]
タグ、クラス、および属性	css=タグ.class[属性=値]	css=input.inputtext[tabindex=1]
内部テキスト	css=tag:contains(“text”)	css=font:contains(“パスワード:”)

よくあるご質問