Login
      Contents x
      How to get CSS selectors / XPath
      • 13 Sep 2023
      • 3 Minutes to read
      • Contributors
      • Print
      • Dark
        Light
      Contents

      How to get CSS selectors / XPath

      • Updated on 13 Sep 2023
      • 3 Minutes to read
      • Contributors
      • Print
      • Dark
        Light
      Article Summary

      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.

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

        1. Click the [︙] icon in the upper right corner of Chrome.
        2. From the menu, click [More Tools] > [Developer Tools].
          En_Chrome の右上にある「︙」メニューから起動.png

      2. Open the right-click menu with your mouse

        1. Right mouse click on the target element to display the menu.
        2. You can launch DevTools by clicking [Inspect].
          image.png

      3. 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".
      En_表示位置の変更方法.png

      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.
      image.png

      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.
          En_デベロッパーツールを「選択モード」にする.png

      2. Select the target element

        1. With the DevTool in Selection Mode, select the target element on the page with your mouse.
        2. The source code corresponding to the element is selected.
          En_対象要素を選択する_選択中.png

      3. Get the CSS selector / XPath of the target element

        1. Move the mouse cursor to the selected source code in DevTools and right-click it.
        2. 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.
        3. Paste the value copied into a text editor.

      image.png

      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
      • XPath
      /html/body/main/div[3]/div/div/div/div[1]/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.
      image.png

      • 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.

      Was this article helpful?
      What's Next
      Autify is a no code test automation platform that allows anyone to perform automation testing. It uses artificial intelligence (AI) to maintain test scenarios.
      Sign in
      Products
      Resources
      Contact Us
      © Autify,Inc.
      Change password!
      Changing your password will log you out immediately. Use the new password to log back in.
      Change profile
      Success!
      First name must have atleast 2 characters. Numbers and special characters are not allowed.
      Last name must have atleast 1 characters. Numbers and special characters are not allowed.
      Enter a valid email
      Enter a valid password
      Your profile has been successfully updated.
      Logout