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

AI 思考中...

Playwright 网络拦截

Playwright 移动端测试