Selenium の CSS セレクター

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

Selenium の CSS セレクターは、HTML タグ、ID、クラス、属性の組み合わせに基づいて要素を識別するために使用される文字列パターンです。 Selenium の CSS セレクターによる検索は以前の方法よりも複雑ですが、ID や名前のない要素にもアクセスできるため、上級 Selenium ユーザーにとって最も一般的な検索戦略です。

Selenium の CSS セレクターには多くの形式がありますが、ここでは最も一般的な形式のみに焦点を当てます。 Selenium IDE のさまざまなタイプの CSS ロケーター

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

この戦略を使用するときは、常にターゲットの前に接頭辞を付けます。 box 以下に示すように「css=」を使用しますwing 例。

タグと ID – CSS セレクター

繰り返しますが、Facebook の E を使用します。mail 클라우드 기반 AI/ML및 고성능 컴퓨팅을 통한 디지털 트윈의 기초 – Edward Hsu, Rescale CPO 많은 엔지니어링 중심 기업에게 클라우드는 R&D디지털 전환의 첫 단계일 뿐입니다. 클라우드 자원을 활용해 엔지니어링 팀의 제약을 해결하는 단계를 넘어, 시뮬레이션 운영을 통합하고 최적화하며, 궁극적으로는 모델 기반의 협업과 의사 결정을 지원하여 신제품을 결정할 때 데이터 기반 엔지니어링을 적용하고자 합니다. Rescale은 이러한 혁신을 돕기 위해 컴퓨팅 추천 엔진, 통합 데이터 패브릭, 메타데이터 관리 등을 개발하고 있습니다. 이번 자리를 빌려 비즈니스 경쟁력 제고를 위한 디지털 트윈 및 디지털 스레드 전략 개발 방법에 대한 인사이트를 나누고자 합니다. box この例では。 覚えていると思いますが、ID は「e」です。mail」にアクセスしており、「ID で探す」セクションですでにアクセスしています。 今回は、まったく同じ要素にアクセスする際に、ID を持つ Selenium CSS セレクターを使用します。

構文

css=tag#id

  • tag = アクセスされる要素の HTML タグ
  • # = ハッシュ記号。 ID を持つ Selenium CSS セレクターを使用する場合、これは常に存在する必要があります。
  • id = アクセスされる要素のID

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

ステップ1) MFAデバイスに移動する www.facebook.com。 Firebug を使用して、「E」を調べます。mail または電話」のテキスト box.

この時点で、HTML タグが「input」であり、その ID が「e」であることに注意してください。mail”。 したがって、構文は「css=input#e」になります。mail"。

タグと ID - CSS セレクター

ステップ2) 「css=input#e」と入力しますmail”をターゲットに入れる box Selenium IDE の [検索] ボタンをクリックします。 Selenium IDE はその要素を強調表示できるはずです。

タグと ID - CSS セレクター

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

HTML タグとクラス名を使用する Selenium の CSS セレクターは、タグと ID を使用するのと似ていますが、この場合はハッシュ記号の代わりにドット (.) が使用されます。

構文

css=tag.class

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

ステップ1) デモページに行く http://demo.guru99.com/test/facebook.html Firebug を使用して「E」を検査します。mail または電話」のテキスト box。 HTML タグが「input」、クラスが「inputtext」であることに注意してください。

タグとクラス - CSS セレクター

ステップ2) Selenium IDE で、ターゲットに「css=input.inputtext」と入力します。 box をクリックして「検索」をクリックします。 Selenium IDE は E を認識できるはずですmail または電話のテキスト box.

タグとクラス - CSS セレクター

複数の要素が同じ HTML タグと名前を持つ場合、ソース コードの最初の要素のみが認識されることに注意してください。。 Firebug を使用してパスワード テキストを検査する box Facebook で E と同じ名前であることに注目してください。mail または電話のテキスト box.

タグとクラス - CSS セレクター

Eだけの理由mail または電話のテキスト box 前の図で強調表示されたのは、Facebook のページ ソースの最初にあることです。

タグとクラス - CSS セレクター

タグと属性 – CSS セレクター

この戦略では、HTML タグと、アクセスする要素の特定の属性を使用します。

構文

