メニュー

SeleniumスクリプトのWeb要素を識別するためのCSSセレクターの使用方法– Seleniumチュートリアル＃6

  • メイン
  • 自動化テスト
  • SeleniumスクリプトのWeb要素を識別するためのCSSセレクターの使用方法– Seleniumチュートリアル＃6

how use css selector

問題を排除するために楽器を試してください

私たちの中で 前のSeleniumチュートリアル 、さまざまなタイプのロケーターを学びました。また、ID、ClassName、Name、Link Text、およびXPathロケーターを使用してWebページ上のWeb要素を識別する方法も学習しました。

続いて、今日は学びます CSSセレクターをロケーターとして使用する方法 。これは私たちの6番目のチュートリアルです 無料のSeleniumトレーニングシリーズ 。

CSSセレクターをロケーターとして使用する：

CSS Selectorは、要素セレクターとWebページ内のWeb要素を識別するセレクター値の組み合わせです。要素セレクターとセレクター値の複合は、セレクターパターンとして知られています。

CSSセレクターSeleniumロケーター

セレクターパターンは、HTMLタグ、属性、およびそれらの値を使用して構築されます。 CSSセレクターとXpathを作成する手順の背後にある中心的なテーマは、構築プロトコルの唯一の違いの根底にある非常によく似ています。

Xpathと同様に、CSSセレクターもID、クラス、または名前のないWeb要素を見つけることができます。

新入生向けのJavaインタビュープログラムpdf

では、準備を進めて、CSSセレクターのプリミティブ型について説明しましょう。

CSSセレクターをロケーターとして使用する

学習内容：

CSSセレクター：ID

このサンプルでは、​​Gmail.comのログインフォームにある(メール)テキストボックスにアクセスします。

電子メールテキストボックスには、値が「電子メール」として定義されているID属性があります。したがって、ID属性とその値を使用して、電子メールテキストボックスにアクセスするためのCSSセレクターを作成できます。

Web要素のCSSセレクターの作成

ステップ1 ：Web要素（この場合は「Email」テキストボックス）を見つけて調べ、HTMLタグが「input」でID属性の値が「Email」であり、両方がまとめて「EmailTextbox」を参照していることを確認します。したがって、上記のデータはCSSセレクターの作成に使用されます。

ロケーターとしてのCSSセレクターの使用2

ロケーター値を確認します

ステップ1 ：「css = input＃Email」と入力します。つまり、Selenium IDEのターゲットボックスにロケーター値を入力し、(検索)ボタンをクリックします。 (電子メールテキスト)ボックスが強調表示されることに注意してください。

ロケーターとしてのCSSセレクターの使用3

構文

css =

  • HTMLタグ –アクセスするWeb要素を示すために使用されるタグです。
  • ＃ –ハッシュ記号は、ID属性を表すために使用されます。 ID属性を使用してCSSセレクターを作成する場合は、ハッシュ記号を使用する必要があります。
  • ID属性の値 –アクセスされているID属性の値です。
  • IDの値の前には、常にハッシュ記号が付いています。

注意： 他のタイプのCSSセレクターにも適用可能

  • SeleniumIDEのターゲットテキストボックスでCSSSelectorを指定するときは、常に接頭辞「css =」を付けることを忘れないでください。
  • 上記のアーティファクトの順序は変更できません。
  • 2つ以上のWeb要素が同じHTMLタグと属性値を持っている場合、ページソースでマークされた最初の要素が識別されます。

CSSセレクター：クラス

このサンプルでは、​​gmail.comのログインフォームの下にある(ログインしたままにする)チェックボックスにアクセスします。

「サインインしたまま」チェックボックスには、値が「記憶」として定義されているクラス属性があります。したがって、Class属性とその値を使用して、指定されたWeb要素にアクセスするためのCSSセレクターを作成できます。

クラスをCSSセレクターとして使用して要素を見つけることは、IDを使用することと非常によく似ていますが、唯一の違いは構文の形成にあります。

Web要素のCSSセレクターの作成

ステップ1 ：Web要素（この場合は「サインインしたまま」チェックボックス）を見つけて検査し、HTMLタグが「ラベル」でID属性の値が「記憶」であり、両方がまとめて「サインインしたまま」を参照していることを確認します。チェックボックス内」。

ロケーター値を確認します

ステップ1 ：「css = label.remember」と入力します。つまり、Selenium IDEのターゲットボックスにロケーター値を入力し、(検索)ボタンをクリックします。 「サインインしたままにする」チェックボックスが強調表示されることに注意してください。

ロケーターとしてのCSSセレクターの使用4

構文

css =

  • 。 –ドット記号は、クラス属性を表すために使用されます。クラス属性を使用してCSSセレクターを作成する場合は、ドット記号を使用する必要があります。
  • Classの値の前には、常にドット記号が付いています。

CSSセレクター：属性

このサンプルでは、​​gmail.comのログインフォームの下にある(サインイン)ボタンにアクセスします。

「サインイン」ボタンには、値が「送信」として定義されているタイプ属性があります。したがって、type属性とその値を使用して、指定されたWeb要素にアクセスするためのCSSセレクターを作成できます。

Web要素のCSSセレクターの作成

ステップ1 ：Web要素（この場合は「サインイン」ボタン）を見つけて検査し、HTMLタグが「入力」、属性がタイプ、タイプ属性の値が「送信」であり、それらすべてが一緒に参照していることに注意してください。 「サインイン」ボタン。

