Is there an addon which you can test css selectors in firefox?

Question

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.

Solution 1

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.

Solution 2

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

_{(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).

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")

Solution 3

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.

Solution 4

Try firebug. http://getfirebug.com/

Solution 5

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')

View more solutions

Comments

[Nicole]

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]

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]

+1 for a complete, correct answer, and a nice UI to go along with it.

[user223871]

This is exactly what I was looking for and very easy to use! Thank you!

[Adrian Grigore]

@Renesis: Thanks for giving a useful alternative to RTFM!

[marekdef]

In the search box in firebug you can use css selectors

[David]

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.

[nonbeing]

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.