Thursday, 11 March 2010

Use Firefinder to help you construct Selenium CSS selectors

Looking through the archive of blog posts, I can see that I mentioned various tools for Xpath construction, but none for CSS selectors in Selenium. Let’s change that now… Firefinder helps you test your css selectors and XPath statements before committing them to Selenium code.

Firefinder, much like XPather or XPath Checker, allows you to type in a css selector and ‘filter’ the page with the css selector so you can see what matches the selector you entered.
The selected items are shown in a Firefinder pane in Firebug, and highlighted on the actual page itself.
Firefinder covers both Xpath and CSS so you can use it to help with both selection strategies, and potentially converting Xpath statements over to css.
The author (Robert Nyman) has a good description of Firefinder on his site, with a video showing the tool usage
Make Firefinder part of your Selenium armoury.


  1. Sel--ium Automater3 October 2010 at 16:48

    Thank you so much for this info. I was trying to search for this tip from quite some time. By the way your book and your blogs are great 2 read.

    Always happy to receive flattering comments. Thanks.

  2. FYI, FirePath is another good tool for this as well. I personally prefer FirePath over Firefinder for its better UI and features.

    It displays the HTML DOM tree with context highlight around the element you've inspected so you can then analyze and refine your CSS (or XPath) locator by going up the DOM tree if needed, etc.

    It also provides static inspection via right-click on object to inspect on page, and a dynamic inspector to inspect elements that are tricky to right-click & inspect (the icon for this dynamic inspector is like the inspect element right-click option for Firefinder/Firebug).

    And best part, it has a nice CSS/XPath tester to test your locator with syntax checking (red highlight means you have wrong syntax or typo). Result will tell you # of matches like Firefinder, along with showing DOM tree with highlight context of found element. I find the tester part of the UI better than Firefinders.

    FirePath supports XPath, CSS, and Sizzle (extended CSS).

    But of course, its also a matter of preference which tool one likes better.

  3. Should have browsed your site further first, I see you've a post on FirePath

  4. Alan Richardson17 March 2012 at 01:09

    Helping keeping things up to date for the next person in your situation - you added value.



  5. Alan Richardson17 March 2012 at 01:09

    Thanks David, I too tend to use FirePath now (or the inbuilt Chrome tools)

    Thanks for the comment on this post to help steer people in the up to date direction.


  6. you're in reality a good webmaster. The web site loading pace is amazing. It kind of feels that you are doing any unique trick. Moreover, The contents are masterwork. you've performed a great activity
    on this topic!

  7. [...] in tools in Opera and Chrome. I have an out of date and old post over on “Use firefinder to help you construct Selenium CSS Selectors“. I rarely delete out of date posts, but I don’t use Firefinder any [...]