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.

The root of a page object can contain these properties:

• elements (Optional) Array. A nested tree of element objects. An element object can be one of these types:
  • Basic element—A UI element required for user interaction or to scope another element.
  • Custom element—A nested page object.
  • Container element—A slot or div into which other components are injected.
• methods (Optional) Array. Each object declares a public method. The only supported method type is compose. A compose method combines several element actions, like clearing a text field (clear) and entering a value (setText).
• root (Optional) Boolean. To load a page object from a test, set root to true and add a selector element that points to its most outer (root) element. If a component can be loaded only inside its immediate parent (for example, a navigation item can be loaded only inside a navigation bar), don’t mark it as root.
• selector (Optional) Object. If root is true, add a selector that points to its most outer (root) element. The root selector must match the HTML tag name. See selector.
• shadow (Optional) Object. A shadow boundary at the root of the page object. Contains only an elements property, which is a nested tree of objects. A page object can have elements scoped both inside and outside its shadow root.
• exposeRootElement (Optional) Boolean. See Actionable Root.
• type (Optional) String. See Actionable Root.
• description (Optional) String or Object. See Page Object Description.
• metadata (Optional) Object. See Page Object Metadata.
• platform (Optional) String. See Platform Context.
• beforeLoad (Optional) Array. See beforeLoad.

Here’s a sample outline of a page object.

1{
2  "elements": [],
3  "methods": [],
4  "shadow": {
5    "elements": []
6  },
7  "root": true,
8  "selector": {
9    "css": "one-record-home"
10  }
11}

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

• exposeRootElement Boolean. If set to true, UTAM creates a public method that returns an instance of the element with the given type. The name of the getter is getRoot.
• type (Optional) See basic element types.

1{
2  "exposeRootElement": true,
3  "type": ["editable"],
4  "elements": [],
5  "methods": []
6}

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.

1async getRoot() {
2    const driver = this.driver;
3    const root = await this.getRootElement();
4    return new _EditableUtamElement(driver, root);
5}