This section covers additional Playwright actions that are commonly used in real-world automation scenarios, such as drag-and-drop interactions, screenshots, dropdown handling, file uploads, and dialog handling.
1. Drag and Drop
Playwright provides a built-in dragTo() method to handle drag-and-drop interactions between elements.
This method automatically performs the mouse actions required to drag the source element and drop it onto the target element.
2. Taking Screenshots
Screenshots are useful for debugging failures and documenting application state.
Full Page Screenshot
Element Screenshot
Element-level screenshots capture only the visible area of the selected element.
3. Miscellaneous Page-Level Actions
These actions operate at the page level and are useful for test control and environment setup.
waitForTimeout should be avoided in favor of auto-waiting and assertions whenever possible.
4. Dropdown Handling
Playwright handles native <select> dropdowns using selectOption().
Select by value:
Select by visible label:
5. File Upload
Playwright supports multiple ways to upload files without interacting with the system file picker.
Upload a Single File
Upload Multiple Files
Upload File from Memory (No Physical File)
File Chooser Handling
Some applications open the browser’s file chooser dialog. This can be handled using the filechooser event.
6. Dialog Handling in Playwright JS
Playwright automatically listens for JavaScript dialogs such as:
- alert()
- confirm()
- prompt()
Basic Dialog Handling
Accessing Dialog Properties
Handling Different Dialog Types
Alert (Only OK):
Confirm Dialog
Accept (OK):
Dismiss (Cancel):
Prompt Dialog (With Input)
Validating Dialog Message
One-Time Dialog Handling (Best Practice)
Use page.once() to avoid accidental multiple handlers.
This approach is cleaner and safer when handling a single dialog.