EXTRACT CSS PROPERTY VLAUE OF PSEUDO ELEMENTS CONTAINING :after/:before CSS TAG USING JAVASCRIPT IN WEBDRIVER :

We cannot extract css properties of pseudo elements using web driver commands such as ‘.getPropertyValue’ . For this, we need to use JavaScript and execute a js script in selenium web driver.

A CSS pseudo-element is used to style specified parts of an element.
   For example, it can be used to:
   Style the first letter, or line, of an element
   Insert content before, or after, the content of an element

ISSUE:

In above scenario, we need to get the text “Internal Use Only” from UI which is associated with an Anchor (a) tag in DOM with :after CSS tag. The text is present in “content” Style Property as shown in right highlighted box.

The :after CSS tag cannot be located directly using web driver and thus required text cannot be retrieved simply by using .getPropertyValue() function in selenium.

To achieve this, a javascript needs to be executed in our selenium code :

WebElement elementObj = driver.findElement(By.xpath("<YourXpath>"));

String pseudoElementText = ((JavascriptExecutor)driver).executeScript("return window.getComputedStyle(arguments[0],':after').getPropertyValue(content');", elementObj).toString();

System.out.println(pseudoElementText);

In same way we can extract another properties values as well.

Thanks