XPaths vs id/name/class vs CSS Selectors

Do you have a hierarchy for the order in which you try automating the above?
For me, its id and name first - - I'll always check if I can directly set the value of the field. This doesn't work with a lot of sites that have form field validation, but works for older sites.
In some cases, for buttons, I'll use select element by class, if it's the only button on the page.
These seem to work as long as the page doesn't have any complex javascript.
Reliability seems to go downhill from there: Relative XPath, absolute XPath and CSS Selectors. I'll try for Rel.XPath first, so I don't have to deal with that huge string of divs that comes with absXPath, but sometimes I won't really have much of an option.
I haven't needed to work with CSS selectors often, because absXPath usually gets me the required field even if RelXPath doesn't.
Would love to hear if any of you follow similar or different checklists. Also would love recommendations regarding how to extract better XPaths.

I mostly avoid XPath. I suppose you are asking for puppeteer automation or something similar.

My order: #id if there is one, some attributes if there is no constant id like `button[aria-label="element_345"]`,
or select all inputs and input[3] if a number of inputs, buttons, etc are fixed.

For some sites where page structure is constantly changing nothing of these works, I use jQuery or Cheerio and methods
find and parents and the :first selector, so from one non-changing constant, I get the first parent or child I need.

Hope this wasn't confusing and helped a little bit.

XPath can be confusing for me sometimes, So I mostly go with ID/Classes. I create variables based on ID/Classes so its easy. I use DevTools for quickly selectors and update on my scripts.

nirioum said:

I mostly avoid XPath. I suppose you are asking for puppeteer automation or something similar.

My order: #id if there is one, some attributes if there is no constant id like `button[aria-label="element_345"]`,
or select all inputs and input[3] if a number of inputs, buttons, etc are fixed.

For some sites where page structure is constantly changing nothing of these works, I use jQuery or Cheerio and methods
find and parents and the :first selector, so from one non-changing constant, I get the first parent or child I need.

Hope this wasn't confusing and helped a little bit.

Click to expand...

Thanks, there's a lot of info here. I've used the input[n] thing as well, it's definitely useful. I'm not sure how Cheerio/jQuery fits into this, but I'll look up both and figure out how I can integrate them into my work flow.

I never use XPath. I used it maybe once for one Greasemonkey script in order to hide an element on a page. I don't remember why I used XPath, probably because the element had no selectors no nothing.

Anyway, I'll go with ID, Class, Aria-label, Name, Title, whatever is there and can be used. XPath is like my last last option, just like in iMacros X/Y clicks are my last last option

idk why but all the times I always use xpath, relative one of course.
ex: //input[@id='username']

Why don't you guys like xpath? Is it for readability reasons?

I use xpath. I like it. Works great for me.

I use Id if it’s available and consistently there. There are times when I need to go with coats, relative or full paths. It depends on he complexity of the site, how different types of content are rendered etc. I use the easiest I can first which is id and then xpath if required

noellarkin said:

Do you have a hierarchy for the order in which you try automating the above?

Click to expand...

The best thing to use, if available, is ARIA accessibility labels, especially role. Even if the webpage structure changes, ARIA labels will still correspond to the correct info.

XPath for best for me.

Here are a few examples from my old cases;

- If element's text is contains some text, . mean is text()
- If element has a lot class but if one is need for you: - If input is available: We search an input in role's main div.
- If there is 5 button for same text and there is no ID etc, - Sometimes only aria-label is can be unique, - Do you need last div in same class? Then, - If you need a h2 tag after a marked div, - If you know a child div's path and you need last div in the mother div, //.. mean is go to up-level (mother) tag, then you can search in the tag.

Maybe I didn't explain the codes well. Sorry for that but I guess you can get a few tricks in there. I almost forgot XPath, this thread is helped me remember again, thanks for that

I prefer xpath over all others, especially when I am working with a site that has dynamic attributes that can change on each page request.