xpath to find pseudo-element ::after in side a div element with out any content

Question

I am trying to write xpath to find a checkbox selected or not, this checkbox is being changed using css ::after element. Below are two elements I have

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

I need to find that 'Scoped Out' is not selected and 'Scoped In' is selected. The only difference I see is '::after' in the second section of checkbox. I tried the xpath :" //div[@class='FormBlock-formItem2' and .//text()='Scoped In']//div[@class='FormBlock-controlIndicator'] " but this is finding the 'Scoped In' element but I am not able to verify if its checked or not. Struggling from couple of days. Kindly help.

Answer 1

Unfortunately, that's not possible with XPath. As mentioned by Tomalak, Pseudo-elements don't exist in the DOM tree (hence the name), therefore they cannot be selected with XPath and Selenium does not expose them as well. In general, ::before and ::after pseudo-elements are used for styling of containing element.

If you want to check whether ::before or ::after pseudo-elements are present or what's their content you can use a CSS selector, like this:

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>

And then use a JavascriptExecutor to inject the JS into the browser and get the return value:

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

Answer 2

Check code below if return correct true/false:

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