WebDriver选择具有:: before的元素

Question

我有两个具有相同属性的元素，但在页面上一次显示一个（当显示一个时，另一个消失）。两者之间的唯一区别是显示的元素将具有＆＃ 39; ::之前＆＃39;选择。是否可以使用xpath或css选择器根据其id检索元素，以及是否具有:: before

Answer 1

我打赌也尝试使用上面的JavaScript解决方案。

自:: after＆amp; :: before是一个伪元素，允许您从CSS将内容插入页面（不需要在HTML中）。虽然最终结果实际上并不在DOM中，但它在页面上看起来好像是 - 你看到它却无法用xpath真正找到它（例如https://css-tricks.com/almanac/selectors/a/after-and-before/）。

我还可以建议如果可能有不同的ID，或者如果它们在DOM中的不同位置使用上/下元素生成更复杂的xpath并查看它是否显示。

Answer 2

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);

Answer 3

Pseudo Elements

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实体。请参阅glyphs页。
• 图片：内容：url（/path/to/image.jpg）; -图像将按其确切尺寸插入，无法调整大小。由于类似gradients之类的东西实际上是图像，因此伪元素可以是渐变。
• 无内容：content：“”; -用于clearfix和将图像作为背景图像插入（设置宽度和高度，甚至可以调整为背景尺寸）。
• 计数器：content: counter(li);-对于styling lists确实有用，直到：marker出现为止。

注意：您不能插入HTML（至少将以HTML形式呈现）。

content: "<h1>nope</h1>";