Aqua 2022.3 Help

Work with web element inspector

Web element inspector provides the easiest way to add elements to automated test code by clicking the web element on the web page and choosing the most convenient way to find elements by XPath, CSS, or data attributes. Moreover, all locators are highlighted in the HTML source to allow users to choose the appropriate element.

Set up web element inspector

  1. Open your project.

  2. Press Ctrl+T to open the Search Everywhere window.

  3. In the search field, start typing Web inspector.

    Web element inspector

    The Web inspector window opens.

    Web Inspector window
  4. Select the appropriate testing framework in the footer of the IDE.

    Add framework
  5. Add the search field of the window, add the URl address and press Enter.

    URL search

    The web page gets opened in the upper part of the window. The lower part of the window contains web elements.

Add a new web element

  1. Click the Select element in page button in the Locators Evaluator section to start the web inspecting mode.

    Select element in page

    You can browse through the web page by clicking a code element. The appropriate area gets highlighted and vice versa.

    Browse elements
  2. After finding the target element, click the icon inside the field and choose locators such as Name, Tag with classes, CSS, XPath and add the element to the test code.

    Add the web element to code

    Generated code will be added based on the web inspector template.

    You can continue adding the web elements and writing test logic using created web elements.

Customize web inspector template

  1. Select a web element and click the UI Automations Framework list in the footer.

    Usually there is a name of the framework that is used in the footer of the IDE.

  2. In the list that opens, select Customize template.

    Customize template

    Customization is available for all frameworks and lets you rewrite algorithms how to generate code for the web element locator.

    File and Code Template

Find locators

You can use several different way to find a locator.

  1. Use auto-completion. Start typing your locator or substring of locator and you will see all available elements on the page.

  2. Use Locator Evaluator. You can validate your locator to check if it is correct and linked to the proper web element and how many matches this locator has on the current page.

  3. Navigate a locator to a web element. You can check to what the web element locator leads on the web page. Press Alt+Enter on the locator in code to navigate to the web element.

Create page object

  1. In the Project tool window, right-click the directory where you want to store the page object, and select New | Selenium Page Object.

  2. Select the implementation language, framework, and give the page object a name.

    New Selenium Page Object

    You can customize the Web Inspector template, refer to Customize web inspector template for details.

  3. Page Object is created based on the template and Web Inspector will be opened with the appropriate web page. You can add all elements as described in the Add a new web element section.

Web element inspector window overview and options

The web inspector window contains the same options that are applicable to any other tool window in the IDE and specific web-inspector options.

  • You can click the Options icon to open the menu for configuring the current view and changing the tool window viewing modes. The menu items are options that you can turn on or off. An active item contains a check mark on the left side of its name.

  • You can use separate buttons for cleaning browser cookies, enabling popups, enabling the mobile version, and using browser developer tools.

  • You can also use browser features such as refresh the page, go to the previous or the next page and see the browser history.

  • You can refresh the HTML structure automatically or manually.

Last modified: 21 October 2022