Tip for finding CSS & XPath locators using Chrome with an example:


#1

Copies CSS to the OS clipboard

1 Open Chrome

2 Navigate to https://www.google.com

3 Right click on “Google Search” button & select “Inspect”

4 Right click on the highlighted element

5 Click “Copy” > “Copy selector”

6 Paste the clipboard results into any text editor

Result: #tsf > div.tsf-p > div.jsb > center > input[type=“submit”]:nth-child(1)

7 Add this to your Object

Copies XPath to the OS clipboard

1 Open Chrome

2 Navigate to https://www.google.com

3 Right click on “Google Search” button & select “Inspect”

4 Right click on the highlighted element

5 Click “Copy” > “Copy XPath”

6 Paste the clipboard results into any text editor

Result: //*[@id=“tsf”]/div[2]/div[3]/center/input[1]

7 Add this to your Object


#2

Isn’t better to use more relative path? For xpath in example, for mentioned button:

.//*[@value=“Google Search”]

.//*[@name=“btnK”]

.//*[@jsaction=“sf.chk”]

.//*[@class=“jsb”]/center/input[1]

.//*[@style=“padding-top:18px”]/center/input[1]

.//*[@class=“tsf-p”]/div[3]/center/input[1]

.//*[@class=“tsf”]/div[2]/div[3]/center/input[1]

which can be easily obtained with this https://chrome.google.com/webstore/detail/xpal-xpath-generator-test/lpfjogcaifigkimnlkepjlkfhpdhebap add on?


#3

Sure whatever works - this is just a staring point…
Hopefully more folks add to this info like you :wink:


#4

Another free tool is: https://chrome.google.com/webstore/detail/relative-xpath-helper/eanaofphbanknlngejejepmfomkjaiic?hl=en-US


#5

Finding is one thing, making them unique is another.
In chrome inspector I like to use for

xpath: when an id is unrecognizeable and I want to derive an element from text
use In chrome console this syntax (Start with $ for css)
$x(’/div[*[contains(text(), ‘Search for text’)]]/div[2]’)

Preferably I use css
e.g.
end of ID or class ($)
use In chrome console this syntax (Start with $x for xpath)
$(’[id$=endofid]’) the end of the id name, or $(’[class$=endclass]’)
start of scr (^)
$(’[src^=“OrderReleasableServices_Popup.aspx?CustomerOrderId”]’) start of src, can be used for iframe selection as well

good luck


#6

Just found this tool… Good for those who need a bit of help finding Xpaths & CSS:


#7

how to find xpath and css in IE…


#8

Use Chrome or Firefox to get the selector you need, then use it in your tests running on IE.