OTP input

Type a one-time code into a row of boxes that take one character each.

Only inWarpX Browser

Many sign-in and verification pages split a code into a row of boxes, usually six, and move the focus as each one fills. OTP input finds the whole row from one selector and puts one character of the code into each box, in order. It also fills a single field that takes the whole code.

The OTP input block's settings, filled in as in the example below.

Settings

Element Selector: The boxes, one of them, or the element that holds them. If it finds one box and the fields beside it all take one character, those are filled too. If it finds a container, the fields inside it are used. Write a CSS selector or an XPath: a value that starts with /, (, @ or id( is read as XPath. The target button lets you click the element in the profile's browser, inside iframes and shadow roots too, and the double tick checks that the selector finds something.
Examplediv.otp-inputs input
Mark elementwhen the selector is CSS, not XPath: Tags each element the block acts on, and skips tagged elements the next time this block runs, so a loop moves on to the next match. Only offered for a CSS selector.
ExampleUnchecked
Wait for selector: Keeps looking for the element until it appears or the timeout runs out. Off, the block looks once.
ExampleChecked
Selector timeout (ms)when Wait for selector is on: How long to keep looking, in milliseconds. The default is 5000.
Example10000
OTP code: The code, or a reference to where it is kept, such as {{variables.otp}} from Get OTP. Spaces around it are removed. Characters beyond the last box are dropped.
Example{{variables.otp}}
Delay between boxes (ms): How long to wait after each box, in milliseconds. Raise it to 100–300 if the page loses characters while it moves the focus. When the selector finds one field for the whole code, this is the pause between characters instead.
Example100
Clear each box first: Empties each box before its character goes in. On by default.
ExampleChecked
Delay time (ms): How long to wait after the block finishes, in milliseconds. Write a range such as 1000,3000 to pick a random wait in it each run.
Example1000

Every block also has the shared block settings — a description, Disable block and what to do on an error, and Finding elements explains selectors in more depth. Fields that take text accept data from earlier blocks.

What it hands on

Writes nothing to the table or variables, and leaves by its single output. It fails with element-not-found when the selector finds nothing, otp-value-empty when OTP code is empty, and otp-inputs-not-found when what it found holds no field it can type into.

Example: Enter the two-factor code at sign-in

Start
Open URL
Get OTP
OTP input
Click element

Where OTP input sits in the example workflow.

After the steps that enter the email and password, add Get OTP. Put the account's secret in OTP secret, tick Assign to variable and name it otp.
Add OTP input. Click the target button next to Element Selector and click the first code box, or type div.otp-inputs input.
Tick Wait for selector and set Selector timeout (ms) to 10000.
Set OTP code to {{variables.otp}} and Delay between boxes (ms) to 100.
Add Click element with //button[contains(., "Verify")] to send the code.
Run the workflow. Each box gets one digit, and the form is submitted.

Good to know

There is no Multiple option: the block always reads every match, because the selector that finds one box finds the whole row. If it catches more than one row, only the first row is filled.
If the page redraws the boxes while they are being filled, the block looks them up again and carries on.
Characters are set by script with the page's input events, not typed at a human pace. Human Emulation is not offered on this block.
A code from Get OTP is only valid for a short time. Put this block straight after it.
Boxes inside an iframe work: pick them with the target button, or use Switch frame first.

OTP input

Settings

What it hands on

Example: Enter the two-factor code at sign-in

Good to know

See also