Element Selection Using the Testing Playground

Learn how to select elements using the testing playground.

We'll cover the following

What is the testing playground?

The testing playground tool makes it easier to select HTML elements using the WebdriverIO Testing Library query methods. Typically, when we build out element selectors in our test cases, we have to learn which query method to use through trial and error. However, when we use the testing playground tool, we can quickly determine how adding and removing specific attributes changes how we can select an element.

This tool can be helpful when we are trying to understand the most user-inclusive way to select an element. For example, depending on the HTML markup, one element may be best selected using the text content. In contrast, it may be best to select another element based on its ARIA role. It can also help us understand why an element isn't matched to any Webdriver Testing Library query method. Finally, by using the tool to play around with the attributes of an element, we can learn what WebdriverIO Testing Library is looking for when it selects an element.

Getting started

The most common way to start is by installing the Chrome extension. The extension allows us to interact with any application page inside the browser. See the appendix for installation steps. Another common way to use the tool is with the standalone version. We can access the standalone version via the website or embed the tool inside a web page. We can use the tool using the following steps:

  1. First, enter any HTML markup in the markup window pane.

  2. Second, hover over the preview window pane elements to automatically see query method suggestions.

The application below includes the standalone version:

Get hands-on with 1200+ tech skills courses.