web-dev-qa-db-ja.com

:: beforeを持つWebDriverselect要素

同じ属性を持つ2つの要素がありますが、ページに一度に1つずつ表示されます（1つが表示されると、もう1つは消えます）。2つの違いは、表示される要素に「:: before」が含まれることだけです。セレクタ。 xpathまたはcssセレクターを使用して、IDと:: beforeがあるかどうかに基づいて要素を取得することは可能ですか？

enter image description here

xpathselenium-webdrivercss-selectorspseudo-element
9
Jeremy Borg

上記のjavascriptソリューションも試してみてください。

:: afterと:: beforeは、CSSからページにコンテンツを挿入できる疑似要素であるため（HTMLに含める必要はありません）。最終結果は実際にはDOMにありませんが、ページにはあるかのように表示されます-表示されますが、たとえばxpathで実際に見つけることはできません（ https://css-tricks.com/アルマナック/セレクター/ a/after-and-before / ）。

また、可能であれば、異なるIDを使用するか、DOMの異なる場所にあるかどうかを提案して、上/下の要素を使用してより複雑なxpathを作成し、それが表示されるかどうかを確認します。

3
Rain9333
String script = "return window.getComputedStyle(document.querySelector('.analyzer_search_inner.tooltipstered'),':after').getPropertyValue('content')";
                        Thread.sleep(3000);
                        JavascriptExecutor js = (JavascriptExecutor) driver;
                        String content = (String) js.executeScript(script);
                        System.out.println(content);
1
Nitin Singh

疑似要素

CSS pseudo-element は、要素の指定された部分のスタイルを設定するために使用されます。次の目的で使用できます。

  • 要素の最初の文字または行のスタイルを設定する
  • 要素のコンテンツの前または後にコンテンツを挿入します

::後

_::after_は、CSSからページにコンテンツを挿入できるようにする疑似要素です（HTMLに含まれている必要はありません）。最終結果は実際にはDOMにありませんが、ページにあるかのように表示され、基本的に次のようになります。

[〜＃〜] css [〜＃〜]：

_div::after {
  content: "hi";
}
_

[〜＃〜] html [〜＃〜]：

_<div>
  <!-- Rest of stuff inside the div -->
  hi
</div>
_

：：前

_::before_はまったく同じですが、HTML内の他のコンテンツの後にではなく前にコンテンツを挿入するだけです。どちらか一方を使用する唯一の理由は次のとおりです。

  • 生成されたコンテンツを要素コンテンツの前に配置する必要があります。
  • _::after_コンテンツもソース順で「後」にあるため、自然に互いに積み重ねられた場合、_::before_の上に配置されます。

コンテンツ

コンテンツの値は、次のいずれかになります。

  • 文字列：_content: "a string";_-特殊文字は、Unicodeエンティティとして特別にエンコードする必要があります。 グリフ ページを参照してください。
  • 画像：コンテンツ：url（/path/to/image.jpg）; -画像は正確なサイズで挿入され、サイズを変更することはできません。 gradients のようなものは実際には画像であるため、疑似要素はグラデーションにすることができます。
  • なし：コンテンツ： ""; -クリアフィックスと背景画像としての画像の挿入に便利です（幅と高さを設定し、background-sizeでサイズを変更することもできます）。
  • カウンター：content: counter(li);スタイリングリスト ：markerが来るまで本当に便利です。

注：HTMLを挿入することはできません（少なくとも、HTMLとしてレンダリングされます）。

_content: "<h1>nope</h1>";
_
0
DebanjanB