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
Open your project.
Press Ctrl+T to open the Search Everywhere window.
In the search field, start typing Web inspector.
The Web inspector window opens.
Select the appropriate testing framework in the footer of the IDE.
Add the search field of the window, add the URl address and press Enter.
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
Click the Select element in page button in the Locators Evaluator section to start the web inspecting mode.
You can browse through the web page by clicking a code element. The appropriate area gets highlighted and vice versa.
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.
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
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.
In the list that opens, select Customize template.
Customization is available for all frameworks and lets you rewrite algorithms how to generate code for the web element locator.
Find locators
You can use several different way to find a locator.
Use auto-completion. Start typing your locator or substring of locator and you will see all available elements on the page.
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.
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
In the Project tool window, right-click the directory where you want to store the page object, and select .
Select the implementation language, framework, and give the page object a name.
You can customize the Web Inspector template, refer to Customize web inspector template for details.
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
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.