Testing Playground

About Testing Playground

Testing Playground is a browser-based tool for writing and testing DOM element queries against sample or live markup. It renders an interactive form example and lets users query elements using accessible queries such as getByRole, LabelText, PlaceholderText, and Text, modeled on Testing Library conventions.

The tool inspects a given HTML structure and surfaces suggested queries for each element, ranking them by accessibility and specificity, and also lists semantic queries (AltText, Title) and test ID-based queries. It includes a settings option and displays accessible roles for elements on the page.

It is aimed at developers writing automated UI tests, particularly those using Testing Library-style APIs, who want to identify the most accessible and robust selector for a given element before writing test code.

Key features

• Interactive playground for practicing Testing Library queries on live DOM elements
• Displays accessible roles for elements in the markup
• Suggests optimal queries (e.g. getByRole with name option) for selected elements
• Shows query priority order: accessible queries, semantic queries, and test IDs

Frequently asked questions