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"?

@Nikhil, I am not familiar with using javascript inside a selenium project. Could you give me a pointer/example? — Rico Strydom, Nov 30 '16 at 10:30
Possible duplicate of [Selenium WebDriver get text from CSS property "content" on a ::before pseudo element](http://stackoverflow.com/questions/28244911/selenium-webdriver-get-text-from-css-property-content-on-a-before-pseudo-ele) — Andersson, Nov 30 '16 at 10:31

score 11 · Accepted Answer · edited May 23 '17 at 12:30

11

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.

edited May 23 '17 at 12:30

Community

1
1

answered Nov 30 '16 at 11:23

gioele

9,748
5
55
80

1

Thanks Gieole, your `i.tree-branch-head:after` helped me on the right track. This is the string value for retreiving the value of 'content'. `String script = "return window.getComputedStyle(document.querySelector('i.tree-branch-head'),':after').getPropertyValue('content');";` – Rico Strydom Nov 30 '16 at 12:59

score 1 · Answer 2 · edited Jul 16 '19 at 13:38

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

Extracting content in :after using XPath

2 Answers2

Linked