Playwright can interact with HTML Input elements such as text inputs, checkboxes, radio buttons, select options, mouse clicks, type characters, keys and shortcuts as well as upload files and focus elements.
Text inputUsing locator.fill() 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.
page.get_by_role("textbox").fill("Peter")
page.get_by_label("Birth date").fill("2020-02-02")
page.get_by_label("Appointment time").fill("13:15")
page.get_by_label("Local time").fill("2020-03-02T05:15")
await page.get_by_role("textbox").fill("Peter")
await page.get_by_label("Birth date").fill("2020-02-02")
await page.get_by_label("Appointment time").fill("13:15")
await page.get_by_label("Local time").fill("2020-03-02T05:15")
Using locator.set_checked() is the easiest way to check and uncheck a checkbox or a radio button. This method can be used with input[type=checkbox], input[type=radio] and [role=checkbox] elements.
page.get_by_label('I agree to the terms above').check()
expect(page.get_by_label('Subscribe to newsletter')).to_be_checked()
page.get_by_label('XL').check()
await page.get_by_label('I agree to the terms above').check()
await expect(page.get_by_label('Subscribe to newsletter')).to_be_checked()
await page.get_by_label('XL').check()
Selects one or multiple options in the <select> element with locator.select_option(). You can specify option value, or label to select. Multiple options can be selected.
page.get_by_label('Choose a color').select_option('blue')
page.get_by_label('Choose a color').select_option(label='Blue')
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])
await page.get_by_label('Choose a color').select_option('blue')
await page.get_by_label('Choose a color').select_option(label='Blue')
await page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])
Performs a simple human click.
page.get_by_role("button").click()
page.get_by_text("Item").dblclick()
page.get_by_text("Item").click(button="right")
page.get_by_text("Item").click(modifiers=["Shift"])
page.get_by_text("Item").hover()
page.get_by_text("Item").click(position={ "x": 0, "y": 0})
await page.get_by_role("button").click()
await page.get_by_text("Item").dblclick()
await page.get_by_text("Item").click(button="right")
await page.get_by_text("Item").click(modifiers=["Shift"])
await page.get_by_text("Item").click(modifiers=["ControlOrMeta"])
await page.get_by_text("Item").hover()
await page.get_by_text("Item").click(position={ "x": 0, "y": 0})
Under the hood, this and other pointer-related methods:
display:none, no visibility:hiddenSometimes, apps use non-trivial logic where hovering the element overlays it with another element that intercepts the click. This behavior is indistinguishable from a bug where element gets covered and the click is dispatched elsewhere. If you know this is taking place, you can bypass the actionability checks and force the click:
page.get_by_role("button").click(force=True)
await page.get_by_role("button").click(force=True)
If you are not interested in testing your app under the real conditions and want to simulate the click by any means possible, you can trigger the HTMLElement.click() behavior via simply dispatching a click event on the element with locator.dispatch_event():
page.get_by_role("button").dispatch_event('click')
await page.get_by_role("button").dispatch_event('click')
caution
Most of the time, you should input text with locator.fill(). See the Text input section above. You only need to type characters if there is special keyboard handling on the page.
Type into the field character by character, as if it was a user with a real keyboard with locator.press_sequentially().
page.locator('#area').press_sequentially('Hello World!')
await page.locator('#area').press_sequentially('Hello World!')
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.
page.get_by_text("Submit").press("Enter")
page.get_by_role("textbox").press("Control+ArrowRight")
page.get_by_role("textbox").press("$")
await page.get_by_text("Submit").press("Enter")
await page.get_by_role("textbox").press("Control+ArrowRight")
await page.get_by_role("textbox").press("$")
The locator.press() 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, ArrowRight,
ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ, etc.
"a" or "#".Shift, Control, Alt, Meta.Simple version produces a single character. This character is case-sensitive, so "a" and "A" will produce different results.
page.locator('#name').press('Shift+A')
page.locator('#name').press('Shift+ArrowLeft')
await page.locator('#name').press('Shift+A')
await page.locator('#name').press('Shift+ArrowLeft')
Shortcuts such as "Control+o" or "Control+Shift+T" are supported as well. When specified 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.
You can select input files for upload using the locator.set_input_files() method. It expects first argument to point to an input element with the type "file". Multiple files can be passed in the array. If some of the file paths are relative, they are resolved relative to the current working directory. Empty array clears the selected files.
page.get_by_label("Upload file").set_input_files('myfile.pdf')
page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])
page.get_by_label("Upload directory").set_input_files('mydir')
page.get_by_label("Upload file").set_input_files([])
page.get_by_label("Upload file").set_input_files(
files=[
{"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}
],
)
await page.get_by_label("Upload file").set_input_files('myfile.pdf')
await page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])
await page.get_by_label("Upload directory").set_input_files('mydir')
await page.get_by_label("Upload file").set_input_files([])
await page.get_by_label("Upload file").set_input_files(
files=[
{"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}
],
)
If you don't have input element in hand (it is created dynamically), you can handle the page.on("filechooser") event or use a corresponding waiting method upon your action:
with page.expect_file_chooser() as fc_info:
page.get_by_label("Upload file").click()
file_chooser = fc_info.value
file_chooser.set_files("myfile.pdf")
async with page.expect_file_chooser() as fc_info:
await page.get_by_label("Upload file").click()
file_chooser = await fc_info.value
await file_chooser.set_files("myfile.pdf")
For the dynamic pages that handle focus events, you can focus the given element with locator.focus().
page.get_by_label('password').focus()
await page.get_by_label('password').focus()
You can perform drag&drop operation with locator.drag_to(). This method will:
page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))
await page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))
If you want precise control over the drag operation, use lower-level methods like locator.hover(), mouse.down(), mouse.move() and mouse.up().
page.locator("#item-to-be-dragged").hover()
page.mouse.down()
page.locator("#item-to-drop-at").hover()
page.mouse.up()
await page.locator("#item-to-be-dragged").hover()
await page.mouse.down()
await page.locator("#item-to-drop-at").hover()
await page.mouse.up()
note
If your page relies on the dragover event being dispatched, you need at least two mouse moves to trigger it in all browsers. To reliably issue the second mouse move, repeat your mouse.move() or locator.hover() twice. The sequence of operations would be: hover the drag element, mouse down, hover the drop element, hover the drop element second time, mouse up.
Most of the time, Playwright will automatically scroll for you before doing any actions. Therefore, you do not need to scroll explicitly.
page.get_by_role("button").click()
await page.get_by_role("button").click()
However, in rare cases you might need to manually scroll. For example, you might want to force an "infinite list" to load more elements, or position the page for a specific screenshot. In such a case, the most reliable way is to find an element that you want to make visible at the bottom, and scroll it into view.
page.get_by_text("Footer text").scroll_into_view_if_needed()
await page.get_by_text("Footer text").scroll_into_view_if_needed()
If you would like to control the scrolling more precisely, use mouse.wheel() or locator.evaluate():
page.get_by_test_id("scrolling-container").hover()
page.mouse.wheel(0, 10)
page.get_by_test_id("scrolling-container").evaluate("e => e.scrollTop += 100")
await page.get_by_test_id("scrolling-container").hover()
await page.mouse.wheel(0, 10)
await page.get_by_test_id("scrolling-container").evaluate("e => e.scrollTop += 100")
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4