Playwright 文件操作

虽然 Playwright 主要是做浏览器自动化的，但它在文件上传和下载方面也很强大，可以轻松应对前端常见的文件交互场景。

文件上传

在 Web 表单中，文件上传通常通过 <input type="file"> 完成。Playwright 提供了专门的 API 来处理：

方法一：setInputFiles()

await page.setInputFiles('input[type="file"]', 'tests/fixtures/avatar.png');

  • 参数说明：

    • 选择器：文件选择框的定位方式。
    • 文件路径：相对/绝对路径，支持单文件或多文件数组。
  • 如果传入 []，表示清空已选择的文件。

方法二：直接通过 Locator

const upload = page.locator('input[type=file]');
await upload.setInputFiles(['tests/fixtures/1.png', 'tests/fixtures/2.png']);

方法三：模拟拖拽上传（部分应用支持）

const fileChooserPromise = page.waitForEvent('filechooser');
await page.click('button#upload'); // 触发选择文件
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles('tests/fixtures/test.pdf');

文件下载

Playwright 可以捕获浏览器下载事件，并获取文件保存路径。

基本用法：监听下载

实例

const [download] = await Promise.all([
  page.waitForEvent('download'),          // 等待下载开始
  page.click('a#downloadButton'),         // 触发下载
]);

// 保存文件到指定路径
await download.saveAs('downloads/report.pdf');

// 获取默认保存路径（系统临时目录）
const path = await download.path();
console.log('下载路径:', path);

// 获取下载信息
console.log(await download.url());        // 下载链接
console.log(await download.suggestedFilename()); // 推荐文件名

截图与录屏文件

Playwright 本身也会生成文件（截图、视频、trace 等）：

await page.screenshot({ path: 'screenshots/home.png', fullPage: true });
await page.video()?.saveAs('videos/test.mp4');  // 在配置中开启 video 记录才可用

文件操作完整示例

实例

import { test, expect } from '@playwright/test';

test('文件上传与下载示例', async ({ page }) => {
  // 上传文件
  await page.goto('https://the-internet.herokuapp.com/upload');
  const uploadInput = page.locator('input[type=file]');
  await uploadInput.setInputFiles('tests/fixtures/avatar.png');
  await page.click('#file-submit');
  await expect(page.locator('#uploaded-files')).toHaveText('avatar.png');

  // 下载文件
  await page.goto('https://the-internet.herokuapp.com/download');
  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('a[href="some-file.txt"]'),
  ]);
  await download.saveAs('downloads/some-file.txt');
  console.log('下载完成:', await download.suggestedFilename());
});

文件操作 API

API 用途 参数/说明
page.setInputFiles(selector, files) 上传文件 files 可为路径字符串、数组或 FilePayload
locator.setInputFiles(files) 上传文件（Locator 方式）
page.waitForEvent('filechooser') 等待文件选择对话框 返回 FileChooser
fileChooser.setFiles(files) 设置选择的文件
page.waitForEvent('download') 监听下载事件 返回 Download
download.saveAs(path) 保存下载文件 自定义存储位置
download.path() 获取系统默认存储路径
download.url() 获取下载请求的 URL
download.suggestedFilename() 获取推荐文件名
page.screenshot({ path }) 页面截图
locator.screenshot({ path }) 元素截图
page.video()?.saveAs(path) 保存录制视频 需配置开启 video