xpath在没有任何内容的div元素中找到伪元素:: after

Question

我正在尝试编写xpath来查找是否选中一个复选框，此复选框正在使用css :: after元素进行更改。以下是我拥有的两个元素

//div[@class='FormBlock-formItem2' and .//text()='Scoped In']//div[@class='FormBlock-controlIndicator']

我需要找到未选择“作用域外”和“作用域内”的情况。我看到的唯一区别是复选框第二部分中的':: after'。 我尝试了xpath：“ // div [@ class ='FormBlock-formItem2'和.//text()='作用域为'] // div [@ class ='FormBlock-controlIndicator'] ”，但这是在查找“范围内”元素，但我无法验证其是否选中。挣扎了几天。请帮助。

Answer 1

检查下面的代码是否返回正确的真/假：

driver.findElement(By.xpath("//label[./div[@class='FormBlock-itemText' and .='Scope In']]/input")).isSelected();

Answer 2

不幸的是，使用XPath是不可能的。正如Tomalak所提到的，伪元素在DOM树中不存在（因此命名），因此无法使用XPath选择它们，Selenium也不会公开它们。通常，::before和::after伪元素用于包含元素的样式。

如果要检查是否存在::before或::after伪元素或其内容是什么，可以使用CSS选择器，如下所示：

console.log(window.window.getComputedStyle(
	document.querySelector('#item'), ':begin'
));
//or
window.getComputedStyle(
	document.querySelector('#item'), ':after'
).getPropertyValue('color');

#item::after {
    content: 'checked';
    color: rgb(255, 0, 0);
}

<div id="item">
</div>

然后使用JavascriptExecutor将JS注入浏览器并get the return value：

JavascriptExecutor js = (JavascriptExecutor) driver;         
js.executeScript("return document.title");

Answer 3

您可以尝试使用UI状态伪类，通过它们我们可以找到各种状态的元素，例如何时启用，禁用和检查控件。

带有输入示例的伪类是-

1. input：enabled-这将查找为用户输入启用的所有元素。
2. input：disabled-这将查找所有被用户输入禁用的元素。

3. 输入：已选中-这将查找所有已选中的元素（复选框）。

   WebElement checkBoxStatus = driver.findElement（By.cssSelector（“ input：checked”））;

更多详细信息，请参见w3c site

Answer 4

请检查以下屏幕截图。我尝试使用CSS选择器并检查与等待驱动程序时间一起位于的元素的可见性。有效。

Html code with after:: pseudo code

python code with css selector and wait time that worked out