このトピックは、教師が実施したウェビナーで既に明らかにしましたが、少しテキストを追加することにしました（そして、多くの場合、より便利です）。 一般的に、トピック「CSSセレクター」に関する記事を提示します。これは、 Pavel Popovがコース「テストの自動化」の一環として作成したものです。
行こう
自動化の初心者向けの各コースまたは記事は、XPathなどのWebページ要素を見つけるための便利で汎用性の高いツールに関するものです。 このタイプの要素ロケーターは、XMLファイルの要素を示すために1999年に作成されました。 XPathは組み込み関数を使用して、Webページ上の要素を見つけるための非常に人気のあるツールになりました。 アプリケーションのHTMLコードが次のような場合：
… <form class=“form_upload> <div> <div class=“row_element_3 row tile_fixed”> <div class=“button_cell wrapper_tile”> <button type=“submit” class=“button_submit wrapper_button”> </button> </div> </div> </div> </form> …
「Click Me」ボタンに適切なXPathが見つからない場合は、すぐに開発者の横に助けを求めないでください。 CSSセレクターを使用する絶好の機会があります。次のようになります。
.button_submit
CSSの世界へようこそ。
CSSセレクターでは、すべてがクラスに関連付けられていることが一般に受け入れられています。 これは完全に真実ではありませんが、WebアプリケーションがHTMLコードの「オプティマイザー」または「難読化」を使用し、次のように見える場合：
<form class=“afhfsdh__”> <div> <div class=“hfgeyq fjjs qurlzn”> <div class=“fjdfmzn fjafjd”> <button type=“submit” class=“ajffalf wjf_fjaap”></button> </div> </div> </div> </form> …
（CSSクラスの名前はすべて、オプティマイザーを使用して削減されます）
、短いCSSセレクターを取得することはできません-原則として、新しいビルドのたびに、cssクラスは新しいクラスに変更されます。 ただし、この場合
css: form button[type='submit']
CSSセレクターの方が簡単な場合があり
css: form button[type='submit']
：
css: form button[type='submit']
、
XPath: //form//button[@type='submit']
代わりに
XPath: //form//button[@type='submit']
HTMLオプティマイザーをインストールしておらず、開発者がそれをプロジェクトで使用する予定がないとしましょう（この事実を確認してください！）。
ご想像のとおり、シンボル。 単語クラスの代わりに使用され、この要素のクラスの数に関係なく、任意の要素で特定のクラスの出現を検索します。
参照：
<form class=“form_upload> <div> <div class=“row_element_3 row tile_fixed”> <div class=“button_cell wrapper_tile”> <button type=“submit” class=“button_submit wrapper_button”></button> </div> </div> </div> </form>
button: .button_submit
要素のcss
button: .button_submit
、
button: .button_submit
クラスはオプションですが、クラスを指す必要がある場合は、最初のcssクラスを指定した直後に追加できます：
css: .button_submit.wrapper_button
。 クラスの順序は重要ではないため、クラスを交換できます。
.wrapper_button.button_submit .
HTML要素を見つけるための次の不可欠なツールはタグです。 ボタンタグを指すcssセレクターの記述は非常に簡単です。特に、この文で既に記述されているためです。 ボタンのCSSセレクター-
css: button.
また、目標がタグ付けの場合、他に何も指定する必要はありません。 取得するタグとクラスの組み合わせ：
button.button_submit
また、これは要素に対するCSSセレクターでもあります。
タグに加えて、属性はページ上の要素を一意に識別するのにも役立ちます。 多くの場合、開発者は新しい「識別子」を追加する代わりに追加の属性を作成します。たとえば、追加のアクションが計画されている要素ごとに追加のdata-idまたはauto-id属性を作成できます。 たとえば、開発者はボタンボタンに
data-id
属性を追加できます。 次に、中括弧を介してcssセレクターを使用して属性にアクセスできます：
[data-id='submit']
。 さらに、等号
[data-id]
後の属性値を省略できます。 このようなセレクターは、内部に任意の値を持つ
data-id
属性を持つすべての要素を見つけます。 クラス属性を指定してボタンを検索することもできます：
[class='button_submit']
が、CSSでは、既にご存じのように、怠け者で、
.button_submit
ように書くことができます。 すべてをまとめることも非常に簡単です。
button[type='submit'].button_submit
しかし、ページ上の1つの要素を一意に見つける[data-id]属性を使用するなど、1つの要素のみを示すセレクターを使用して要素を見つけることができれば、これは大成功です。 多くの場合、子孫を見つけるために要素の祖先を使用する必要があります。 また、これはCSSで非常に簡単に行うことができます。
<form class=“form_upload> <div> <div class=“row_element_3 row tile_fixed”> <div class=“button_cell wrapper_tile”> <button type=“submit” class=“button_submit wrapper_button”></button> </div> </div> </div> </form>
css:form > div > div > div > button.button_submit
>
記号を使用すると、内部の祖先からのみ要素を検索できます。 ただし、CSSにはすべての子孫を検索する機能があるため、この記号はスペース
“ “
であるため、すべての要素を記述する必要はありません。 このポインターを使用して、フォーム内の要素をすばやく見つけることができます。
それは：
css: form > div > div > div > button.button_submit
現在：
css: form button,button_submit
前のものから次の「相対」を見つけることも便利です。 別の
span
例を補完しましょう：
<form class=“form_upload> <div> <div class=“row_element_3 row tile_fixed”> <div class=“button_cell wrapper_tile”> <div class=“content”></div> <span data-id=“link”></span> <!-- data-id --> <button type=“submit” class=“button_submit wrapper_button”> <!-- --></button> </div> </div> </div> </form>
[data-id='link'] + button
は、属性
data-id=”link”
持つ1レベル上のいとこを持つ
[data-id='link'] + button
を見つけ
button
。 このポインターは、前の要素にidまたは一意の属性があり、目的の要素の次の要素にそのような識別子がない場合に使用できます。 したがって、+ css文字を使用すると、セレクターは次の兄弟を見つけます。
注：
div + span[data-id='link'] + button
さらに、+ポインターを使用して次の要素から「トレイン」を収集できますが、要素の場所が変更される可能性があるため、これを行うことはお勧めしません。
属性部分の検索オプションをお見逃しなく。 これは単純に行われ
button[class*='submit']
button_submit
button[class*='submit']
-
button_submit
クラスの長い名前から、
button_submit
の正しい部分のみを取得し、= symbol *を記号に追加します。 クラス値から
cell
という単語で見つけることもできます：
div[class*='cell']
。
すべてのリンクまたはファイル拡張子を見つけることができるcssセレクターの別の機能があります。それは
^=
および
$=
ですが、このタスクは属性値の検索ほど頻繁ではありません。
a[href^=“https:”]
-httpsで始まるすべてのリンクを検索し、
a[href$=“.pdf”]
-
a[href$=“.pdf”]
で終わるすべてのリンクを検索します。
先祖から同じタグを持つ子孫を見つける方法について少し。 例から始めましょう。
<div class=“tiles”> <div class=“tile”>…</div> <div class=“tile”>…</div> </div>
div class=“tiles”
2番目の
div class=“tile”
を見つける方法 次の2つのオプションがあります。
div > div:nth-of-type(2) div > div:nth-child(2)
しかし、2つのセレクターの違いは何ですか？ 例の補足：
<div class=“tiles”> <a class=“link”>…</a> <!—1—> <div class=“tile”>…</div><!—2—> <div class=“tile”>…</div><!—3—> </div>
css 1オプション：
div > div:nth-of-type(2)
css 2オプション：
div > div:nth-child(2)
現在、これらのセレクターは2つの異なる要素につながります。 次に進む前に、どのセレクターがどの要素につながるかを推測してみてください。
答え：
最初のセレクターは行番号2を指し、2番目のセレクターは行番号3を指します
nth-child
は、親の子孫である2番目の
div
検索します。 第二
<div>要素で
<div class =“ tiles”>これは3行目です。 次に、
nth-of-type
は親から2番目の要素を探します
<div class =“ tiles”>タグにする必要があります
div、これは行番号2です。
特定の要素を見つける必要がある状況でセレクターを操作しやすくするルールがあります。可能な限り
nth-of-type
使用してください。 上記の例を理解した場合、
nth-child
を使用して祖先の同一要素の数に常に注意を払うことをお勧めします。リンクがどこに配置されるかは重要ではありません
<a>：上、間
<div>または、ブロックの下部では、常に
div:nth-child(2)
セレクター
div:nth-child(2)
は、引き続き目的の要素（ブロック内の2番目のdiv要素
div:nth-child(2)
を指します。
idで要素を見つけるための別の関数は省略されました。 角かっこ
[attribute=“value”]
の表示を使用して属性の検索が実行されることは既に知っています。この場合、このような要素を見つけることができます
[id=“value”]
。 しかし、アイテムIDで検索するより高速な方法がある場合はどうでしょうか？
#value. “#” - , id.
取得したすべてのスキルを使用して、ボタンセレクターを作成してみてください。
<ボタン>
… <div> <div class=“tile_wrapper tile content”> <div class=“row row_content”> <div class=“outline description__on”></div> <div class=“outline description__off button_send hover_mouse”> <button class=“outline button_send”></button> </div> </div> </div> </div>
こちらのコメントにコメントやオプションを表示するか、3月13日に開催される次の公開レッスンでこれについて議論することを嬉しく思います。
よろしくお願いします！