microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-15 22:22:53 +03:00
Code Issues Projects Releases Wiki Activity
438d2761ff
playwright/docs/input.md
Pavel 438d2761ff docs(input): minor edits
2020-04-15 11:01:27 -07:00

7.1 KiB
Raw Blame History

Input cheat sheet

Fill out the form, enter text

await page.fill('#name', 'Peter');

This is the easiest way to fill out the form fields. It focuses the element and triggers an input event with the entered text. It works for <input>, <textarea> and [contenteditable] elements.

Variations

// <input id=date type=date>
await page.fill('#date', '2020-02-02');

// <input id=date type=time>
await page.fill('#time', '13-15');

// <input id=local type=datetime-local>
await page.fill('#local', '2020-03-02T05:15');

API reference

Check / uncheck the checkbox

// <input id=agree type=checkbox></input>
await page.check('#agree');

// <label id=subscribe-label for=subscribe><input id=subscribe type=checkbox checked></input></label>
await page.uncheck('#subscribe-label');

This is the easiest way to check and uncheck a checkbox. This method can be used on the input[type=checkbox] and on the label associated with that input.

API reference

Select an option

// <select id=colors>
//   <option value="red">Red</option>
//   <option value="green">Green</option>
//   <option value="blue">Blue</option>
// </select>

await page.selectOption('select#colors', 'green');

Selects one or multiple options in the <select> element. You can specify option value, label or elementHandle to select. Multiple options can be selected.

Variations

// Single selection matching the value
page.selectOption('select#colors', 'blue');

// Single selection matching the label
page.selectOption('select#colors', { label: 'Blue' });

// Multiple selected items
page.selectOption('select#colors', ['red', 'green', 'blue']);

// Select the option element handle
const option = await page.$('#best-option");
page.selectOption('select#colors', option);

API reference

Type character by character

// <textarea id=area></textarea>
await page.type('#area', 'Hello World!');

Sometimes it is important to type into the focused field character by character, as if it was the user with the real keyboard. This method will emit all the necessary keyboard events, with all the keydown, keyup, keypress events in place. You can even specify the optional delay between the key presses to simulate real user behavior.

API reference

Press a key, enter keyboard shortcut

// <button id=submit></button>
await page.press('#submit', 'Enter');

// <input id=name></input>
await page.press('#name', 'Control+ArrowRight');

// <input id=value></input>
await page.press('#value', '$');

This method focuses the selected element and produces a single keystroke. It accepts the logical key names that are emitted in the keyboardEvent.key property of the keyboard events:

Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape,
ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrayRight,
ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ, etc.

  • You can alternatively specify a single character you'd like to produce such as "a" or "#".

  • Following modification shortcuts are also suported: Shift, Control, Alt, Meta.

Variations

// <input id=name></input>
await page.press('#name', '$');

Simple version produces a single character. This character is case-sensitive, so "a" and "A" will produce different results.

// <input id=name></input>
await page.press('#name', 'Shift+A');

// <input id=name></input>
await page.press('#name', 'Shift+ArrowLeft');

Shortcuts such as "Control+o" or "Control+Shift+T" are supported as well. When speficied with the modifier, modifier is pressed and being held while the subsequent key is being pressed.

Note that you still need to specify the capital A in Shift-A to produce the capital character. Shift-a produces a lower-case one as if you had the CapsLock toggled.

API reference