USING XPATH:
Some examples:
//li[@id='partner360__adnpayment']
//input[@id='']/following-sibling::img
//input[@name='orgstatus_active_type']/following-sibling::label[text()='$Value']/preceding-sibling::img
//table[@class = 'x-btn-wrap x-btn op-btn-standard']//following::button[text() ='Apply']
//table[@class='']//folowing::button[text()='Apply']
//a[contains(text()='')]
//label[contains(text()='']
//div[@id='dynamicAcctFormDetails']//input[@name= 'creditStatus']/following-sibling::img
//*[@id='acct-save-id']
"//*[@class='x-btn-menu-arrow-el' and @type ='button']
//a[contains(text(),'Save and Close')]"
//table[@id='user-save-id']/tbody/tr/td[2]/em/button
//div[text()='Users' and contains (@class,'op-listitem')]
//div[text()='xyz' and contains(@class,'something')]
//div[text()='xys' and contains(@class,'something')]
//input[@id='']/following-sibling::img
//div[contains(@class,'auto_payments_summary_grid')]//div[contains(text(),'Sales Order: ') ]
QUICK HELP FOR FINDING LOCATORS IN EXT JS-3
BUTTON //table[@id='adnetwork-partner-active-id']/tbody/tr/td[2]/em/button
BUTTON //button[text()='Submit']
IMG css=div#.x-panel-collapsed .x-accordion-hd .x-tool-toggle ~ span:contains('$TEXT')
SELECTLIST //input[@id = 'operation']/following-sibling::img
TABLECOL //div[@class='x-grid3-cell-inner x-grid3-col-status' and contains(text(), '$TEXT')]
BUTTON //table[@id='opr-button-pushtoadserver']//button[text()='Push to Ad Server']
TEXT //label[text() = 'Targeting Name:']//following::input[@name ='name']
BUTTON //label[text() = 'Targeting Name:']//following::button[text() ='Apply']
BUTTON //label[text() = 'Targeting Name:']//following::button[text() ='Reset']
BUTTON //div[@id='orgDetails']//span[text()='Payment Terms - Standard Cost Deductions' and contains(@class,'x-panel-header-text')]
TABLECOL //div[@id='invoiceperiods']//div[@class='x-grid3-body']//div[@class='x-grid3-body']/div[$iRow]/table/tbody/tr/td[8]
USING CSS ADVANCED:
(BELOW CONTENT IS TAKEN FROM SAUCE_LABS)
Let’s write a css selector that will choose the input field after
“username”. This will select the “alias” input, or will select a
different element if the form is reordered.
We can easily select the username element without adding a class or an id to the element.
We can even chain filters to be more specific with our selections.
Here Selenium will act on the input field with name=”continue” and type=”button”
If we want to select the fourth li element (Goat) in this list, we
can use the nth-of-type, which will find the fourth li in the list.
On the other hand, if we want to get the fourth element only if it is
a li element, we can use a filtered nth-child which will select (Car)
in this case.
Note, if you don’t specify a child type for nth-child it will allow
you to select the fourth child without regard to type. This may be
useful in testing css layout in selenium.
A link with an “id” that starts with the text “id_prefix_”
A link with an “id” that ends with the text “_id_sufix”
A link with an “id” that contains the text “id_pattern”
This will find the log out button on your page no matter where it’s
located. This is by far my favorite CSS selector and I find it greatly
simplifies a lot of my test code.
Some examples:
//li[@id='partner360__adnpayment']
//input[@id='']/following-sibling::img
//input[@name='orgstatus_active_type']/following-sibling::label[text()='$Value']/preceding-sibling::img
//table[@class = 'x-btn-wrap x-btn op-btn-standard']//following::button[text() ='Apply']
//table[@class='']//folowing::button[text()='Apply']
//a[contains(text()='')]
//label[contains(text()='']
//div[@id='dynamicAcctFormDetails']//input[@name= 'creditStatus']/following-sibling::img
//*[@id='acct-save-id']
"//*[@class='x-btn-menu-arrow-el' and @type ='button']
//a[contains(text(),'Save and Close')]"
//table[@id='user-save-id']/tbody/tr/td[2]/em/button
//div[text()='Users' and contains (@class,'op-listitem')]
//div[text()='xyz' and contains(@class,'something')]
//div[text()='xys' and contains(@class,'something')]
//input[@id='']/following-sibling::img
//div[contains(@class,'auto_payments_summary_grid')]//div[contains(text(),'Sales Order: ') ]
QUICK HELP FOR FINDING LOCATORS IN EXT JS-3
BUTTON //table[@id='adnetwork-partner-active-id']/tbody/tr/td[2]/em/button
BUTTON //button[text()='Submit']
IMG css=div#.x-panel-collapsed .x-accordion-hd .x-tool-toggle ~ span:contains('$TEXT')
SELECTLIST //input[@id = 'operation']/following-sibling::img
TABLECOL //div[@class='x-grid3-cell-inner x-grid3-col-status' and contains(text(), '$TEXT')]
BUTTON //table[@id='opr-button-pushtoadserver']//button[text()='Push to Ad Server']
TEXT //label[text() = 'Targeting Name:']//following::input[@name ='name']
BUTTON //label[text() = 'Targeting Name:']//following::button[text() ='Apply']
BUTTON //label[text() = 'Targeting Name:']//following::button[text() ='Reset']
BUTTON //div[@id='orgDetails']//span[text()='Payment Terms - Standard Cost Deductions' and contains(@class,'x-panel-header-text')]
TABLECOL //div[@id='invoiceperiods']//div[@class='x-grid3-body']//div[@class='x-grid3-body']/div[$iRow]/table/tbody/tr/td[8]
USING CSS ADVANCED:
(BELOW CONTENT IS TAKEN FROM SAUCE_LABS)
Next sibling
Our first example is useful for navigating lists of elements, such as forms or ul items. The next sibling will tell selenium to find the next adjacent element on the page that’s inside the same parent. Let’s show an example using a form to select the field after username.
1
2
3
4
| <form><input class="username"></input><input class="alias"></input></form> |
1
| css=form input.username + input |
Attribute values
If you don’t care about the ordering of child elements, you can use an attribute selector in selenium to choose elements based on any attribute value. A good example would be choosing the ‘username’ element of the form without adding a class.
1
2
3
4
5
6
| <form><input name="username"></input><input name="password"></input><input name="continue" type="button"></input><input name="cancel" type="button"></input></form> |
1
| css=form input[name='username'] |
1
| css=input[name='continue'][type='button'] |
Choosing a specific match
CSS selectors in Selenium allow us to navigate lists with more finess that the above methods. If we have a ul and we want to select its fourth li element without regard to any other elements, we should use nth-child or nth-of-type.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ul id="recordlist"><p>Heading</p> <li>Cat</li> <li>Dog</li> <li>Car</li> <li>Goat</li></ul> |
1
| css=ul#recordlist li:nth-of-type(4) |
1
| css=ul#recordlist li:nth-child(4) |
1
| css=ul#recordlist *:nth-child(4) |
Sub-string matches
CSS in Selenium has an interesting feature of allowing partial string matches using ^=, $=, or *=. I’ll define them, then show an example of each:| ^= | Match a prefix |
| $= | Match a suffix |
| *= | Match a substring |
1
| css=a[id^='id_prefix_'] |
1
| css=a[id$='_id_sufix'] |
1
| css=a[id*='id_pattern'] |
Matching by inner text
And last, one of the more useful pseudo-classes, :contains() will match elements with the desired text block:
1
| css=a:contains('Log Out') |
