Playwright

Navigation, Popups, Dialogs, Downloads, and Uploads

Thirdy Gayares
15 min read

🎯 What You Will Learn

Automate page navigation and safely handle new tabs, JavaScript dialogs, file uploads, and browser downloads.

  • Navigate without losing browser state
  • Handle links that open new tabs
  • Accept or dismiss JavaScript dialogs intentionally
  • Upload fixtures and verify downloaded artifacts
Prerequisites: A working Playwright CLI and a safe application or demo page you are authorized to automate.

Open starts a browser session. Goto changes the current page, while go-back, go-forward, and reload use browser history.

Terminal
"$PWCLI" -s=files open https://example.com --headed
"$PWCLI" -s=files goto https://playwright.dev/docs/input
"$PWCLI" -s=files go-back
"$PWCLI" -s=files go-forward
"$PWCLI" -s=files reload

Snapshot After Every Navigation

A navigation replaces the document and invalidates earlier element references. Capture a new snapshot before your next click or form action.

Terminal
"$PWCLI" -s=files goto https://playwright.dev/docs/downloads
"$PWCLI" -s=files snapshot
"$PWCLI" -s=files find "Download"

Never reuse old refs: A ref from the previous URL describes the old document, even when the new page looks visually similar.

After clicking a link that opens a popup, list tabs, select the new index, and snapshot it before interacting.

  1. Snapshot and identify the link ref.
  2. Click the link.
  3. List tabs to see the new page.
  4. Select the new tab and snapshot again.
Terminal
"$PWCLI" -s=files snapshot
"$PWCLI" -s=files click ePOPUP
"$PWCLI" -s=files tab-list
"$PWCLI" -s=files tab-select 1
"$PWCLI" -s=files snapshot

Accept JavaScript Dialogs

Alert, confirm, and prompt dialogs block the page until they are handled. Accept a prompt with text only when the workflow expects that input.

Terminal
"$PWCLI" -s=files click eDELETE
"$PWCLI" -s=files dialog-accept

"$PWCLI" -s=files click eRENAME
"$PWCLI" -s=files dialog-accept "final-report.pdf"

Dismiss a Dialog and Verify No Change

Cancel destructive dialogs deliberately, then snapshot the page to confirm the item still exists.

Terminal
"$PWCLI" -s=files click eDELETE
"$PWCLI" -s=files dialog-dismiss
"$PWCLI" -s=files snapshot
"$PWCLI" -s=files find "final-report.pdf"

Upload a Known Test Fixture

Keep small, non-sensitive fixtures in a dedicated project folder. The upload command sends the selected file to the active file chooser.

Terminal
mkdir -p fixtures
# Add a harmless fixture such as fixtures/avatar.png.

"$PWCLI" -s=files snapshot
"$PWCLI" -s=files click eCHOOSE_FILE
"$PWCLI" -s=files upload ./fixtures/avatar.png
"$PWCLI" -s=files snapshot

Trigger and Inspect a Download

Click the current download control and read the CLI result for the saved artifact path. Confirm the name and file type before using the file.

Terminal
"$PWCLI" -s=files snapshot
"$PWCLI" -s=files click eDOWNLOAD
# The command output reports the saved download path.

Artifact hygiene: Keep downloads under output/playwright and never execute a downloaded file as part of an untrusted workflow.

Debug File and Navigation Flows

When a flow stalls, check the active tab, pending dialog, console messages, and network requests. Record a trace when the failure is intermittent.

Terminal
"$PWCLI" -s=files tab-list
"$PWCLI" -s=files console warning
"$PWCLI" -s=files requests
"$PWCLI" -s=files tracing-start
# Reproduce the smallest failing flow.
"$PWCLI" -s=files tracing-stop

Recap

  • Snapshot after every navigation or tab switch.
  • Handle dialogs explicitly before continuing.
  • Upload controlled fixtures and verify download paths.
  • Use tabs, console, network data, and traces to debug blocked flows.

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.