--- schema_version: "1" id: 9cb416ce0848672a28675ff67f6056384caf825f80dee1a373e24637ee14cb89 title: Tutorials collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/lwc/utam/guide/tutorial-playground.md canonical_url: https://developer.salesforce.com/docs/platform/utam/guide/tutorial-playground.html source_site: developer.salesforce.com content_type: documentation content_hash: e32722fde41b1d9cd290e46ac23332bd91d428ca6087a9d9122470753471e4a5 products: - UI Test Automation Model - lwc --- # Tutorials Learn to write UTAM tests with live-coding tutorials on the [UTAM.dev tutorials site](https://utam.dev/tutorial/introduction). The tutorials teach you how to write JSON page objects for your application components, as well as test code that calls the page object methods. Tutorial tests are written in JavaScript. ## Tutorial Pages Each tutorial includes instructions and live coding panels. - [Introduction](https://utam.dev/tutorial/introduction) - : Start here to complete the full tutorial experience in order. - [Hello World](https://utam.dev/tutorial/hello-world) - : Outline the mental model of creating a page object for a component. - [Write a Test](http://utam.dev/tutorial/write-tests) - : Use the same HTML and JSON as the Hello World tutorial to explain the basics of writing a test with UTAM code. - [Root Page Objects](https://utam.dev/tutorial/root) - : Explain the importance of the `root` page object. - [Basic Elements](https://utam.dev/tutorial/basic-element) - : Break down the JSON page object as a tree of elements that map to the DOM of the corresponding page. - [Web Components and Shadow DOM](https://utam.dev/tutorial/web-components) - : Learn how to cross a shadow boundary using UTAM. - [Simple Selectors](https://utam.dev/tutorial/simple-selectors) - : Learn how to select things in a page with UTAM JSON grammar. - [Selector String Parameter](https://utam.dev/tutorial/selector-param-string) - : Write a CSS selector that accepts a string dynamically. - [Selector Number Parameter](https://utam.dev/tutorial/selector-param-number) - : Write a CSS selector that accepts a number dynamically. - [Basic Actions](https://utam.dev/tutorial/basic-actions) - : Call the basic actions API to get, set, and wait for UI element state without walking the DOM. - [Editable Actions](https://utam.dev/tutorial/editable-actions) - : Create an element with `"type": "editable"` that has access to basic action APIs that can set and clear text. - [Clickable Actions](https://utam.dev/tutorial/clickable-actions) - : Test an app with clickable buttons. - [Lists](https://utam.dev/tutorial/lists) - : Return all the elements from a list. - [Get List Item by Index](https://utam.dev/tutorial/list-index) - : Get a list item by its index. - [Get List Items by Pattern](https://utam.dev/tutorial/list-pattern) - : Use a pattern to select items from a list. - [Get List Items by Attribute](https://utam.dev/tutorial/list-attribute) - : Use a selector to target specific elements you need in a test. - [Filter a List of Elements Using `stringEquals`](https://utam.dev/tutorial/filter-elements-string-equals) - : When you can't use a selector to get the elements you need, use an element filter. - [Filter a List of Elements Using `stringContains`](https://utam.dev/tutorial/filter-elements-string-contains) - : When you can't use a selector to get the elements you need, use an element filter. - [Filter a List of Elements Using `findFirst`](https://utam.dev/tutorial/filter-elements-find-first) - : Return only the first filtered element. - [Filter a List of Elements Using `isTrue`](https://utam.dev/tutorial/filter-elements-is-true) - : Use the `isTrue` matcher to filter a list of Trailhead units to show only visible (incomplete) units. - [Custom Elements](https://utam.dev/tutorial/custom-element) - : Test page objects that are composed of other page objects. - [Filter Custom Elements](https://utam.dev/tutorial/filter-custom-elements) - : Use declarative filtering in a JSON page object to allow a test to get a list of contacts filtered by a search string in the contact's title. This use case builds on the [Custom Elements](https://utam.dev/tutorial/custom-element) and [Filter a List of Elements Using `stringContains`](https://utam.dev/tutorial/filter-custom-elements) tutorials. - [Nullable Elements](https://utam.dev/tutorial/nullable-elements) - : Use a nullable element for an element that isn't always present on the page. - [Container Elements](https://utam.dev/tutorial/container-element) - : Select a component with a `slot` or a `div` acting as a container for other components. - [Compose Method](https://utam.dev/tutorial/compose-method) - : Compose several actions into a single method by declaring them in a `compose` array. - [Compose Custom Actions](https://utam.dev/tutorial/compose-custom) - : Combine several actions applied to the basic elements into one composed method. - [Compose vs. Expose Root Element](https://utam.dev/tutorial/compose-root) - : Expose an element's root as a public editable element or declare compose methods to set and get the value. - [Compose Argument References](https://utam.dev/tutorial/compose-argument-references) - : Reuse an argument in multiple statements in a compose method. - [Chain Compose Statements](https://utam.dev/tutorial/compose-chain) - : Chain multiple compose statements in a test. - [Imperative Extensions](https://utam.dev/tutorial/compose-utility) - : Create reusable utility code to address complex use cases that aren't supported in UTAM's JSON grammar. - [Explicit Wait](https://utam.dev/tutorial/wait-for) - : Simulate a UI test that waits for an element to appear as the result of a user action. - [Wait for an Element Before Loading](https://utam.dev/tutorial/load-element-contains) - : Intercept the `load` method and override it by adding an explicit wait for an element to be rendered. - [Todo App](https://utam.dev/tutorial/todo-app) - : Experiment writing UTAM page objects and test code against a real app.