How to extract CSS properties of an element: Interview question Selenium

During functional test script creation using selenium , we came across steps like verify the background color , font size or the text color of the element. These are the different CSS properties associated with an element. We can extract the value of CSS properties using the below code:

What we require is to:

• Identify the element 
• Get CSS Attribute on the element
• Store the property in a variable

WebElem = driver.findElement(By.id("testbhd"));

// to get background color
String bgColor = WebElem.getCssValue("background-color");

// to get text color
String bgColor = WebElem.getCssValue("color");

// to get font size
String bgColor = WebElem.getCssValue("font-size");

Running JavaScript in UFT on Page

In UFT,  we can run java script on a page using RunScript method as shown below. This can be very useful to perform operation on a page/element in the page through Java script.

Browser(...).Page(...).runscript("javascript statement")

XPath Object Identification in UFT descriptive programming

UFT also supports XPATH and css together with descriptive programming, object repository and DOM for object Identification.

Xpath stands for Xml Path. Below are some XPath examples to be used with UFT. Xpath and css are most widely used object identification way in selenium also.

Xpath examples:

Id: 

Browser(...).Page(...).weblink("xpath:=//a[@id='linkuft']").click

Attribute Value:

Browser(...).Page(...).weblink("xpath:=//a[@Atttribute='goodclass']").click

text:

Browser(...).Page(...).weblink("xpath:=//a[text()='UFT']").click 

partial attribute value

Browser(...).Page(...).weblink("xpath:=//a[starts-with(@attribute,'goodclass']").click

Browser(...).Page(...).weblink("xpath:=//a[contains(@attribute,'goodclass']").click

Browser(...).Page(...).weblink("xpath:=//a[ends-with(@attribute,'goodclass']").click

To know details on what is CSS and XPath and how to capture CSS or xpath of an element. refer to

XPath and CSS for selenium/UFT

We can use tools like firebug/firepath or IE developer tool to identify the xpath/css of an element.

xpath is really useful when element is not identified diretly based on Object repository properties and used to
identify an element based on relative element existence based on other elements in the tree.