To compose several actions into a single method, declare them in a
compose array. They execute in the order they're declared.
loginForm page object composes three actions into a
- Clear and set a username.
- Clear and set a password.
- Click the Log In button.
First, model the basic elements the way you would in any page object.
Because our form is inside a web component, we enclose the elements in a
shadow object. Don't forget to set the correct
type for each basic element so that it can access basic actions in test code. User input fields are
editable, and the button is
clickable. We set
"public": true to get the element and assert its value, but it isn't required to compose a method.
Next, declare a
methods array at the root of the page object.
methods, declare an object with
compose properties. The
name becomes the name of the method. The value isn't transformed into a getter. If the
login, the test calls
Add each action as an object in a
compose array. Each object must have an
element property and an
apply property. The value of
element must match the value of the basic element's
name property. The value of
apply is the method that operates on the element.
For a basic element,
apply can be any basic action that the element supports. In the
loginForm page object, we apply
clearAndType to both
input elements. To pass parameters to an applied method, declare an
args array. Each element in an
args array must have a
Tip: For a custom element, the value of
apply can be any of its public methods.
Call the compose method from the page object root. Our test code calls the compose method,
loginFormRoot. The actions execute in the sequence declared in the page object.
Click Run Test.