Compose Versus Expose root Element
For a test to enter text or get a value from an element, the input page object needs to either expose its root element as a public editable element or declare compose methods to set and get the value.
We recommend using compose methods instead of exposing elements because compose methods hide internal structure. However, both options are possible. If you use a compose method, you have less exposed API and more freedom to change your page object structure without breaking tests.
For the sake of this example, let's assume that a basic form uses the
lightning-input-name base component instead of the standard HTML input and that the input box is at the root of the component.
Expose root element
To make the root element in
input.utam.json editable, add
"exposeRootElement": true at the root of the page object and set its type to
The UTAM compiler generates this method.
getRoot(): Promise<(_BaseUtamElement & _EditableUtamElement)>;
Compose root element action
A compose method can interact with the root element by referencing it as
"element": "root" in the compose method statement.
input.utam.json, the compose method needs to apply
clearAndType and write to the element so we set
"type": "editable" for the root element.
The test uses both compose methods and a public root so that you can compare the test code used for each approach.
The test code gets the first input element, and calls the
setValue compose method.
The test code also shows how to use the exposed root element by calling
clearAndType to enter a string.
await (await nameInput.getRoot()).clearAndType('Jane');
We can call
exposeRootElement is set to
Finally, the test calls calls the
getValue compose method to assert that the value was set correctly.