ロケーター値を確認します

ステップ1 ：「css = input (type = ’submit’)」と入力します。つまり、Selenium IDEのターゲットボックスにロケーター値を入力し、(検索)ボタンをクリックします。 「サインイン」ボタンが強調表示されることに注意してください。

ロケーターとしてのCSSセレクターの使用5

構文

css =

  • 属性 –これはCSSセレクターの作成に使用する属性です。値、タイプ、名前などを指定できます。値がWeb要素を一意に識別する属性を選択することをお勧めします。
  • 属性の値 –アクセスされている属性の値です。

CSSセレクター：ID /クラスと属性

このサンプルでは、​​gmail.comのログインフォームにある(パスワード)テキストボックスにアクセスします。

「パスワード」テキストボックスには、値が「Passwd」として定義されているID属性、値が「パスワード」として定義されているタイプ属性があります。したがって、ID属性、タイプ属性、およびそれらの値を使用して、指定されたWeb要素にアクセスするためのCSSセレクターを作成できます。

swfファイルをどのように再生しますか

Web要素のCSSセレクターの作成

ステップ1 ：Web要素（この場合は「パスワード」テキストボックス）を見つけて調べ、HTMLタグが「入力」、属性がIDとタイプ、対応する値が「Passwd」と「password」であり、それらすべてが一緒になっていることを確認します。 「パスワード」テキストボックスを参照してください。

ロケーター値を確認します

ステップ1 ：「css = input＃Passwd (name = ’Passwd’)」と入力します。つまり、Selenium IDEのターゲットボックスにロケーター値を入力し、(検索)ボタンをクリックします。 「パスワード」テキストボックスが強調表示されることに注意してください。

ロケーターとしてのCSSセレクターの使用5

構文

css =

2つ以上の属性を構文で指定することもできます。例えば、 「css = input＃Passwd (type = ’password’) (name = ’Passwd’)」。

CSSセレクター：サブストリング

SeleniumのCSSを使用すると、部分的な文字列を照合できるため、部分文字列を使用してCSSセレクターを作成するための非常に興味深い機能を引き出すことができます。部分文字列の照合に使用されるメカニズムに基づいてCSSセレクターを作成する方法は3つあります。

メカニズムの種類

その下にあるすべてのメカニズムには象徴的な意味があります。

  • プレフィックスを一致させる
  • 接尾辞を一致させる
  • 部分文字列に一致する

それらについて詳しく説明しましょう。

プレフィックスを一致させる

一致するプレフィックスを使用して文字列に対応するために使用されます。

構文

css =

  • ^ –プレフィックスを使用して文字列と一致する記号表記。
  • プレフィックス –これは、一致操作が実行される基準となる文字列です。可能性のある文字列は、指定された文字列で始まると予想されます。

例えば：「パスワードテキストボックス」について考えてみましょう。対応するCSSセレクターは次のようになります。

css = input＃Passwd (name ^ = ’Pass’)

接尾辞を一致させる

一致するサフィックスを使用して文字列に対応するために使用されます。

構文

css =

  • ＃ –接尾辞を使用して文字列と一致する記号表記。
  • 接尾辞 –これは、一致操作が実行される基準となる文字列です。可能性のある文字列は、指定された文字列で終わることが期待されます。

例えば、「パスワードテキストボックス」についてもう一度考えてみましょう。対応するCSSセレクターは次のようになります。

css = input＃Passwd (name $ = ’wd’)

部分文字列に一致する

これは、一致する部分文字列を使用して文字列に対応するために使用されます。

構文

css =

  • * –部分文字列を使用して文字列と一致する記号表記。
  • 部分文字列 –これは、一致操作が実行される基準となる文字列です。可能性のある文字列は、指定された文字列パターンを持つことが期待されます。

例えば、「パスワードテキストボックス」についてもう一度考えてみましょう。対応するCSSセレクターは次のようになります。

css = input＃Passwd (name $ = ’wd’)

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

内部テキストは、HTMLタグがWebページに表示される文字列パターンを使用してCSSセレクターを識別および作成するのに役立ちます。

「助けが必要ですか？」と考えてください。 gmail.comのログインフォームの下にあるハイパーリンク。

ハイパーリンクを表すアンカータグには、テキストが含まれています。したがって、このテキストを使用して、指定されたWeb要素にアクセスするためのCSSセレクターを作成できます。

構文：

css =

  • ： –ドット記号はcontainsメソッドを表すために使用されます
  • 含む–アクセスされているClass属性の値です。
  • テキスト–場所に関係なくWebページの任意の場所に表示されるテキスト。

これは、構文が単純化されているため、Web要素を見つけるために最も頻繁に使用される戦略の1つです。

CSS SelectorとXpathの作成には多くの労力と練習が必要であるため、このプロセスはより洗練された訓練を受けたユーザーによってのみ実行されます。

次のチュートリアル＃7 ：次のチュートリアルに進むと、検索戦略の拡張機能を紹介する機会があります。したがって、次のチュートリアルでは、 GoogleChromeとInternetExplorerでWeb要素を見つけるメカニズム。

新入生のためのqa面接の質問と回答

Seleniumスクリプト作成の重要な部分であるため、Seleniumロケーターについて詳しく説明します。

以下に質問/コメントをお知らせください。

推奨読書

^