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
Selenide
FluentLenium
Atlas
JDI Light
Geb
Zelenium

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

Make sure that the Selenium library is added to your project.
In the Project tool window, right-click the directory where you want to store the page object, and select New | Selenium Page Object.
Select the implementation language, framework, and give the page object a name.
A file with page object boilerplate opens together with the embedded browser to manipulate page object elements.
You can customize the code template, which is covered later in this topic.
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.

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.
If you want to change the page that opens for a page object, specify the page address in the page_url comment. For FluentLenium, use the @PageUrl annotation.

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

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.
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).
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.

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.
Select the required language and framework.
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.
You can paste the copied code right to a package in the Project tool window. IntelliJ IDEA will create the required files for you.

Advanced options

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

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.

Select the required language and framework.
Click Customize Template.
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