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.
13 Answers
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.
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")
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.
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.
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');
});
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.
Firefinder is great for testing selectors. However, if also you want to obtain the CSS selector for an element try SelectorGadget.
Related