Hello World!
This tutorial outlines the mental model of creating a page object for a component.
A page object exposes an API that selects and operates on UI elements that you want to test.
Inspect the DOM, Decide What to Test
First let's look at the DOM and decide what to test. Then we model those elements in JSON.
Select Hello, World!, right-click, and select Inspect. You can also click the DOM Tree Viewer.
<body>
<div class="main">
<h1>Hello, <span class="world">🌍 🌏 🌎</span>!</h1>
</div>
</body>
In JSON, Model the DOM You Want to Test
As a simple test, let's assert that the world emojis exists. In the top-left panel, look at our JSON page object, helloWorld.utam.json. We don't have to declare all the DOM in JSON, only what we want to test. In this case, the page object only needs to declare the span element that contains the world emojis.
Select an Element
Each element needs a name and a selector. In this case, we use a CSS class selector, .world.
For web page objects, UTAM supports CSS selectors only. (Mobile page objects support other selectors.)
Why CSS? CSS selector engines are natively supported by all browsers and are governed by specifications.
Generate a Method
Now that we have our DOM modeled, we need to ask UTAM to generate a public method that we can use in a test to select the span element.
In JSON, we simply add "public": true to the element. The name of the method is get<Name>, where <Name> is the value of the name property. The method returns an instance of the selected element, in this case, span.
To see the UTAM compiler in action, watch the top-right panel and change the JSON from "public": true to "public": false. The getWorld() method disappears and reappears when you change it back to true.
Call the Method in Test Code
In test code, call getWorld() from an instance of the page object.
Click Run Test.