Page Object Root

Any page object that is unique inside the current browser view can be used as a root. A root page object can be loaded directly inside the browser.

Root Properties

The root of a page object can contain these properties:

Here's a sample outline of a page object.

    "elements": [],
    "methods": [],
    "shadow": {
        "elements": []
    "root": true,
    "selector": {
        "css": "one-record-home"

Actionable Root Element

To make the root element actionable, expose it via a public method. Add these properties to the root element:

    "exposeRootElement": true,
    "type": ["editable"],
    "elements": [],
    "methods": []

The UTAM generator converts this JSON into a public method. The method returns an instance of the page object root element for the test to interact with.

async getRoot() {
    const driver = this.driver;
    const root = await this.getRootElement();
    return new _EditableUtamElement(driver, root);

Note: The word root is reserved and can't be used as an element name.