Selenium WebDriver get text from CSS property "content" on a ::before pseudo element

I am trying to verify the text "The information provided is either invalid or incomplete." is displayed 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's 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 can't seem to find a way to verify the text "The information provided is either invalid or incomplete." is displayed. Calling getText() on the web element also does not return the expected string, but will display any other normal text within that div. Any ideas?

Solution 1:

I am not 100% sure if WebDriver can retrieve pseudo element content for you. I think you would need to use Javascript. Below works, 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);

This should print

The information provided is either invalid or incomplete.

Solution 2:

Tried the same, works for me.

Created sample html file :

<!DOCTYPE html>
<html>
<head>
<style>
 p::after { 
  content: " - Remember this";
}
</style>
</head>
<body>

<p id='b'>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

Reused Nilesh's code

    String script  = "return window.getComputedStyle(document.querySelector('p#b'), ':after').getPropertyValue('content')";
    JavascriptExecutor js = (JavascriptExecutor) UIKeyWords.getUIDriver();
    String contentValue = (String) js.executeScript(script);
    System.out.println(contentValue);

Selenium WebDriver get text from CSS property "content" on a ::before pseudo element

Solution 1:

Solution 2:

Related

Recent Posts