Extracting content in :after using XPath

Question

I am trying to get the value of a CSS attribute "content" with:

WebElement plusOrMinusSign = currentEntityTypeLevel1.findElement(
    By.xpath("i[@class='tree-branch-head']::after"));
System.out.println(plusOrMinusSign.getCssValue("content"));

However, I get an error: The string 'i[@class='tree-branch-head']::after' is not a valid XPath expression.

It seem the "::after" is not recognised.

Html:

<i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)">::after
</i>

Css:

i:after {
    content: "-";
}

Any idea how to get the value of "content"?

Answer 1

You are using By.xpath but i[@class='tree-branch-head']::after is not a valid XPath, it is a mixture of XPath notation (i[@class='tree-branch-head']) and CSS (:after).

You should use By.cssSelector and a valid CSS selector, for example i.tree-branch-head:after. This would work if Selenium accepted pseudo elements, which it does not.

To work around this problem, you can either use Chromium, that generates extra fake elements ::after and ::before, or use a Javascript extractor as described in https://stackoverflow.com/a/28265738/449288.

Answer 2

Handle pseudo element in selenium webdriver

 String script = "return window.getComputedStyle(document.querySelector('Enter root class name here '),':after').getPropertyValue('content')";
            Thread.sleep(3000);
            JavascriptExecutor js = (JavascriptExecutor) driver;
            String content = (String) js.executeScript(script);
            System.out.println(content);

Now use this content string in your assert command or anywhere you want to use , hope this will work for you... Good luck