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

Product Forums Katalon Studio
,
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

1 Like
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

1 Like
6

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

1 Like
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.

1 Like
9

Chro path is best tool !

10

Thanks. But same locators will work in IE?

11

XPath is the most powerful way to determine the location of elements on a web page.
Therefore, I will recommend that you practice more and more to find XPath in chrome browser because when you would go for any company technical test, you will have to find XPath in chrome browser only. Let’s know what are few steps to find XPath in chrome browser.How to find XPath in Chrome