Introduction

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.

Defining page objects in JSON allows UTAM to create runnable test code in multiple programming languages, like Java and JavaScript.

The tutorials teach you how to write test code that calls the page object methods. Tutorial tests are written in JavaScript.

About UTAM

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.

  • View the JavaScript types generated by the UTAM compiler in the top-right panel. As you edit JSON, the compiler generates the types to use in your test code. It also generates a JavaScript module.

  • 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 debugger statement 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.

Next