在QTP中申明CSS Selectors
Example 1: John Smith
John Smith is within the H4 tag. Its TEXT value is used to implement Object Indentification in this example. Below is the target HTML used:
<body>
<h4>John Smith <input type=checkbox name="select" /></h4>
CSS:
1. h4[innertext~='John']
Note: This Selector works in IE, not Firefox.
2. h4:first-of-type
3. h4[innertext*='John']
h4[innertext*='ohn S']
h4[innertext*='John S']
4. h4[innertext$='Smith']
Example 2: Table with attribute ID='table2'
The target HTML for the table in question is shown below:
<body>
<h4>John Smith <input type=checkbox name="select" /></h4>
<table id='table1'>
<!--other nodes-->
<h4>Anne Anderson <input type="checkbox" name="select" checked=true /></h4>
<table id='table2'>
CSS:
1. table+h4+table
2. table#table2
3. table:last-of-type
4. table:nth-of-type(2)
Note: When working with CSS Selectors, the first item will start at 1, not 0.
Example 3: Button 2 of Table 1
In the previous two examples, we have seen how to indentify a heading and a table node. In this example, let's see how to indentify the below INPUT node.
<td><input type='button' value='Button 2' class='btn_blue'></td>
CSS:
1. input[value='Button 2']
2. td > input[value='Button 2']
3. input[value='Button 2'][class='btn_blue']
Example 4: Indentify the Checkbox in 'checked' state
The checkbox in question is beside the Anne Anderson H4 tag. The target HTML to consider is the following:
<h4>Anne Anderson <input type="checkbox" name="select" checked=true /></h4>
CSS:
1. h4>input:checked
2. input:checked
Example 5: Indentify the Checkbox in 'unchecked' state
In the previous example, we saw how to indentify the checkbox in its checked state. Even though we are working with a checkbox, there are different ways of indentifying the target using CSS. Below is the HTML for the checkbox:
<h4>John Smith <input type=checkbox name="select" /></h4>
CSS:
1. h4:first-child>input
2. h4:first-child:nth-child(1)
nth-child(n) Pseudo-Class
For the next example, let's examine the list shown below:
<title>CSS Chapter</title>
<!-- HTML -->
<ol id="namelist" name="names">
<li>John</li>
<li>Anne</li>
<li>Mary</li>
<li>Will</li>
<li>Joseph</li>
</ol>
CSS Selectors can also be used to separate each list item using the nth-child(x) pseudo-class. To first select the target list, its ID property can be used as shown below:
Browser("CSS Chapter").WebElement("css:=#namelist").Highlight
Browser("CSS Chapter").WebElement("css:=ol#namelist").Highlight
To find the items of the list, nth-child(x) can be used:
'First item in the list
Browser("CSS Chapter").WebElement("css:=#namelist :nth-child(1)").Highlight
Note: When working with CSS Selector, unlike zero-based VBScript, the first item will start at 1, not 0.
For the second to the fifth items in the list, the following index may be used for the pseudo-class:
css:=#namelist :nth-child(2)
css:=#namelist :nth-child(3)
css:=#namelist :nth-child(4)
css:=#namelist :nth-child(5)
