css - 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.