Automation Testing

UFT How to Get a WebElements CSS Style Attributes

By Test Guild
  • Share:
Join the Guild for FREE
UFT UPdate

If you're a long-time user of QuickTest Professional you've probably always wished there was an easy way to grab a web page field's CSS style attributes. Until recently, the only way to get this functionality was to create your own custom (and sometime unreliable) solution to do this.

I've recently noticed, however, that HP has made it much easier to get these attributes, starting with UFT version 11.52 and higher.

What is a Style Attribute?

If you're not already aware, a style attribute is a way to a add style information like color, line height, etc. to a specific element in a web page. For example:

  • Open IE and navigate to
  • Hit F12 to open up the IE developer tools option.
  • In the developer tool, select the Style option in the right pane.
  • In the developer tools, select the arrow icon and click on the Select your tool & version dropdown.
  • Notice all the different CSS styles listed for the tools select field.

  • Also notice the value for the SELECT width: 280px

You can now easily capture this CSS style information using the UFT's GetROProperty method.

UFT GetROProperty

The GetROProperty has been around since the dawn of QTP. This method has always been helpful because it allows your tests to return at runtime the current value of your application's objects. Now, new functionality has been added to the GetROProperty method that allows you to directly access your application under the tests field's style attributes. Let's take a look at this new functionality in action.

Using UFT's GetROProperty to get some CSS style information

Let's use UFT's GetRoProperty to capture my sample application's tools select field's width.

  • Manually navigate to
  • In UFT, click on Record>Record and Run Settings
  • Under the Web tab, be sure you have Record and run tests on any open browser selected.

  • Click OK.
  • Click Record.
  • Click on the Select your tool & version dropdown and select QTP11.
  • Stop the recording.
  • You should now have this line of code:
Browser("Joe's HP Support Matrix").Page("Joe's HP Support Matrix").WebList("tools").Select "QTP11"
  • Delete the .Select “QTP11”
  • At the end of WebList(“tools”) add .
  • At the beginning of the Browser code add w =
  • On the next line, enter msgbox w
  • You code should now look like this:
w =Browser("Joe's HP Support Matrix").Page("Joe's HP Support Matrix").WebList("tools").GetROProperty("style/width")

msgbox w

  • Run the test.
  • The message box should contain the value 280px

So, to capture any CSS style info you would use the style/style property syntax. For instance, if you also want to capture line-height or font-family CSS styles, the syntax would be:


GetROProperty(“style/font-family “)

Cool! That's a quick demo on how to use the GetRoProperty to capture CSS Style information.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. In my case, your way didn’t work.
    I found it worked for me this way instead:

    to get a particular style you mentioned like width, line-height, font-family:

  2. I am trying to capture the object for web application in chrome browser.
    using object spy i am not able to getting web elements and always getting windows application controls. also i tried to add uft adding into chrome browser but no luck. can help me here.
    uft version : 14(trail version)
    browser : chrome

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Continuous Testing in DevOps Bootcamp (2024 Guide)

Posted on 05/23/2024

One issue I often hear about on my podcast is the fact that ...

Mastering AI in Test Automation: Expert Tips!

Posted on 05/14/2024

Over the last couple of years, many of my podcast guests who work ...

What is Synthetic Monitoring? (2024 Guide)

Posted on 04/18/2024

I've found over the years many testers are unsure about what is synthetic ...