Is there an addon which you can test css selectors in firefox?
CssSeleniumFirefox AddonCss SelectorsCss Problem Overview
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.
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
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 - Css
Try firebug. http://getfirebug.com/
Solution 5 - Css
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.
Solution 6 - Css
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')
Solution 7 - Css
Selenium IDE 1.0.11 released has inbuilt CSS locator builder
Solution 8 - Css
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.
Solution 9 - Css
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.
Solution 10 - Css
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');
});
Solution 11 - Css
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.
Solution 12 - Css
Firefinder is great for testing selectors. However, if also you want to obtain the CSS selector for an element try SelectorGadget.
Solution 13 - Css
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!