Widgets
Accordion, auto-complete, date picker, slider, progress bar, tabs, tooltips and menus.
Accordion
Three collapsible sections. Only one stays open at a time, so your test has to check both the open and the closed state.
Auto Complete
Type to filter suggestions. One field takes a single value, the other collects several values as removable chips.
Date Picker
A native date input, a native date-and-time input, and a custom calendar built from buttons – the custom one is what most real applications use.
Slider
A range input you can move with the keyboard or the mouse, and a custom slider that only responds to dragging.
Progress Bar
Start it, stop it halfway, reset it. A good exercise for waiting until a value reaches a target instead of sleeping.
Tabs
Four tabs, one of them disabled. Only the selected panel is in the DOM as visible content.
Tool Tips
Tooltips that only appear while the mouse is over the element – you need Actions.moveToElement or hover().
Menu
A menu bar with sub-menus that open on hover, including a third level. Classic Actions chaining practice.
Every control has an id and a test id that never change between builds.
Each page lists the assertions worth writing, including the cases people forget.
Compare your script with a working Selenium (Java) and Playwright (TypeScript) version.