Central Perk Staff Login · Login Form
A classic form-auth flow: type credentials, submit, assert the flash message and URL change into the staff room — then log out again.
Only staff may touch the orange couch. Log in, pour coffee, log out.
Login Form is an easy Forms & Inputs challenge on Fun UI Playground. A classic form-auth flow: type credentials, submit, assert the flash message and URL change into the staff room — then log out again. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “login-”, and the techniques it exercises are type into inputs, submit a form, assert flash message, assert URL change.
At a glance
- Category
- Forms & Inputs
- Difficulty
- easy
- Teaches
- type into inputs · submit a form · assert flash message · assert URL change
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixedlogin-
Selectors on this page
| Locator | What it is |
|---|---|
#login-username #login-password #login-submit | Inputs: #login-username, #login-password · submit: #login-submit |
[data-testid="flash"] | Outcome lands in the site-wide flash: [data-testid="flash"] with .flash-success or .flash-error |
#login-logout | Success navigates to /challenges/login/secure — assert the URL and the Logout button (#login-logout) |
Frequently asked questions
How do I automate a login form and assert the result?
Fill #login-username and #login-password, click #login-submit, then assert two things: the URL contains /challenges/login/secure, and the site-wide flash [data-testid="flash"] carries .flash-success. Asserting only that the click happened is what lets a login test pass against a broken form.
Why does a username with surrounding whitespace still log in?
Because the username is trimmed before checking and the password is not. The asymmetry is deliberate: it mirrors real sign-in forms and gives you a case where a copy-pasted credential succeeds for one field and fails for the other.
More Forms & Inputs
- Starter Lab Team Picker · Checkboxes & Radios
- The Sorting Ceremony · Dropdowns
- Barista Keypad · Inputs & Key Presses
- The Dundies · JavaScript Alerts
- Screenplay Submissions · File Upload
- The Apothecary Index · Autocomplete Combobox
- Time Circuits · Date Picker
- Customs Declaration · Native Form Validation
- All Forms & Inputs challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.