Unique selector in Firefox

Path to Copy Unique Selector

An overwhelming number of questions to the selenium-users@ mailing list are about selectors, and predominantly fixing errors in incorrect (XPath) selectors.

One of my favourite pastimes is criticizing overuse of XPath selectors, but this time I wanted to share a very useful feature I just discovered in the Firefox developer tools.

Using the element picker in the developer tools window (which you on Mac open with ⌥-⌘-I) you can right click your desired element and pick Copy Unique Selector from the context menu to get an absolutely unique CSS selector to paste into your test.

This is frightfully convenient when making one-off programs to prototype something quickly. Of course I wouldn't recommend this approach if you know that the element's locator will change in the future.

And this is the selector expression it produces: #stream-item-tweet-492281138530906113 > div:nth-child(1) > div:nth-child(2) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(1)