Selenium WebDriver gets the text from the CSS "content" property in the :: element before the pseudo-element

Question

I am trying to check the text "The information provided is invalid or incomplete." rendered using Selenium / WebDriver in Java.

I have the following HTML:

<div id="validationError"> <ul> <li>Required: Server Name</li> <li>Required: Receiving Port</li> </ul> </div> 

with the following CSS code:

 #validationError:before { content: 'The information provided is either invalid or incomplete.'; } 

Here is my current Java code:

 WebElement errorBox = browser.findElement(By.id("validationError")); Assert.assertNotNull("Could not find validation errors", errorBox); System.out.println("Error Explanation: " + error.getCssValue("content") + "\n"); List<WebElement> errorList = errorBox.findElements(By.tagName("li")); for (WebElement error : errorList) { System.out.println("Error: " + error.getText()); } System.out.println("\nError Full Text: " + errorBox.getText()); 

This is my output of the above code:

 Error Explanation: Error: Required: Server Name Error: Required: Receiving Port Error Full Text: Required: Server Name Required: Receiving Port 

I cannot find a way to check the text "Information provided is invalid or incomplete." is displayed. Calling getText() on the web element also does not return the expected string, but displays any other normal text inside this div. Any ideas?

Answer 1

I am not 100% sure if WebDriver can get the contents of pseudo-elements for you. I think you will need to use Javascript. Below I tested.

 String script = "return window.getComputedStyle(document.querySelector('#validationError'),':before').getPropertyValue('content')"; JavascriptExecutor js = (JavascriptExecutor)driver; String content = (String) js.executeScript(script); System.out.println(content); 

It should print

 The information provided is either invalid or incomplete. 

Answer 2

Well .. All that is needed for webdriver is just a valid xpath to find the web element on dom. And there are many ways to fix a valid Xpath.

We can also use type markers

• descendant ::
• child::
• ancestor::

• contains ::

  Example: // div [* / text () = 'Credit Card'] / descendant :: input [@id = 'cardNumber']

You can refer to this site for more information on how to use them in xpath ..