Real-World Widgets
Practice automating custom components you meet in real products: OTP boxes, tag inputs and star ratings.
1. OTP Verification
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
Your code is 482915
2. Tags Input
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
0 tags
3. Star Rating
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
0/5
4. Solutions
Try the challenges yourself first. Reference solutions are hidden until you ask for them.
About this Real-World Widgets page
OTP input automation is the practice of scripting split one-digit code boxes, along with similar custom widgets like tag inputs and star ratings, in a browser test. These widgets move focus, listen to key and paste events, or use non-input elements, so you type digits one at a time or use keyboard APIs. This free page lets you practice all three with pass/fail checks.
Frequently asked questions
How do you automate a six-digit OTP input with separate boxes in Playwright?
Click the first box and call page.keyboard.type('123456'), since focus usually jumps to the next box on each key. If the widget supports paste, dispatch a paste event instead. Alternatively use locator.pressSequentially() on the first box. Then assert each box holds one digit.
Why does sendKeys or fill not work on OTP boxes in Selenium?
Many OTP widgets listen to keydown or input events and move focus themselves. Sending the whole code to one box can drop digits. In Selenium 4, send one character per box, or send keys to the active element so the widget's own focus logic runs between keystrokes.
How do you test a tag input field with automation?
Type a value, press Enter or a comma, then assert a new tag element appears. Test the negative cases as well: duplicate tags, empty input, and removal by the remove button or Backspace. Locate tags by role or text, not by index.
How do you click a star rating in Cypress or Playwright?
Locate the star by its accessible name, label or data attribute, then click it and assert the selected count or aria-checked state. Star widgets often use spans or SVGs rather than inputs, so check the rendered state, not an input value.
Is this widgets practice page free and does it need a signup?
Yes, it is free, needs no signup, and runs in your browser. Each task has positive and negative test cases, a pass/fail result box and per-task hints, with reference solutions in Playwright, Selenium Java, Selenium Python and Cypress.
Free developer tools on Randomly.online
QA Playground is part of Randomly.online. These tools help while you write and debug tests: