What are the advantages / disadvantages of the two different selectors?
Should I use one over the other?
I think it's primarily a matter of user preference.
To select the first child of all <p> elements, you'd do:
$("//p/*[1]") in Xpath
$$("p > *:first-child") in CSS
I prefer using Xpath, but YMMV.
Note that, internally, all CSS selectors are converted to Xpath. For example, the selector $$("#one") will be converted into $(".//*[id='one']").
Just a few notes:
indexing starts from 1 in XPath, so it's //p/*[1]
the CSS selectors in Tritium allow you to prefix a selector with >, as in $$("> p > :first-child"); this will be converted into a scoped search (i.e., ./p/*[1])
because CSS selectors are (currently) dynamically converted into XPath, there's a slight performance hit compared to using straight XPath
Related
Is it possible to output a selector that isn't compliant with CSS standards? For example, I want to use this selector:
Button < Icon {}
But sass complains because it doesn't know what to do about the <. I'm thinking there has to be a way to output the selector without it being parsed by sass.
Thanks
sass eventually will be parsed to css and < is not valid css operator. This < fake operator would be an attempt to select a direct Parent from a given child, like > selects a direct child from given parent. CSS doesn't allow that. As its name says cascading style sheets, you go top from bottom, you can only select children, siblings at best, but no parents.
Preprocessors let you write easier styling with function, mixins, cleaner syntaxes, but dont allow you to violate css basic rules, you cant go around it.
Is there any difference between relative XPaths and minimal XPaths or both are same?
In Firebug there are two types of XPath mentioned in the options: 'XPath' and 'Minimal XPath'.
The difference between the two options is described within the documentation to the HTML panel.
The option Copy Minimal XPath is meant to make the XPath, which relates to one element, as short as possible. So the word 'minimal' actually refers to the length of the resulting XPath.
It is currently (Firebug 2.x) only available for elements, which have an ID. And for those elements it copies the XPath in the form of
//*[#id="elementID"]
where elementID represents the ID given within the id attribute of the element. So the words 'minimal' and 'relative' actually mean the same at the moment. Though future versions of Firebug may extend the feature to produce minimal XPaths for elements without ID. And those minimal paths don't necessarily have to be relative.
The option Copy XPath is available for all elements and copies an absolute XPath to an element, which e.g. looks like this:
/html/body/div/div[1]/div/div/table[4]/tbody/tr[17]/td[2]/a
I can use either xpath or CSS, doesn't matter...but there are other a tags on the page. But I just want to use either the first a href=mailto: tag or anyone (there is actually just one, so it doesn't matter the order).
You could use an XPath starts-with function:
mailto = doc.xpath('//a[starts-with(#href, "mailto:")]').first
The standardese is particularly thick in the XPath spec so hopefully the example is clear enough.
I want to avoid using xpath in my java selenium code but cannot figure out what the css equivalent to the code below would be
("xpath", "//div[#class='error'][not(contains(#style,'display: none'))]");
Does anyone know if there is a CSS equivalent to xpath not contains
You can't easily match against a compound attribute (i.e., style=) in CSS. The not part is easy - CSS3 has a :not(...) selector. You're going to have to find something else to identify the elements you want to exclude, and then use :not(...) to exclude them,
in this address i am trying to scrape a tage (that is Larg price which is bold red one)
i use LIBXML 2.2
when i try to extract the tag through this XPATH
//*[#class='priceLarge']
it works!
but to make queries easier i would like to use FireBug on Firefox.
Using FireBug it gives me this XPath
/html/body/div[2]/form/table[3]/tbody/tr/td/div/table/tbody/tr[2]/td[2]/span/b
using this Xpath it does not work, seems this one does not give a complete query. how can i modify this XPath to scrape the item ?
Firefox and other browsers generate tbody tags in HTML.
In fact, the tbody is probably not there, so you can remove it in your XPath. (/html/body/div[2]/form/table[3]/tr/td/div/table/tr[2]/td[2]/span/b) You can test this by just saving the HTML from your application and viewing it in a text editor.
Since it seems the intent is to pull information from a web page however, your application will probably be more resistant to changes in the web page if you use XPath less dependent on the tree structure (i.e. //b[#class='priceLarge']).
EDIT: It seems that in addition to the tbody problem, Firefox is rendering the div (ID: divsinglecolumnminwidth) element as containing the form element (ID: handleBuy).
Looking at the html with an XML editor shows that the form element is a sibling of that div element, so the expression should start with /html/body/form/table[3].
One tool, among many others, to test your XPath expressions is HAP Testbed.