CSS selector and XPATH in Selenium

In this article you will learn some real tricks from our senior developers about how to use your browser for UI testing checks like CSS selector in Selenium or XPATH in Selenium.

You know the issue, you need to develop some UI tests and you need to find the right WebElement on the website. You try it in your test code, but you do not get the right WebElement and it drives you crazy. It eats your time and even more, you have no clue why it sometimes does not work and sometimes it works.

In this article you will learn how you can use the browser console to test your UI WebElements before you use it in your Selenium code and you need the full development roundtrip.

Table of Contents

  1. Using the Developer Tools in your Browser
  2. Grabbing website elements with CSS selector or XPATH query
    1. Working CSS selector in Selenium - prior tested in browser
      1. More examples for CSS selectors in Selenium
    2. Working XPATH in Selenium - prior tested in browser
      1. More examples for XPATH in Selenium
    3. Console.table()

1. Using the Developer Tools in your Browser

For the following examples you will need the Web Developer Tools of your preferred browser. To use the Web Developer Tools do these steps:

  1. In Firefox or Chrome open the web developer tools with key-shortcut F12
  2. switch to the console tab
  3. go to the lower input area in the console tab
  4. now you can enter any arbitrary JavaScript code which will be executed in your JavaScript runtime

2. Grabbing website elements with CSS selector or XPATH query

You can easily decide in Selenium to grab web elements on a website with either CSS selector in Selenium or with XPATH in Selenium. Both variants are okay, but mostly you will prefer to use XPATH.

2.1. Working CSS selector in Selenium - prior tested in browser

Sometimes it is easier to grab content with the CSS selector in Selenium. The trick here is how you can quickly test your CSS selector for Selenium, without needing Selenium.

Let us assume we want to fetch on google.com all results by the CSS class "rc". Our matching CSS selector in Selenium would be ".rc" or if we want to be more specific "div.rc".

  1. Open the web developer tools like described above.
  2. enter in the lower input area following code
$$(".rc")

or more specific

$$("div.rc")

Now you will get a result back, which is representing your result array.

2.1.1. More examples for CSS selectors in Selenium

get element by class 14800

Examples for CSS selectors

2.2. Working XPATH in Selenium - prior tested in browser

 

2.2.1. More examples for XPATH in Selenium

find element by xpath

get element by id

how to find xpath in chrome

xpath in selenium 5400

Examples for XPATH queries

2.3. Console.table()