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
- Using the Developer Tools in your Browser
- Grabbing website elements with CSS selector or XPATH query
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:
- In Firefox or Chrome open the web developer tools with key-shortcut F12
- switch to the console tab
- go to the lower input area in the console tab
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".
- Open the web developer tools like described above.
- enter in the lower input area following code
or more specific
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