YouTip

Although Playwright is primarily designed for browser automation, it is also very powerful in **file upload and download** scenarios, making it easy to handle common file interaction scenarios on the frontend. * * * ## File Upload In web forms, file uploads are typically done through ``. Playwright provides dedicated APIs to handle this: ### Method 1: setInputFiles() await page.setInputFiles('input', 'tests/fixtures/avatar.png'); * **Parameter Description**: * Selector: The locator for the file input element. * File path: Relative or absolute path, supports single file or multiple files array. * Passing `[]` clears the currently selected files. ### Method 2: Directly via Locator const upload = page.locator('input'); await upload.setInputFiles(['tests/fixtures/1.png', 'tests/fixtures/2.png']); ### Method 3: Simulate Drag and Drop Upload (supported by some applications) const fileChooserPromise = page.waitForEvent('filechooser'); await page.click('button#upload'); // Trigger file selectionconst fileChooser = await fileChooserPromise; await fileChooser.setFiles('tests/fixtures/test.pdf'); * * * ## File Download Playwright can capture browser download events and obtain the file save path. ### Basic Usage: Listen for Downloads ## Example const= await Promise.all([ page.waitForEvent('download'),// Wait for download to start page.click('a#downloadButton'),// Trigger download ]); // Save file to specified path await download.saveAs('downloads/report.pdf'); // Get default save path (system temp directory) const path = await download.path(); console.log('Download path:', path); // Get download information console.log(await download.url());// Download URL console.log(await download.suggestedFilename());// Suggested filename * * * ## Screenshots and Screen Recordings Playwright itself can also generate files (screenshots, videos, traces, etc.): await page.screenshot({ path: 'screenshots/home.png', fullPage: true }); await page.video()?.saveAs('videos/test.mp4'); // Only available when video recording is enabled in configuration * * * ## Complete File Operation Example ## Example import{ test, expect } from '@playwright/test'; test('File upload and download example', async ({ page })=>{ // Upload file await page.goto('https://the-internet.herokuapp.com/upload'); const uploadInput = page.locator('input'); await uploadInput.setInputFiles('tests/fixtures/avatar.png'); await page.click('#file-submit'); await expect(page.locator('#uploaded-files')).toHaveText('avatar.png'); // Download file await page.goto('https://the-internet.herokuapp.com/download'); const= await Promise.all([ page.waitForEvent('download'), page.click('a[href="some-file.txt"]'), ]); await download.saveAs('downloads/some-file.txt'); console.log('Download complete:', await download.suggestedFilename()); }); * * * ## File Operation APIs | API | Purpose | Parameters/Description | | --- | --- | --- | | `page.setInputFiles(selector, files)` | Upload file | `files` can be path string, array, or `FilePayload` | | `locator.setInputFiles(files)` | Upload file (Locator method) | | | `page.waitForEvent('filechooser')` | Wait for file chooser dialog | Returns `FileChooser` | | `fileChooser.setFiles(files)` | Set selected files | | | `page.waitForEvent('download')` | Listen for download event | Returns `Download` | | `download.saveAs(path)` | Save downloaded file | Custom storage location | | `download.path()` | Get system default storage path | | | `download.url()` | Get download request URL | | | `download.suggestedFilename()` | Get suggested filename | | | `page.screenshot({ path })` | Page screenshot | | | `locator.screenshot({ path })` | Element screenshot | | | `page.video()?.saveAs(path)` | Save recorded video | Requires video configuration to be enabled |