How to get CSS selectors

Suppose you have added a locator to your scenario on Autify and are trying to specify a CSS selector but are unsure which CSS selector to specify. In this case, you can use Google Chrome's Developer Tools (DevTools) to get the CSS selector of the target element.
This page explains how to get the CSS selector of an element using DevTools.
*For details on how to make CSS selectors more stable and how to resolve errors, please see the related articles listed at the end of this article.

What are Google Chrome's Developer Tools?

DevTools is a set of web developer tools built directly into the Google Chrome browser. (Source: official website)
The official documentation can be found here:
https://developer.chrome.com/docs/devtools/
*There are some differences in the UI between the Windows and Mac versions. In this article, we have used the Mac version.

How to launch Google Chrome Developer Tools

There are three ways to launch Chrome DevTools.

1. Click the [︙] icon in the upper right corner of Chrome

Click the [︙] icon in the upper right corner of Chrome.
From the menu, click [More Tools] > [Developer Tools].

2. Open the right-click menu with your mouse

Right-click your mouse on the Chrome browser to display the menu.
You can launch DevTools by clicking [Inspect].

3. Use a shortcut key

You can launch Chrome DevTools using the following shortcut keys:
Windows => Ctrl+Shift+I
Mac => Cmd+Opt+I

How to change DevTools' display position

You can change where DevTools is displayed by clicking the [︙] icon at the upper right corner of Developer Tools and selecting "Dock side".
You can choose from the following display positions:

• A separate window
• Left
• Bottom
• Right
  

How to get a CSS selector for a target element

In this example, we will get a CSS selector for the headline on Autify's home page ("Faster Release Cycle AI-Powered Software Test Automation").

1. Switch to Selection Mode on Developer Tools

1. Make sure the Elements tab is open in DevTools.
2. Switch to Selection Mode by clicking the icon in the upper left corner of DevTools.
   

2. Select the target element

1. With the DevTool in Selection Mode, select the target element on the page with your mouse.

2. The element you click on will be selected on the page.
   

3. Once selected, the element's source code will also be selected in the Elements tab on DevTools.
   

3. Get the CSS selector of the target element

1. Move the mouse cursor to the selected source code in DevTools and right-click it.
2. Click [Copy] > [Copy selector] from the menu. The CSS selector of the target element will be copied to your clipboard.
3. Paste the copied CSS selector into a text editor.
   

In this example, we got the following CSS selector:

#gatsby-focus-wrapper > div:nth-child(3) > div > div.web-steps-heading.text-center > h3

Change how CSS selectors obtained from Developer Tools are specified

With CSS selectors, there can be more than one way to select an element. In automated testing, it’s important to choose a method that:

• reflects your intentions,
• can identify the target without ambiguity,
• is concise and does not break easily (is resistant to changes in page structure)

For more information on how to change the way CSS selectors obtained from the Developer Tools are specified, please refer to this article:
Using CSS selectors effectively

How to check if a CSS selector specifies the intended element

If you want to check whether the CSS selector specifies the intended element, such as after you change the way the CSS selector specifies an element, you can do so by opening the Console tab on DevTools.

To do this, you will use Document.querySelector().
In the Console tab on DevTools, enter document.querySelector("CSS selector"); but replace CSS selector with a given CSS selector and press Enter.
Earlier in this article, we got a CSS selector that specifies the heading element on Autify's website. Now, we will try to make the CSS selector more concise and check whether it specifies the heading element as intended.

1. Open the Console tab in Developer Tools.

2. Enter the following in the Console column of the Developer Tools:

document.querySelector(".web-steps-heading.text-center > h3"); 

and press Enter.
The element's source code will be returned if a corresponding element exists for the specified CSS selector.
In this example, the HTML source code for the intended heading element is displayed, so we can confirm that .web-steps-heading.text-center > h3 can also be used to specify the target heading.

If you want to use CSS selectors in this way, you can use Developer Tools to get a CSS selector for the desired element.

Related articles

• Add a locator to specify an element
• Using CSS selectors effectively
• Element Not Found