news 2026/5/14 22:22:33

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/5/13 13:35:25

Open-AutoGLM实战:从0到1搭建高精度访问行为预警系统(附代码模板)

第一章:Open-AutoGLM 访问行为异常预警系统概述Open-AutoGLM 是一个基于大语言模型与自动化推理引擎构建的访问行为异常检测系统,旨在实时监控用户请求模式,识别潜在的安全威胁或非正常操作行为。该系统融合了自然语言理解、行为建模与动态阈…

作者头像 李华
网站建设 2026/5/2 17:46:52

C++调试宏与断言

1. 调试宏 __FUNCTION__:函数名__TIME__:文件运行的时间(注意:是文件运行时间,而不是运行该行的时间)__LINE__:所在行数__FILE__:文件的名字__DATA__:日期 注意&#xff…

作者头像 李华
网站建设 2026/5/1 7:36:50

科研起航新利器:书匠策AI开题报告功能,为学术梦想筑牢根基

在科研的漫漫征途中,开题报告宛如一座明亮的灯塔,为我们照亮前行的方向,指引着我们精准驶向学术的彼岸。它不仅是开启研究项目的关键钥匙,更是展现研究者学术素养与研究能力的重要窗口。然而,撰写一份高质量的开题报告…

作者头像 李华
网站建设 2026/5/5 23:13:03

揭秘Open-AutoGLM访问控制机制:如何高效阻断恶意请求

第一章:揭秘Open-AutoGLM访问控制机制的核心原理 Open-AutoGLM 作为新一代自动化大语言模型平台,其访问控制机制在保障系统安全与多租户隔离方面起着关键作用。该机制基于属性基加密(Attribute-Based Encryption, ABE)与动态策略评…

作者头像 李华
网站建设 2026/5/12 1:19:59

LangFlow sitemap.xml生成工具推荐

LangFlow 在 sitemap.xml 自动生成中的实践探索 在搜索引擎优化(SEO)的实际工程中,sitemap.xml 一直是网站与爬虫之间沟通的“桥梁”。传统生成方式依赖静态扫描或 CMS 插件,虽然稳定但缺乏语义理解能力,难以应对现代动…

作者头像 李华