Web Inspector enables you to view web applications in Aqua and capture the essential page elements needed for automated tests. Aqua automatically generates a unique CSS or XPath locator for the specific element chosen on the web page, and helps add it to the source code.
The Web Inspector tool window is opened by clicking the icon located on the right-hand sidebar. Alternatively, press Shift twice to open the Search Everywhere window and type
Web Inspector looks similar to a web browser and consists of the following elements:
The website address bar located at the top of the Web Inspector tool window allows you to specify a URL of a website that you want to inspect.
The controls located near the address bar are used to:
– navigate through the visited webpages.
– refresh the webpage.
– show the browser history.
– clear the browser cookies cache for the current session.
– allows/blocks browser popup windows.
– toggle to switch between a mobile and desktop versions of the website.
– open browser developer tools. This option is helpful when extra functionality or a workaround is needed.
The embedded browser (also referred to as Web Inspector) displays the website specified in the address bar. Use it like a regular browser to preview and navigate to the webpage containing the elements that you want to inspect.
The Locators Evaluator section provides the ability to select and process any web element located on the page.
The nearby controls are used to:
– manually refresh the structure.
– switch the automatic structure refresh on/off.
– click to open Web Inspector Settings window.
1 Match, 2 Variants – displays the number of elements that match the generated locator, and provides a list of alternative locators pointing to the same element.
– click to select the type of the locator (CSS, XPath).
– copy the selected locator to clipboard.
– click to add the selected element to your code.
– add the element to your code using a specific type of selector (ID, Name, Tag with classes, and others). Additionally, this menu contains the role-based locators used in Playwright.
The Page structure section displays the layout of the website specified in the address bar. Here you can find all the elements of the web page, inspect them, and navigate to the desired one.
This functionality is usually used as a supplementary one, for example, to navigate to an element located above/below the one that was selected initially.
Configure view options
You can configure the position, size, and viewing mode of the Web Inspector tool window by clicking the button and adjusting the settings according to your needs. The following options are available:
Show Toolbar – hides/reveals the toolbars near the address bar and in the Locators Evaluator section. When hidden, the actions that were available on the toolbar near the address bar are moved to the View Options menu item.
View Mode – allows you to configure the way the Web Inspector tool window is displayed. For example, you can choose to open it in a separate window.
Move to – allows you to change the position of the Web Inspector tool window.
Resize – allows you to change the size of the Web Inspector tool window.
Remove from Sidebar – allows you to remove the Web Inspector tool window from the Sidebar.
View Options – contains a list of toolbar actions. This menu item is shown only when the Show Toolbar setting is disabled.