news 2026/4/17 12:36:40

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/4/17 21:53:47

C++ atomic类型详解

atomic类型详解一:atomic_flag介绍atomic类型详解二:std::atomicatomic类型详解三:std::atomic(续)atomic类型详解四:C风格原子操作介绍

作者头像 李华
网站建设 2026/4/17 6:26:53

学术写作新范式:书匠策AI如何重构期刊论文创作生态

在科研竞争日益激烈的今天,期刊论文的发表质量与效率已成为衡量学者学术影响力的重要指标。然而,传统写作模式中选题同质化、论证逻辑混乱、文献引用不规范等问题,正成为制约学术创新的瓶颈。书匠策AI科研工具(官网:ht…

作者头像 李华
网站建设 2026/4/10 21:50:52

LangFlow Active Object主动对象模式解耦

LangFlow 与主动对象模式:解耦可视化 AI 工作流的架构之道 在构建智能对话系统、自动化知识问答或复杂 Agent 流程时,开发者常常面临一个两难困境:一方面希望快速验证想法、灵活调整流程;另一方面又不得不陷入冗长的编码、调试和部…

作者头像 李华
网站建设 2026/4/18 1:03:16

LangFlow Google Cloud Run适配经验

LangFlow 在 Google Cloud Run 上的部署实践与优化 在当今快速迭代的 AI 应用开发中,如何让非专业开发者也能高效参与大型语言模型(LLM)工作流的设计与验证,已成为一个关键挑战。LangChain 虽然功能强大,但其代码驱动…

作者头像 李华
网站建设 2026/4/11 7:47:54

揭秘Open-AutoGLM安全短板:如何在3步内实现暴力破解防护全面升级

第一章:揭秘Open-AutoGLM安全短板:暴力破解的潜在威胁近年来,Open-AutoGLM作为一款开源的自动化大语言模型推理框架,因其灵活部署与高效调度能力受到广泛关注。然而,其身份认证机制的设计缺陷正逐渐暴露,为…

作者头像 李华
网站建设 2026/4/7 15:52:16

Open-AutoGLM行为预警技术深度解析(99%的人都忽略的关键指标)

第一章:Open-AutoGLM行为预警技术概述Open-AutoGLM 是一种基于大语言模型(LLM)的行为分析与异常检测框架,专注于实时识别用户操作中的潜在风险行为。该技术融合自然语言理解、行为模式建模与动态阈值预警机制,广泛适用…

作者头像 李华