What is the difference between a CSS and XPath selector? And which is better with respect to performance for cross-browser testing?

CSS selectors perform far better than XPath selectors, and it is well documented in Selenium community. Here are some reasons: XPath engines are different in each browser, hence making them inconsistent Internet Explorer does not have a native XPath engine, and therefore Selenium injects its own XPath engine for compatibility of its API. Hence we … Read more

“selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element” while clicking a ‘Next’ button with Selenium

This error message… selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {“method”:”name”,”selector”:”submitNext”} (Session info: chrome=66.0.3359.170) (Driver info: chromedriver=2.36.540470) …implies that the ChromeDriver was unable to locate the desired element. Locating the desired element As per the HTML you have shared to click on the element you can use either of the following Locator Strategies: … Read more

Is it possible to use a CSS wildcard in the middle of an attribute selector?

You can’t use a wildcard like that, but to get the desired result (ID starts with lorem and ends with Ipsum) you can use the attribute starts-with and ends-with selectors instead, like so: p[id^=”lorem”][id$=”Ipsum”] Remember that by linking multiple attribute selectors like this (along with the p type selector), you’re doing an AND match with … Read more

Select odd even child excluding the hidden child

:nth-child() pseudo-class looks through the children tree of the parent to match the valid child (odd, even, etc), therefore when you combine it with :not(.hidden) it won’t filter the elements properly. Alternatively, we could fake the effect by CSS gradient as follows: .hidden {display:none;} .wrap { line-height: 1.2em; background-color: orange; background-image: linear-gradient(transparent 50%, green 50%); … Read more

CSS select elements with partial id

Not with ID selectors since they require complete ID names, but with substring attribute selectors: div[id^=”as_”] div[id^=”bs_”] But since your elements have a class attribute anyway, why not add a common class to each group of elements and select by that class to make things simpler? You should be able to determine the grouping class … Read more

What is the difference between pipe (|) and caret (^) attribute selectors?

Caret (^): selects an element (<h1>) where the value of the specified attribute (rel) starts with a certain value (val): h1[rel^=”val”] { /** formatting */ } h1[rel^=”friend”] { color: blue; } <h1 rel=”friend-external-sandwich”>I’m Blue.</h1> <h1 rel=”friend2-external-sandwich”>I’m Blue.</h1> <h1 rel=”external-sandwich”>I’m Black.</h1> Pipe (|): selects an element (<h1>) where the value of the specified attribute (rel) is … Read more

Why use an attribute selector to match classes?

The [] syntax is an attribute selector. a[class=”btn”] This will select any <a> tag with class=”btn”. However, it will not select <a> which has class=”btn btn_red”, for example (whereas a.btn would). It only exactly matches that attribute. You may want to read The 30 CSS Selectors you Must Memorize. It’s invaluable to any up-and-coming web … Read more