How to get CSS selectors / XPath
If you are unsure how to specify the CSS selector / XPath when adding a locator to a scenario in Autify, you can check the CSS selector / XPath of the target element in the Google Chrome Developer Tools (henceforth Developer Tools).
This page explains how to get the CSS selector / XPath of an element using DevTools.
Please check the related articles for more information on how to specify elements more stably and for errors that occur after acquisition.
DevTools is a set of web developer tools built directly into the Google Chrome browser. (Source: official website)
*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 Developer Tools
There are three ways to launch Chrome DevTools.
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].
Open the right-click menu with your mouse
- Right mouse click on the target element to display the menu.
- You can launch DevTools by clicking [Inspect].
Use a shortcut key
You can launch Chrome DevTools using the following shortcut keys:
Windows: Ctrl + Shift + I Mac: Cmd + Opt + I
You can change where DevTools is displayed by clicking the [︙] icon at the upper right corner of Developer Tools and selecting "Dock side".
How to get a CSS selector / XPath for a target element
We will use the heading on the Autify's home page "Faster Release Cycle AI-Powered Software Test Automation" as an example.
Switch to Selection Mode on Developer Tools
- Make sure the Elements tab is open in DevTools.
- Switch to Selection Mode by clicking the icon in the upper left corner of DevTools.
Select the target element
- With the DevTool in Selection Mode, select the target element on the page with your mouse.
- The source code corresponding to the element is selected.
Get the CSS selector / XPath of the target element
- Move the mouse cursor to the selected source code in DevTools and right-click it.
- Each of the below operations will copy the value of the target element to the clipboard.
CSS selector: Click [Copy] > [Copy selector] from the menu.
XPath: Click [Copy] > [Copy selector] from the menu.
- Paste the value copied into a text editor.
In this example, we got the following values.
- CSS selector
body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3
With CSS selectors / XPath, 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 information on how to change the method of specifying the CSS selector you have got, please refer to this article.:
Using CSS selectors effectively
How to validate CSS selector / XPath
If you want to validate if the CSS selector / XPath you got is the intended element when you change the way to specify it, you can use the following command in the "Elements" panel of the Developer Tools to call the search window and search for the element.
Windows：Ctrl + F
macOS：command + F
Let's take the CSS selector as an example.(XPath can be verified in the same way.)
Change the CSS selector as follows and verify that the intended element is specified.
Before change：body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3
After change：.web-steps-heading.text-center > h3
Enter the CSS selector in the search window in the lower right corner, and if the element can be specified, the corresponding element will be highlighted.
If nothing is searched, check the statement in the CSS selector.
If multiple elements are searched, the locator may identify an unintended element. If this is the case, fix the statement so that the unique target element can be specified.