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 editable.
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.
In input.utam.json, the compose method needs to apply clearAndType and write to the element so we set "type": "editable" for the root element.
Test
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.
await nameInput.setValue('Joe');
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 getRoot on nameInput because exposeRootElement is set to true in input.utam.json.
Finally, the test calls calls the getValue compose method to assert that the value was set correctly.