Practice sandbox

A safe place to click around

Fourteen exercises, from the basics to the ones that actually break flows. Everything here is real, interactive, and completely harmless — no accounts are created, no messages are sent, nothing is saved anywhere. Log in, fill a form, sort a table, then work up to waiting on slow content, switching to a new tab, looping through pages and surviving elements whose id changes every time you touch them. Break it as often as you like — a reload puts it back exactly the way it started.

▶ See the scripted demo instead

1 Login form

Classic username/password automation target — try filling and submitting it.

2 Support request

A richer form: text fields, a dropdown, radio buttons, a slider, and a textarea.

3 Mini shop

🛒 Cart: 0 item(s) · $0.00

Loop over a list of items and click a button on each one — a very common automation pattern.

🖱️

Wireless Mouse

$19.99

⌨️

Mechanical Keyboard

$59.00

🔌

USB-C Hub

$34.50

📷

Webcam 1080p

$45.00

4 Sortable data table

Click a column header to sort, tick rows, then delete the selected ones — good for scraping and bulk-action practice.

Employee ▾ Department ▾ Orders ▾
Ada LovelaceEngineering128
Grace HopperEngineering342
Alan TuringResearch87
Katherine JohnsonResearch215
Margaret HamiltonEngineering410

5 Tabbed panel

Practice clicking between sections that show and hide content.

Name: Ada Lovelace

Role: Analytical Engine Operator

Plan: Pro — $12/month

Terms & Conditions

This is a fake modal for practice purposes. There is nothing to actually agree to — click Accept to close it.

7 Multi-step wizard

Great for practicing flows with Next/Back buttons and a few steps in a row.

1 2 3

All set! Review and finish:

8 Embedded page (iframe)

Switch into the iframe, fill in the form, then return to the main page. A common automation scenario.

9 Drag and drop

Drag a card out of "To do" and drop it onto "Done" — a common pattern in kanban boards and task lists.

To do

🎨 Design mockups
🧪 Write tests
🐞 Fix bug #42

Done

Drag a card from "To do" into "Done".

10 Waiting for slow content

The hardest part of automation is not clicking — it's knowing when to click. These are the two waits you keep running into, and they are not the same problem: one element isn't there yet, the other is there but won't respond.

A · It doesn't exist yet

The list below is only created three seconds after you ask for it. Until then there is nothing on the page to select.

Nothing loaded yet.

B · It exists but is disabled

This button is on the page from the start, but it ignores clicks for four seconds after you arm it.

11 New tabs and windows

Both of these open a second tab. The flow then has to switch to it, do something there, and come back — that's the Open Tab / Switch Tab / Close Tab trio in Portal17 Studio.

Open a link in a new tab ↗

12 Paginated results

Twelve records spread over three pages. Scraping all of them means looping: read the page, click Next, repeat until Next is disabled.

OrderCustomerTotal
Page 1 of 3

13 Menus that need hovering

This menu only opens while the pointer is over it, and the second level only opens on top of that. Clicking straight at the coordinates of a buried item won't work — the flow has to hover its way in.

14 Unstable selectors

This button gets a brand new random id every time you press it, and the switch below shoves it down the page. Both break flows that were recorded against a fragile selector — good practice for picking a stable one.

Current id: a7f3c91e