Playwright

Click, Type, Fill, Select, and Upload Reliably

Thirdy Gayares
14 min read

🎯 What You Will Learn

Master the core interaction commands and learn when to click, type, fill, select, check, hover, drag, or upload.

  • Choose the correct command for each control
  • Build a complete form workflow from a fresh snapshot
  • Verify state after every meaningful action
  • Diagnose actionability failures without forced clicks
Prerequisites: A working Playwright CLI. Use a safe demo form or an application you are authorized to test.

Use the Reliable Interaction Loop

The safest pattern is snapshot, act, and snapshot again after the UI changes. This keeps your commands tied to page state you actually observed.

Terminal
"$PWCLI" -s=form open https://example.com/form --headed
"$PWCLI" -s=form snapshot
# Interact with refs from this output.
"$PWCLI" -s=form snapshot

Click Buttons and Links

Click requires one visible, stable, enabled target that can receive pointer events. Use dblclick only when the interface genuinely requires a double click.

Terminal
"$PWCLI" -s=form click eBUTTON
"$PWCLI" -s=form dblclick eROW
"$PWCLI" -s=form snapshot

Choose Type or Fill

Type sends keystrokes to the focused control and preserves existing text. Fill targets an editable ref directly and replaces its value.

CommandUse it for
typeKeyboard behavior, incremental input, shortcuts, and focused editors
fillSetting a complete input or textarea value predictably
Terminal
"$PWCLI" -s=form fill eEMAIL "[email protected]"
"$PWCLI" -s=form click eSEARCH
"$PWCLI" -s=form type "playwright tutorial"
"$PWCLI" -s=form press Enter

Select Dropdown Options

The select command uses the option value, not necessarily the visible label. Inspect the app or generated locator when those differ.

Terminal
"$PWCLI" -s=form select eCOUNTRY "PH"
"$PWCLI" -s=form snapshot

Check and Uncheck Controls

Use check and uncheck for checkbox or radio semantics. These commands describe intent more clearly than a generic click.

Terminal
"$PWCLI" -s=form check eTERMS
"$PWCLI" -s=form uncheck eNEWSLETTER
"$PWCLI" -s=form snapshot

Hover and Drag

Hover can reveal menus and tooltips. Drag moves from one current ref to another; snapshot after the move so the new order is visible.

Terminal
"$PWCLI" -s=form hover eMENU
"$PWCLI" -s=form snapshot
"$PWCLI" -s=form drag eCARD eCOLUMN
"$PWCLI" -s=form snapshot

Upload Files Safely

Snapshot the page, click the file chooser if the UI requires it, then upload only the intended local test fixture.

Terminal
"$PWCLI" -s=form snapshot
"$PWCLI" -s=form click eUPLOAD
"$PWCLI" -s=form upload ./fixtures/sample.pdf
"$PWCLI" -s=form snapshot

Debug Actionability Failures

A click timeout often means the target is hidden, moving, disabled, or covered. Re-snapshot, inspect console output, and use headed mode before considering any forced action.

  1. Confirm the ref belongs to the current snapshot.
  2. Check whether a modal or loading layer covers the target.
  3. Wait for a visible application state instead of sleeping.
  4. Verify the control is enabled and unique.

Avoid force by default: A forced click can hide a real usability bug because it bypasses some checks that a real user must satisfy.

Recap

  • Use intent-specific commands such as fill, select, and check.
  • Snapshot around meaningful state changes.
  • Upload only known fixtures in authorized environments.
  • Investigate visibility and overlays before forcing actions.

Checkpoint: You have completed the workflow and have a repeatable reference for your next Playwright project.

Official Resources

About the Author

TG

Thirdy Gayares

Passionate developer creating custom solutions for everyone. I specialize in building user-friendly tools that solve real-world problems while maintaining the highest standards of security and privacy.