Selenium Page Objects
Last modified: 10 August 2022The 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.
tip
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.tip
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
attributeid
attributename
attributeElement text
data-
attributes, such asdata-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.
tip
By default, if the page structure changes, it is refreshed automatically. You can turn off the automatic structure update
and refresh it manually when required
.
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 N/A.
tip
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:
![Selenium pog advanced Selenium pog advanced](https://resources.jetbrains.com/help/img/idea/2022.1/selenium-pog-advanced.png)
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.
Thanks for your feedback!