Welcome to the UTAM tutorials. The tutorials teach you how to write JSON page objects for your application components. A page object defines a test interface for a component.
Writing query selectors for end-to-end tests doesn't scale because when the DOM structure changes, query selectors break. A large application can have a lot of query selectors, which means a lot of time fixing tests.
UI Test Automation Model (UTAM) makes it easier to write end-to-end UI tests by abstracting page object code into JSON. Each application component has a corresponding JSON page object that declares its test interface.
A page object encapsulates the capabilities of a UI component into an interface that test code can interact with. The runnable test code UTAM creates expects certain things in the UI (like clearing or setting text). UTAM abstracts the DOM away from the test, insulating test expectations from implementation details like shadow DOM.
About the Tutorials
Each tutorial includes live coding panels.
View the DOM to plan your page object. In the bottom-right panel, select DOM Tree Viewer.
Declare a JSON page object in the top-left panel using the UTAM grammar. The page object should describe the UI of the page in the bottom-right panel. A page object doesn't need to describe the entire component, just the parts you want to test.
Write a test in the bottom-left panel that runs against the page in the bottom-right panel. Your test can use any Node.js assertions, like
assert.ok();. You can also add a
debuggerstatement and use Developer Tools to troubleshoot.
Run the test. Under the bottom-left panel, click Run Test. The results print under the panel.
On the next page, we walk through the code.