如何检查网页元素是否包含伪元素。爪哇答案

【问题标题】：How to check if web element contains pseudo element. Java如何检查网页元素是否包含伪元素。爪哇
【发布时间】：2021-08-29 18:12:40
【问题描述】：

在我的 Java Selenium 自动化项目中，我必须了解一些 Web 元素是否包含伪元素。
我已经看到this 的问题，而那里的答案根本不起作用。
This 看起来更好，但是在我的情况下，我已经有一个 web 元素，我需要在 JavaScript 收到的答案中获取它的内容定位器。
我绝对不熟悉 JavaScript，这就是我问的原因：
因此，给定一个 Selenium WebElement 元素。我怎么知道这个元素是否包含伪元素？
在 screenshot 上有一个带有红点的元素 - ::after 伪元素，而其他元素没有这样的红点。
这是我从开发工具中得到的作为包含after 伪元素的元素的outerHTML。我什至看不到它，它与其他不包含伪元素的元素相似。

<div workspaceid="49426bdc-59fe-44ec-82ea-8f567407c04f" data-test-id="9B1qjz0kWcfO" class="list-item ListItem__ListItemComponent-bsdtqz-0 dgogUS RoleItem-sc-1n184cw-0 jyfJwu role-item"><p class="text-component Texts__GenericText-sc-1dju4ks-0 czkGYX name p">9B1qjz0kWcfO </p></div>

【问题讨论】：

只检查伪元素::before 和::after 就足够了吗？或者您是否需要它来处理伪元素中的任何文本？
另外，您能否粘贴一些示例 HTML，比如您的屏幕截图中的内容，和/或包含伪元素的元素的 outerHTML 以供我测试？
我只想检查某个特定元素是否包含::after。
为什么不能直接抓取outerHTML并检查它是否包含::after？为什么需要 JavaScript？
哦，这很有趣...我会思考并对此进行实验，这是一个有趣的问题

标签： javascript java selenium pseudo-element

【解决方案1】：

您可以使用WebElement 作为参数，而不是JavascriptExecutor 中的定位符。使用getComputedStyle，您可以获得pseudo-element 的所有css 属性。在devtools中查看CSS，找到红点css属性即可查看。

JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

// JavaScript to get any css property include pseudo-element. 
// Arguments is an array of parameters passed to the executeScript method (standart Selenium functionality)
String js = "return window.getComputedStyle(arguments[0], arguments[1]).getPropertyValue(arguments[2]);";

// Use WebElement instead of locator. 
// Property "content" is an example of property, you should check css and get the red dot
String cssProperty = (String) jsExecutor.executeScript(js, element, ":after", "content");

// Check for the red dot css property

【讨论】：