QTP / UFT 'Style/*' Notation (Web-based objects)
You can now use the new “Style/*” notation to access the values of CSS properties for Web-based objects. You can then use these property values to identify such objects by adding the notation to the object's description properties using programmatic descriptions/descriptive Programming.
These below examples are using properties like style/background-color, style/background-position, style/font-family and border-style.
Example: 1 - using the "style/background-color" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below two buttons.
Write the below code in QTP (UFT/QTP 12.0) and run the code:
Example: 2 - using the "style/background-color" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below two buttons.
Write the below code in QTP and run the code:
Example: 3 - using the "style/background-position" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below two images and a text area. You have to make sure that the (Tulips) image is in the same location as the file.
Part a:
Write the below code in QTP and run it:
Browser("name:=QTP-Test").Page("title:=QTP-Test").image("html tag:=img", "style/background-position:= 2px 1px").Click
Above line will click the top image and the value "Top image with border" will be shown in text area.
Part b:
Write the below code in QTP and run it:
Browser("name:=QTP-Test").Page("title:=QTP-Test").image("html tag:=img", "style/background-position:= -91px 1px").Click
Above line will click the bottom image and the value "Bottom image without border" will be shown in text area.
Example: 4 - using the "style/font-family" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below text field and a button.
Write the below code in QTP and run it:
Example: 5 - using the "border-style" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below text field and a button with dotted border.
Write the below code in QTP and run it:
You can now use the new “Style/*” notation to access the values of CSS properties for Web-based objects. You can then use these property values to identify such objects by adding the notation to the object's description properties using programmatic descriptions/descriptive Programming.
These below examples are using properties like style/background-color, style/background-position, style/font-family and border-style.
Example: 1 - using the "style/background-color" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below two buttons.
Write the below code in QTP (UFT/QTP 12.0) and run the code:
Set oDesc = Description.Create()
oDesc("micclass").Value = "Webbutton"
oDesc("style/background-color").Value = "rgb\(0, 255, 0\)"
Set var_buttons = Browser("name:=QTP-Test").Page("title:=QTP-Test").ChildObjects(oDesc)
no_of_buttons = var_buttons.Count
msgbox no_of_buttons
When you run the above code, a message box will open and show the count of green buttons - 2 in our case.Example: 2 - using the "style/background-color" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below two buttons.
Write the below code in QTP and run the code:
Set oDesc = Description.Create()
oDesc("micclass").Value = "Webbutton"
oDesc("style/background-color").Value = "rgb\(0, 255, 0\)"
Set var_buttons = Browser("name:=QTP-Test").Page("title:=QTP-Test").ChildObjects(oDesc)
no_of_buttons = var_buttons.Count
msgbox no_of_buttons
For i = 0 To no_of_buttons-1
If var_buttons(i).GetROProperty("value") = "Green_2" Then
var_buttons(i).click
End If
Next
Similar to above example, it first shows the count of green buttons and then clicks the Green_2 button. As in above example, we are using the "style/background-color" property in above code.Example: 3 - using the "style/background-position" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below two images and a text area. You have to make sure that the (Tulips) image is in the same location as the file.
Part a:
Write the below code in QTP and run it:
Browser("name:=QTP-Test").Page("title:=QTP-Test").image("html tag:=img", "style/background-position:= 2px 1px").Click
Above line will click the top image and the value "Top image with border" will be shown in text area.
Part b:
Write the below code in QTP and run it:
Browser("name:=QTP-Test").Page("title:=QTP-Test").image("html tag:=img", "style/background-position:= -91px 1px").Click
Above line will click the bottom image and the value "Bottom image without border" will be shown in text area.
Example: 4 - using the "style/font-family" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below text field and a button.
Write the below code in QTP and run it:
Set oDesc = Description.Create()
oDesc("micclass").Value = "WebButton"
oDesc("style/font-family").Value = "Times New Roman"
Browser("name:=QTP").Page("title:=QTP").WebButton(oDesc).Click
The above code will click the button and show the alert box with the message Red on it.Example: 5 - using the "border-style" property
Write the below code in a Notepad and save it as an .html file.
On opening the above Notepad with browser (I used IE 10), you will see the below text field and a button with dotted border.
Write the below code in QTP and run it:
Set oDesc = Description.Create()
oDesc("micclass").Value = "WebButton"
oDesc("border-style").Value = "dotted"
Browser("name:=QTP").Page("title:=QTP").WebButton(oDesc).Click
Above code will click on the button and show the alert box with message as Red. Similar to above you can try with other properties like border-width etc. also.