news 2026/7/29 0:36:39

Playwright 文件操作

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Playwright 文件操作

Playwright 文件操作(2025 年最新版)

Playwright 本身是浏览器自动化工具,主要在浏览器环境中运行,但它提供了便捷的 API 来处理文件上传文件下载。此外,在 Node.js 环境中,你可以结合 Node.js 的fs模块实现更复杂的本地文件读写操作。下面详细讲解常见文件操作场景。

1.文件上传(File Upload)

最常见的两种上传方式:

方式一:直接设置 input[type=“file”](推荐,最稳定)

// tests/upload.spec.tsimport{test,expect}from'@playwright/test';importpathfrom'path';test('单个文件上传',async({page})=>{awaitpage.goto('https://example.com/upload');// 准备本地文件路径(相对项目根目录)constfilePath=path.join(__dirname,'../files/avatar.jpg');// 设置文件(自动触发 change 事件)awaitpage.getByLabel('上传头像').setInputFiles(filePath);// 验证上传成功awaitexpect(page.getByText('上传成功')).toBeVisible();});

方式二:上传多个文件

awaitpage.getByLabel('批量上传').setInputFiles([path.join(__dirname,'../files/file1.pdf'),path.join(__dirname,'../files/file2.png'),]);

方式三:清空已选择的文件

awaitpage.getByLabel('上传文件').setInputFiles([]);// 清空

方式四:拖拽上传(模拟 Drag & Drop)

// 创建 DataTransfer 对象模拟拖拽awaitpage.evaluate(async({filePath})=>{constinput=document.querySelector('input[type="file"]')asHTMLInputElement;constfile=awaitfetch(filePath).then(r=>r.blob()).then(b=>newFile([b],'test.jpg'));constdt=newDataTransfer();dt.items.add(file);input.files=dt.files;input.dispatchEvent(newEvent('change',{bubbles:true}));},{filePath:'http://example.com/test.jpg'});// 或本地路径需特殊处理
2.文件下载(File Download)
test('文件下载并验证',async({page})=>{// 监听下载事件const[download]=awaitPromise.all([page.waitForEvent('download'),// 等待下载开始page.getByRole('link',{name:'下载报告'}).click(),]);// 获取下载对象console.log('文件名:',download.suggestedFilename());// e.g., report.pdf// 保存到指定路径(推荐)constdownloadPath=path.join(__dirname,'../downloads');awaitdownload.saveAs(path.join(downloadPath,download.suggestedFilename()));// 或获取临时路径(headless 模式下有效)consttempPath=awaitdownload.path();// 验证文件存在(结合 Node.js fs)constfs=require('fs');expect(fs.existsSync(tempPath)).toBeTruthy();// 可选:取消下载// await download.cancel();});

注意

  • 在 headless 模式下,下载的文件保存在临时目录,download.path()可用。
  • 在 headed 模式下,默认弹出系统保存对话框,download.path()会返回 null。建议测试时统一使用 headless。
3.结合 Node.js fs 进行本地文件操作

Playwright 测试运行在 Node.js 环境中,可以自由使用fs模块读写文件,常用于:

  • 准备测试数据
  • 验证下载文件内容
  • 生成临时文件
importfsfrom'fs';importpathfrom'path';test('验证下载文件内容',async({page})=>{// ...触发下载代码同上constsavedPath=path.join(__dirname,'../downloads/report.pdf');awaitdownload.saveAs(savedPath);// 读取文件内容验证constbuffer=fs.readFileSync(savedPath);expect(buffer.length).toBeGreaterThan(1000);// 大于 1KB// 或验证文件类型(PDF 开头 %PDF)expect(buffer.toString('utf8',0,5)).toBe('%PDF-');// 测试后清理fs.unlinkSync(savedPath);});
4.playwright.config.ts 中配置下载路径(可选)
import{defineConfig}from'@playwright/test';exportdefaultdefineConfig({use:{// 统一设置下载目录downloadsPath:'downloads',},});

然后download.path()会直接返回该目录下的路径。

5.Python 版文件操作示例
fromplaywright.sync_apiimportsync_playwrightimportoswithsync_playwright()asp:browser=p.chromium.launch(headless=True)page=browser.new_page()page.goto("https://example.com/upload")# 上传page.get_by_label("选择文件").set_input_files("tests/files/test.pdf")# 下载withpage.expect_download()asdownload_info:page.get_by_text("下载").click()download=download_info.value download.save_as("downloads/myfile.pdf")# 验证文件大小assertos.path.getsize("downloads/myfile.pdf")>1000browser.close()
最佳实践总结
  • 上传:优先用setInputFiles()+ 绝对路径(path.join(__dirname, ...))。
  • 下载:始终用page.waitForEvent('download')+saveAs()保存到自定义目录,便于验证。
  • 文件路径:使用path.join()避免跨平台问题。
  • 清理:测试结束后删除临时文件,保持环境干净。
  • CI/CD:确保下载目录有写权限。

这些操作能让你轻松处理文件相关的测试场景(如表单上传、报告导出)。如果需要完整示例项目或处理压缩文件/大文件下载的进阶技巧,随时告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/29 5:18:29

【AI系统安全新挑战】:Open-AutoGLM为何成暴力破解重灾区?

第一章:Open-AutoGLM暴力破解威胁全景透视随着大语言模型(LLM)在自动化任务中的广泛应用,Open-AutoGLM作为一类前沿的自动生成语言模型,正面临日益严峻的暴力破解安全威胁。攻击者利用模型开放接口、弱认证机制与推理过…

作者头像 李华
网站建设 2026/7/28 0:42:32

ECharts 样式设置

ECharts 样式设置详解 ECharts 的样式设置非常强大,主要通过 全局调色盘、组件样式 和 系列图形样式(itemStyle、lineStyle、areaStyle 等)实现。ECharts 5 简化了语法,不再强制使用 normal/emphasis 嵌套(直接扁平写…

作者头像 李华
网站建设 2026/7/29 5:18:27

如何通过接口获取openid

要通过接口获取微信用户的OpenID,需要根据应用场景选择不同的接口方式。以下是开发者常用的几种方法:一、公众号网页授权(适用于H5页面)这是最标准的获取方式,适用于用户在微信内访问网页的场景:实现步骤1.…

作者头像 李华
网站建设 2026/7/28 15:10:46

科研“导航仪”:书匠策AI文献综述功能,精准勾勒学术脉络地图

在科研的浩瀚宇宙中,每一项研究都像是一颗独特的星辰,而文献综述则是那一张能让我们清晰看到星辰分布与运行轨迹的星图。它不仅能帮助我们了解前人在该领域的研究成果与不足,还能为我们自己的研究指明方向,避免重复劳动和走入误区…

作者头像 李华
网站建设 2026/7/28 21:56:07

LangFlow镜像全面解析:让LangChain开发变得简单直观

LangFlow镜像全面解析:让LangChain开发变得简单直观 在人工智能应用快速落地的今天,越来越多团队希望基于大语言模型(LLM)构建智能系统——从客服机器人到知识助手,再到自动化工作流。LangChain 作为连接 LLM 与外部世…

作者头像 李华