Skip to main content

Generating Page Objects using a custom Page Object template

The Web UI Test Automation plugin from JetBrains boosts productivity by generating Page Objects with the built-in Web Inspector. Instead of switching between browser DevTools and the IDE, you can automatically insert locator strategies directly into Page Objects.

We will create a custom template for Kolibrium Page Objects by following the guide linked above and pasting the content below into the Custom Kotlin Page Object.kt and Custom Kotlin Locator.kt templates.

Template files​

  1. Page Object template (Custom Kotlin Page Object.kt)

Generates Kolibrium-compatible Page Object classes using Kotlin's context receiver.

#if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NAME}

#end
import dev.kolibrium.core.selenium.*
import org.openqa.selenium.WebDriver

context(WebDriver)
class $PAGE_NAME {
#foreach($field in $PAGE_FIELDS)
    $field
#end
}
  1. Locator template (Custom Kotlin Locator.kt)

Supports multiple locator strategies:

  • CSS selector
  • XPath
  • ID
  • Name
  • Class name
  • Data attribute
  • Text
  • Aria label
#set ($item = $PAGE_ELEMENT)
#if (${item.multiSelect})
  #if (${item.locatorType} == "css")
    private val ${item.fieldName} by cssSelectors("${item.css}")
  #elseif (${item.locatorType} == "xpath")
    private val ${item.fieldName} by xPaths("${item.xpath}")
  #elseif (${item.locatorType} == "name")
    private val ${item.fieldName} by names("${item.name}")
  #elseif (${item.locatorType} == "tag-with-classes")
    private val ${item.fieldName} by classNames("${item.tagWithClasses}")
  #elseif (${item.locatorType} == "data")
    private val ${item.fieldName} by dataTests("${item.dataAttributeValue}")
  #elseif (${item.locatorType} == "text")
    private val ${item.fieldName} by xPaths("//*[text()='${item.text}']")
  #else (${item.locatorType} == "aria-label")
    private val ${item.fieldName} by cssSelectors("[aria-label='${item.ariaLabel}']")
  #end
#else
  #if (${item.locatorType} == "css")
    private val ${item.fieldName} by cssSelector("${item.css}")
  #elseif (${item.locatorType} == "xpath")
    private val ${item.fieldName} by xPath("${item.xpath}")
  #elseif (${item.locatorType} == "id")
    private val ${item.fieldName} by id("${item.id}")
  #elseif (${item.locatorType} == "name")
    private val ${item.fieldName} by name("${item.name}")
  #elseif (${item.locatorType} == "tag-with-classes")
    private val ${item.fieldName} by className("${item.tagWithClasses}")
  #elseif (${item.locatorType} == "data")
    private val ${item.fieldName} by dataTest("${item.dataAttributeValue}")
  #elseif (${item.locatorType} == "text")
    private val ${item.fieldName} by xPath("//*[text()='${item.text}']")
  #else (${item.locatorType} == "aria-label")
    private val ${item.fieldName} by cssSelector("[aria-label='${item.ariaLabel}']")
  #end
#end

Configuration steps​

  1. Open Settings.
  2. Navigate to Selenium Page Object templates.
  3. Replace the existing templates with the provided code.
  4. Click the "OK" button to save the changes and close the Settings panel.

From now on, the Web UI Test Automation plugin will generate properties using Kolibrium's locator delegate functions in your Page Object classes.

Usage workflow​

  1. Create a new Selenium Page Object

    • Language: Kotlin
    • Framework: Custom

  2. Use the Web Inspector

    • Select an element
    • Right-click the element in the Locators Evaluator
    • Choose "Add Element to Code"

The following video demonstrates all the steps mentioned in this guide.