TESTEVERYTHING

Sunday, 5 February 2017

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


3 comments:

jhansi joe said...

I went through your blog, it’s totally awesome. Being most popular automation testing tool, selenium is used in automation software testing process. Selenium Course in Chennai | Best Selenium training institute in Chennai

Amirtha rao said...

Nice information. Thank you for sharing such post...
Selenium Training

Amirtha rao said...

Nice information. Thank you for sharing such post..
Selenium Training

Post a Comment

Which one is right ?

Translate







Tweet