Transcripted Summary

Here's the million-dollar question. Which web element locator type is the best one to use? Let's find out.

In previous chapters, we learned all about a number of locator types such as IDs, input names, class names, CSS selectors and XPaths.

There are a few other types of locators worth learning and then we can stack them to see which ones are best.




Link text locators match a elements that equal the given text. They are equivalent to the XPaths shown here for text equality.

Link text locators are useful in a pinch, but they suffer the same problem as other text anchors. If the text on the page ever changes, then these locators won't work anymore.




Partial link text locators work the same way as regular link text locators, except that they check if the text contains a value instead of if the text equals the value.




Tag locators return all elements that use a given tag. For example, they could return all a elements or p elements or div elements. Basically, any tag name can be used. However, this locator type is not very useful because pages usually have multiple elements for each tag, in different locations. Tag name locators are essentially superseded by CSS selectors as well.

Now that we know all the different types of web element locators, it's time to answer the million-dollar question β€” which one is the best one to use?

When we write locators for test automation, we should be keen to use the simplest locator possible to uniquely identify the desired element or elements.




Our order of preference should be the following:

  • First, we should always look for a unique ID or a unique input name or a class name that can find our elements. If you remember, those were the three most basic ones we learned first in the course.

  • If we can't use one of those three, then we move forward to try more advanced locators. If we can, we should try to use a CSS selector, followed by an XPath but avoid using text or indexing for anchors.

  • If that doesn't work, we can try to fall back on link text or partial link text.

  • And if all else fails, we can always use an X path with texts and/or indexing as an anchor.

Keep in mind you want to keep things simple, right?

We shouldn't jump to using X paths whenever ID's and class names would suffice. Test automation should always be as intuitive as possible.

Caution

I have one big warning about locators β€” avoid using chrome dev tools to generate CSS selectors and XPaths.

If you click on an element in the source β€” Right click > "copy" β€” you can copy the CSS selector or the XPath. Many times, though, dev tools will return locators that pinpoint an element by position rather than by content or locators that avoid class names or use improper class names.

As we can see here for this web element link, we have some hard indexing. In previous chapters, we've seen examples how we can zero in on attributes like the "data-zci-link" instead.

Chrome's results can be helpful as a starting point, but don't simply copy and paste them into your tool or your automation code.

Stick to the rules that we know will work.



Resources



Β© 2023 Applitools. All rights reserved. Terms and Conditions Privacy Policy GDPR