52

I was wondering if there is such an addon in firefox where you can test out css paths to check if they are finding the correct element? I was looking for something similar to xpather for xpath locations.

1
  • 1
    If this question were asked today it would be closed as off-topic...
    – Jack
    Sep 11, 2015 at 20:36

13 Answers 13

51

Edit 2019-12-04:

The firefinder addon no longer exists, but you can use the developer console (press F12), and the $$ function to get elements matching a selector, eg. to select all divs: $$('div')

Old answer:

FireFinder does exactly what you are looking for. You can evaluate either CSS, or XPath expressions, it will list the matching elements, and also draw a red border around them.

FireFinder

2
  • 2
    +1 for a complete, correct answer, and a nice UI to go along with it.
    – Nicole
    Feb 5, 2010 at 17:09
  • This is exactly what I was looking for and very easy to use! Thank you!
    – user223871
    Feb 5, 2010 at 17:10
25

Yes you can go for FireBug, a versatile Firefox web development add-on.

Firebug
(source: getfirebug.com)

To test a CSS selector, go to the "Console" tab and enter a command in the bottom form (more info on how to find the command line).

Firebug command line

Inside the command line use the $$("your CSS selector") syntax to test CSS selectors, explained in more detail here. For example use this command to select everything:

$$("body")
4
  • Is there a way to navigate to an element using a CSS selector in Firebug? It's not quite the same thing as just viewing the element's position in the DOM.
    – Nicole
    Feb 5, 2010 at 17:01
  • 6
    For those who don't want to have to search for it, I found the relevant section here: getfirebug.com/wiki/index.php/…. Use $$('selector') in the Firebug console.
    – Nicole
    Feb 5, 2010 at 17:07
  • 2
    @Renesis: Thanks for giving a useful alternative to RTFM! Aug 15, 2011 at 19:41
  • In the search box in firebug you can use css selectors
    – marekdef
    Mar 19, 2012 at 14:27
24

Here's how to use the built in CSS query selector in Firefox:

Go to Tools > Web Developer > Web Console

Also, you could press ctrl shift i in Windows/Linux, or cmd opt i in Mac.

Type in your CSS selector (using traditional $$() syntax) at the very bottom left corner.

The object node list will appear on the right hand panel of the console.

$$('div')
[object NodeList]
$$('div').length
42

This is handy for Selenium Webdriver instances of Firefox, where having an extension isn't feasible.

3

Try firebug. http://getfirebug.com/

3

Not sure if this helps. Try Firebug. Allows you to select an item, and see what it's css path is, as well as the css currently being applied.

Can do some experimentation in the html/css right in the browser.

3

FireFinder is good, but I started with and prefer FirePath for Firebug. It works similarly, but can give you an expanded view of the HTML around the matching elements w/o need to click inspect, FriendlyFire, etc.

The field where you test the locator also has syntax checker where field turns red if syntax is bad. Just click eval to test the locator and matches show below with additional HTML around the matching elements.

But for testing CSS locator, you'd want the drop down option of "Sizzle" rather than CSS in FirePath. The CSS option only works for simple CSS selectors, complex ones only work under Sizzle (l mode, such as:

div.namedService.photoService > div.photoBrowserContainer:nth-child(3) > div.albumName:contains('someName')

1
  • Actually posted this a while back before realizing CSS limitations. Sizzle is nice, but in terms of test automation, be sure to use/test with CSS only, if you're using Selenium 2 / WebDriver since it only supports CSS. Sizzle support would require you inject Sizzle into the the page/automation, unlike with Selenium RC.
    – David
    Jun 23, 2012 at 6:36
2

Selenium IDE 1.0.11 released has inbuilt CSS locator builder

2

The DOM standard function document.querySelectorAll is what you want, modern browser all support it. See the document

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

You can call it in built-in web console. In console there is a shortcut $$, call it like $$('div a').

I like firebug because it can click to scroll to view the element. It also can test in 'CSS' panel.

1

The 'Find' button in Selenium IDE is very useful for this. It uses the same method to locate elements as your tests will, so can be used to locate elements using any of the supported strategies.

0

jQuery


With jQuery you could easily add a large red border to an element using the selector.

$(document).ready(function(){

  $('#your-css-selector').css('border', '5px solid red');

});
0

Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) or Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60). Both show path.

0

Firefinder is great for testing selectors. However, if also you want to obtain the CSS selector for an element try SelectorGadget.

0

I've found FirePath to be really great, it lets you look up not only CSS but xPath as well. Wish there was something similar for Chrome and IE, but alas!

1
  • You can use Chrome Dev Tools (ships with chrome itself, you don't need a separate tool or addon - see developer.chrome.com/devtools) to test selectors in Chrome... open the console and type $$("your CSS selector") just like you would in Firebug.
    – nonbeing
    Apr 24, 2015 at 12:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.