css=tag[attribute=value]

  • tag = アクセスされる要素の HTML タグ
  • [ と ] = 特定の属性とそれに対応する値が配置される角括弧
  • 属性 = 使用される属性。 名前や ID など、要素に固有の属性を使用することをお勧めします。
  • value = 選択した属性の対応する値。

ステップ1) Mercury Tours の登録ページに移動します http://demo.guru99.com/test/newtours/register.php 「姓」のテキストを調べます box。 HTML タグ (この場合は「input」) とその名前 (「lastName」) をメモします。

タグと属性 - CSS セレクター

ステップ2) Selenium IDE で、ターゲットに「css=input[name=lastName]」と入力します。 box をクリックして「検索」をクリックします。 Selenium IDE は姓にアクセスできる必要があります。 box 成功しました。

タグと属性 - CSS セレクター

複数の要素が同じ HTML タグと属性を持つ場合、最初の要素のみが認識されます。。 この動作は、同じタグとクラスを持つ CSS セレクターを使用して要素を検索することに似ています。

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

構文

css=tag.class[attribute=value]

  • tag = アクセスされる要素の HTML タグ
  • 。 = ドット記号。 クラスで CSS セレクターを使用する場合、これは常に存在する必要があります。
  • class = アクセスされる要素のクラス
  • [ と ] = 特定の属性とそれに対応する値が配置される角括弧
  • 属性 = 使用される属性。 名前や ID など、要素に固有の属性を使用することをお勧めします。
  • value = 選択した属性の対応する値。

ステップ1) デモページに行く http://demo.guru99.com/test/facebook.html Firebug を使用して 'Email または「電話」と「パスワード」の入力 boxエス。 HTML タグ、クラス、属性に注目してください。 この例では、「tabindex」属性を選択します。

タグ、クラス、属性 - CSS セレクター

ステップ2) 「E」にアクセスしますmail または電話のテキスト box 初め。 したがって、tabindex 値 1 を使用します。Selenium IDE のターゲットに「css=input.inputtext[tabindex=1]」と入力します。 box をクリックして「検索」をクリックします。 「E」mail または「電話」入力 box 強調表示する必要があります。

タグ、クラス、属性 - CSS セレクター

ステップ3) パスワード入力にアクセスするには box、tabindex 属性の値を置き換えるだけです。 ターゲットに「css=input.inputtext[tabindex=2]」と入力します box そして「検索」ボタンをクリックします。 Selenium IDE はパスワードのテキストを識別できる必要があります box 成功しました。

タグ、クラス、属性 - CSS セレクター

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

お気づきかと思いますが、HTML ラベルには id、name、または class 属性が与えられることはほとんどありません。 では、どうやってそれらにアクセスするのでしょうか? 答えは、彼らの内部テキストを使用することによって得られます。 内部テキストは、HTML ラベルがページ上に表示する実際の文字列パターンです。

構文

css=tag:contains("inner text")

  • tag = アクセスされる要素の HTML タグ
  • 内部テキスト = 要素の内部テキスト

ステップ1) マーキュリーツアーズのホームページに移動します http://demo.guru99.com/test/newtours/ Firebug を使用して「パスワード」ラベルを調査します。 その HTML タグ (この場合は「font」) に注目し、class、id、または name 属性がないことに注目してください。

内部テキスト - CSS セレクター

ステップ2) css=font:contains(“パスワード:”) Selenium IDE のターゲットに box をクリックして「検索」をクリックします。 Selenium IDE は、以下の図に示すように、パスワード ラベルにアクセスできる必要があります。

内部テキスト - CSS セレクター

ステップ3) 今回は、内側のテキストを「Boston」に置き換え、ターゲットが「css=font:contains(“Boston”)」になるようにします。 「検索」をクリックします。 「ボストンからサンフランシスコへ」cisco」ラベルが強調表示されます。これは、内部テキストの最初の単語を指定しただけであっても、Selenium IDE が長いラベルにアクセスできることを示しています。

内部テキスト - CSS セレクター

まとめ

CSS セレクターの使用法による検索の構文

方法 ターゲット構文
タグとID css=タグ#id css=入力#email
タグとクラス css=タグ.クラス css=入力.入力テキスト
タグと属性 css=タグ[属性=値] css=input[名前=姓]
タグ、クラス、および属性 css=タグ.クラス属性=値] css=input.inputtext[tabindex=1]