IntelliJ IDEA 2022.1 Help

Selenium Page Objects

The Selenium UI Testing plugin provides a Chromium-based tool that lets you open web pages and generate code compliant with the page object pattern right in the IDE. This reduces the amount of time spent on boilerplate code and allows you to focus on the testing logic.

Supported languages and frameworks

Java

Kotlin

Python

Groovy

Selenium

Feature is supported

Feature is supported

Feature is supported

Feature is supported

Selenide

Feature is supported

Feature is supported

feature is not supported

Feature is supported

FluentLenium

Feature is supported

Feature is supported

feature is not supported

Feature is supported

Atlas

Feature is supported

feature is not supported

feature is not supported

feature is not supported

JDI Light

Feature is supported

feature is not supported

feature is not supported

feature is not supported

Geb

feature is not supported

feature is not supported

Feature is supported

feature is not supported

Zelenium

feature is not supported

feature is not supported

Feature is supported

feature is not supported

Create and edit page objects

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

Create a new page object

  1. Make sure that the Selenium library is added to your project.

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

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

    New selenium page object

    A file with page object boilerplate opens together with the embedded browser to manipulate page object elements.

  4. In the address bar, enter the URL of the website you are going to test. Press Enter. The web page opens in the browser just below the address bar.

    Web page opened in dedicated tab

When the IDE detects a file that uses the page object pattern, it will suggest opening it in the page object editor.

Edit an existing page object

  • Click the Add page elements icon in the gutter. The page object editor will open the page specified in the // page_url comment.

    Edit page object

After you have opened a web page, proceed to picking the page elements that you are going to test. An element can be identified using one the following:

  • XPath selector

  • CSS selector

  • class attribute

  • id attribute

  • name attribute

  • Element text

  • data- attributes, such as data-test

  • aria-label attribute

Add web elements

  1. Select the required elements in one of the following ways:

    • For single elements: click the Select Element in Page button or press F3, then select an element in the browser. The element gets highlighted in the page structure below. The highlighting also works in the opposite direction – if you select an element in the page structure, it gets highlighted in the browser window.

    • For one or more elements: select one or more elements in the page structure under the browser window.

    Adding web elements
  2. Press Ctrl+Enter. This will add the element to the page object code using the preferred selector. Alternatively, if you want to use a specific selector, click Add To Page Object By and choose the required option (XPath, CSS selector, and so on).

    Choose selector

    You can add a selector that will match multiple elements. For this, hold Shift while adding the selector.

Generate code in the playground

When using Selenium Page Object Playground (Tools | Open Selenium Page Object Playground), you can generate page object code for use elsewhere.

  1. Make sure the elements you are going to use in your tests are added to the page object. For each element, you can configure which type of selector to use. For example, the same element can be located using a data-* attribute, which is considered a preferred way, a CSS selector, XPath, and so on.

    Selenium pog elements
  2. Select the required language and framework.

    Selenium pog language framework
  3. After you have specified the elements and template, the generated code appears in the editor window. You can copy and paste it to your page object class or export the code to a file Ctrl+O.

    Selenium pog code

Advanced options

Selenium Page Object generator provides several options that let you handle special cases. You can access them on the browser window toolbar:

Selenium pog advanced

The following options are available:

  • Clear Browser Cookies – clears the browser cookies cache for the current session.

  • Enable Popup Windows/Disable Popup Windows – toggles the visibility of popup windows.

  • Open Developer Tools – Chromium developer tools. This option is helpful when extra functionality or a workaround is needed.

Create custom templates

You can tailor the output for a specific project or workflows by creating custom templates.

  1. Select the required language and framework.

    Selenium pog language framework
  2. Click Customize Template.

    Selenium pog template
  3. The File and Code Templates dialog opens, where you can customize the generated boilerplate code. For details on how to create a template, refer to File templates.

Last modified: 10 August 2022