CSS vs. Xpath
One of the most heated and subjective conversations in the Selenium community is which locator strategy is better, often circling around two -- XPath and CSS.
One of the most heated and subjective conversations in the Selenium community is which locator strategy is better, often circling around two -- XPath and CSS.
To get a real taste of what the performance difference is between CSS and XPath, we will need to dig deeper. We'll do that by running everything from a local machine while using a performance benchmarking utility.
In the last tip I provided benchmarks that showed XPath and CSS performance across various browsers. Since then I've received feedback on some things that my test was missing -- most notably more browser coverage and testing against a larger and deeper page.
It's likely that you'll run into odd test behavior that makes you question the locators you're using in a test. But how do you interrogate your locators to make sure they are doing what you expect?
IDs and CSS classes change when the page is redesigned, and many widgets don't have them. The role and the name of an element, as a screen reader announces them, change less often, and finding elements by them also checks that the page is accessible.
Web components keep their elements in a shadow root, apart from the rest of the page, so a normal locator doesn't find them. The test has to go through the shadow root, or use a tool whose locators look inside it.
In web design CSS (Cascading Style Sheets) is used to apply styles to the markup (HTML) on a page. CSS is able to do this by declaring which bits of the the markup it wants to interact with through the use of selectors.