IntelliJ IDEA 2023.2 Help

Selenium Page Objects

Page Object is a design pattern in Selenium that establishes an object repository for storing web elements. Its purpose is to minimize code repetition and enhance the maintenance of test cases.

Create a page object and populate it with web elements

The typical workflow starts with creating a page object file and then populating it with web elements.

Create a new 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

    If needed, you can customize the Web Inspector template. For more information, refer to Aqua documentation

  3. Click OK.

As a result, a new Page Object is created based on the template, and Web Inspector is opened with the appropriate web page. You can then select and add the desired elements to the Page Object as described below.

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 Aqua plugin icons browser expui select web 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, IntelliJ IDEA 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 App general add 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.

Last modified: 07 September 2023