Aqua Help

Work with Web Inspector

This section covers the basic scenarios of working with the Web Inspector functionality and provides information on how to utilize it in different contexts.

Obtain locators for selected elements

Open a website

To start working with the Web Inspector, you need to open the desired website. To do this:

  • Specify the URL address in the address bar and press Enter.

  • If the website is mentioned somewhere in your code, place the caret at the URL, press Alt+Enter, and select the Open in Web Inspector option.

    Open in Web Inspector

The web page opens in the Web Inspector.

Select a web element

To add an element to your code, you need to select it first. There are several ways to do this:

  • Click the button located in the Locators Evaluator section and select the desired element.

    Select element in page
  • Start typing the locator or its substring in the search field of the Locators Evaluator section. The auto-completion feature suggests a list of elements to choose from.

    Type the locator in the search field
  • Select the required element in the Page structure section.

    Select element from Page structure

Once you selected an element, Aqua generates a unique locator for it. This ensures that each locator points to a specific element on the page.

Add elements to code

To add the element to your code, do one of the following:

  • Click the button in the Locators Evaluator section. Prior to this, you can select the type of the locator (CSS, XPath) by clicking the Locator type button.

  • If you want to add an element to your code using a specific selector (ID, Name, Tag with classes, and so on), click the Add Element to Code By button and select the desired one from the list.

    Add elements to code by

As a result, a piece of code is generated for the supported framework and added to the code editor. If the system defined the framework incorrectly, you can manually change it.

You can also simply copy the locator to clipboard by clicking the Copy Locator button. After that, you can manually add the copied locator to your code.

Validate locators

To verify that the locator is valid and points to the correct element on the web page, do one of the following:

  • In the code editor, click the icon next to the locator that you want to validate.

    Verify locator

    If the locator is valid, the Web Inspector tool window opens, and the appropriate element gets highlighted in the Web Inspector and Page structure section.

  • Copy your locator and paste it to the search field in the Locators Evaluator section. If there are no matches, the locator is invalid.

If you want to check to which element on the webpage the selected locator is related, do either of the following:

  • In the code editor, click near the locator.

    Verify locator
  • Place the caret at the locator and press Alt+Enter. Then, select the Evaluate in Web Inspector option to navigate to the web element.

    Evaluate in Web Inspector
  • Click the locator while holding the Ctrl key.

As a result, the Web Inspector tool window opens, and the corresponding element gets highlighted.

Last modified: 07 March 2024