Tackling CSS & Xpath Selectors

Over usage of Xpath and CSS selectors in scripts can result in flaky tests. At times these selectors does become handy as workarounds but limiting their usage in overall test suite is always preferred.

While arriving correct Xpath or CSS class for an element is quite challenging at times as per complexity of page written. Hence they end-up being asked frequently in various selenium groups/forum.

Advanced browsers like Firefox and Chrome has rolled couple of features in their developer tools which avoids hassle of building Xpath & CSS class from scratch. So let's dive-in with Chrome Browser.

In Developers tool bar >> Elements Tab, users can Right-Click on any DOM element to find following options (1. Copy CSS Path & 2. Copy XPath)

Now identifying Xpath/CSS Selectors for any element is just 1-click away. At the same time while debugging flaky scripts we end up with Not-so-User-friendly CSS or Xpath which is causing trouble and end up spending lot of time in identifying them.

So let's see how to identify an element using it's CSS/Xpath selectors using same Chrome browser.

Verifying CSS Selector

Using Copy CSS Path gave me following text "#V8u91sLn5RUivryG9JDpR1mpGht6dNLJWIuBtpCbtIg\3d _14865a88086\3a 12b85cb\3a e733c813_summary > span:nth-child(2)". Now let's try to identify the same element.

Via Elements Tab

Let's search with the CSS Path obtained and it should instantly identify the first element that matched the criteria. If one or more elements are matching CSS criteria searched then they can be navigated.

Verifying Xpath

Using Copy Xpath gave following "//*@id="V8u91sLn5RUivryG9JDpR1mpGht6dNLJWIuBtpCbtIg=_14865a88086:12b85cb:e733c813_summary"]/span[2]" . Now let's try to identify the same element.

Via Console

Type the following code $x("XPATH OBTAINED") and it should identify that element and display's inner HTML as output.

Via Elements Tab

In elements tab let's search with the Xpath obtained and it instantly identifies the first element matching criteria. If one or more elements are matching then user can navigate through them individually.

So as a result we can identify Xpath/CSS selectors for an element in page as well as verify/identify elements with given XPath/CSS selectors. Hopefully this helps to reduce flakiness in your automation scripts.