Container Elements
A component with a slot or a div can act as a container for other components. As the component author, you don't know what type of component will be injected into the container, which means you need a special way to select the content.
The <example-tabset> component provides a placeholder for tab content. In this example, the tab content includes the tab labels and the text that displays when clicked.
<div class="contentWrapper">
<template for:each="{tabs}" for:item="tab">
<div key="{tab.id}" class="content">
<!-- Content is injected here by the developer -->
</div>
</template>
</div>
Since we don't know in advance what will be injected, in the page object we declare two public container elements: one to get all tabs, and one to get the active tab. The format of the JSON is the same as it is for basic elements and custom elements, except for "type": "container".
The selector for the tabs container is div.content > *. It uses an asterisk because we don't know what will be injected; we only know that it's a direct descendant of div.content.
The selector for the tabs container also has "returnAll": true, which generates a method that returns an array.
UTAM generates methods that accept the type of the page object being loaded as a parameter. In this tutorial, we declare a second page object called tabcontent.utam.json for the content of a tab. We're not testing the content of the tabs so tabcontent.utam.json is empty.
The generated code finds elements using the selectors provided inside the containers. It uses those elements as the root of the page object of the given type. Even though you can see the compiled code in the top-right panel, we include it here with comments.
// Returns an array of page objects because of "returnAll" inside the selector.
getTabs<T extends _UtamBasePageObject>(ContainerCtor: _ContainerCtor<T>): Promise<T[]>;
// Returns a single page object.
getActiveTab<T extends _UtamBasePageObject>(ContainerCtor: _ContainerCtor<T>): Promise<T>;
async getTabs(ContainerCtor) {
const driver = this.driver;
const root = await this.getRootElement();
// The selector from the container element is injected as a page object root.
// This line finds elements _By.css(`div.content > *`); inside its parent.
let elements = await _utam_get_tabss(driver, root, );
elements = elements.map(function _createElement(element) {
return new ContainerCtor(driver, element);
});
return elements;
}
async getActiveTab(ContainerCtor) {
const driver = this.driver;
const root = await this.getRootElement();
// The selector from the container element is injected as a page object root.
// This line finds an element _By.css(`div.content [class*='tabvisible']`); inside its parent.
let element = await _utam_get_activeTab(driver, root, );
element = new ContainerCtor(driver, element);
return element;
}
Click Run Test.