鬼游1. Playwright文件上传与下载测试完全指南
作为现代Web应用的核心功能，文件上传与下载的测试一直是自动化测试中的重点和难点。Playwright作为新一代的浏览器自动化工具，提供了强大的文件操作支持，能够完美模拟真实用户的文件上传和下载行为。本文将深入解析如何利用Playwright实现全面的文件上传与下载测试，覆盖从基础操作到高级技巧的完整知识体系。
在实际测试工作中，文件上传功能往往涉及复杂的交互逻辑，包括文件选择对话框处理、上传进度监控、服务器响应验证等环节；而文件下载测试则需要考虑下载路径设置、文件完整性校验、下载速度监控等关键点。Playwright通过简洁而强大的API，让这些复杂测试场景的实现变得异常简单。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. Playwright文件上传测试详解
2.1 基础文件上传实现
Playwright提供了多种方式实现文件上传，最常用的是通过setInputFiles方法：
typescript复制// 单文件上传
await page.locator('input[type="file"]').setInputFiles('path/to/file.pdf');
// 多文件上传
await page.locator('input[type="file"]').setInputFiles([
'path/to/file1.pdf',
'path/to/file2.jpg'
]);
这种方法直接绕过文件选择对话框，将文件路径设置到input元素上，避免了与操作系统对话框交互的复杂性。对于大多数现代Web应用，这是最可靠的上传方式。
注意：使用setInputFiles时，文件路径必须是绝对路径或相对于当前工作目录的相对路径。如果测试需要在不同环境中运行，建议使用path模块处理路径。
2.2 复杂场景下的文件上传
某些特殊场景下，应用可能使用自定义的文件上传组件而非标准input元素。这时我们可以模拟完整的用户操作流程：
typescript复制// 触发文件选择对话框
const fileChooserPromise = page.waitForEvent('filechooser');
await page.locator('.custom-upload-button').click();
const fileChooser = await fileChooserPromise;
// 设置文件
await fileChooser.setFiles('path/to/file.pdf');
这种方法更接近真实用户操作，适合测试复杂的上传交互逻辑。同时，Playwright还支持监听上传进度事件：
typescript复制page.on('upload', upload => {
console.log(`Uploading ${upload.name} (${upload.percent}%)`);
});
2.3 文件上传测试的最佳实践
-
文件类型验证测试：上传不同类型文件验证服务端校验逻辑
typescript复制const invalidFiles = ['test.exe', 'test.bat']; for (const file of invalidFiles) { await page.locator('input[type="file"]').setInputFiles(file); await expect(page.locator('.error-message')).toBeVisible(); } -
大文件上传测试：验证进度显示和超时处理
typescript复制// 生成100MB测试文件 const fs = require('fs'); fs.writeFileSync('large-file.bin', Buffer.alloc(1024 * 1024 * 100)); await page.locator('input[type="file"]').setInputFiles('large-file.bin'); await expect(page.locator('.progress')).toHaveText('100%'); -
并发上传测试：模拟多文件同时上传场景
typescript复制const files = Array(10).fill().map((_, i) => `file${i}.txt`); await page.locator('input[type="file"]').setInputFiles(files);
3. Playwright文件下载测试详解
3.1 基础文件下载实现
Playwright通过监听download事件来处理文件下载：
typescript复制// 设置下载路径
const downloadPath = '/path/to/downloads';
const browser = await chromium.launch({
downloadsPath: downloadPath
});
// 监听下载事件
const [download] = await Promise.all([
page.waitForEvent('download'),
page.locator('#download-button').click()
]);
// 获取下载文件信息
const path = await download.path();
const fileName = download.suggestedFilename();
这种方法可以获取下载文件的完整信息，包括文件名、路径、下载状态等。Playwright会自动管理下载过程，无需额外处理网络请求。
3.2 高级下载测试技巧
-
下载文件验证：检查文件内容和完整性
typescript复制const fs = require('fs'); // 等待下载完成 const path = await download.path(); // 验证文件存在 expect(fs.existsSync(path)).toBeTruthy(); // 验证文件大小 const stats = fs.statSync(path); expect(stats.size).toBeGreaterThan(0); // 验证文件内容 const content = fs.readFileSync(path, 'utf8'); expect(content).toContain('expected content'); -
下载超时处理：设置合理的等待时间
typescript复制// 设置30秒超时 const [download] = await Promise.all([ page.waitForEvent('download', { timeout: 30000 }), page.locator('#download-button').click() ]).catch(() => { throw new Error('Download timed out'); }); -
多文件下载测试：验证并发下载场景
typescript复制const downloadPromises = []; for (let i = 0; i < 5; i++) { downloadPromises.push(page.waitForEvent('download')); await page.locator(`#download-button-${i}`).click(); } const downloads = await Promise.all(downloadPromises); expect(downloads.length).toBe(5);
3.3 下载测试的常见问题与解决方案
-
下载路径权限问题：
typescript复制// 在测试开始前创建下载目录 const fs = require('fs'); const downloadPath = '/tmp/playwright-downloads'; if (!fs.existsSync(downloadPath)) { fs.mkdirSync(downloadPath, { recursive: true }); } -
文件名编码问题：
typescript复制// 处理中文文件名 const fileName = download.suggestedFilename(); const decodedName = Buffer.from(fileName, 'binary').toString('utf8'); -
下载速度测试：
typescript复制const startTime = Date.now(); const [download] = await Promise.all([ page.waitForEvent('download'), page.locator('#download-button').click() ]); const path = await download.path(); const duration = (Date.now() - startTime) / 1000; const stats = fs.statSync(path); const speed = (stats.size / 1024 / 1024 / duration).toFixed(2); console.log(`Download speed: ${speed} MB/s`);
4. 安全测试与异常场景处理
4.1 文件上传安全测试
-
恶意文件上传测试：
typescript复制const maliciousFiles = [ { name: 'test.php', content: '<?php system($_GET["cmd"]); ?>' }, { name: 'test.html', content: '<script>alert("XSS")</script>' } ]; for (const file of maliciousFiles) { fs.writeFileSync(file.name, file.content); await page.locator('input[type="file"]').setInputFiles(file.name); await expect(page.locator('.security-error')).toBeVisible(); fs.unlinkSync(file.name); } -
文件内容篡改测试：
typescript复制// 修改文件扩展名 fs.copyFileSync('safe.jpg', 'safe.jpg.exe'); await page.locator('input[type="file"]').setInputFiles('safe.jpg.exe'); await expect(page.locator('.file-type-error')).toBeVisible();
4.2 文件下载安全测试
-
下载内容验证：
typescript复制const [download] = await Promise.all([ page.waitForEvent('download'), page.locator('#download-button').click() ]); const path = await download.path(); const content = fs.readFileSync(path, 'utf8'); // 检查敏感信息 expect(content).not.toContain('password'); expect(content).not.toContain('secret_key'); -
下载链接劫持测试：
typescript复制await page.route('**/download', route => { route.fulfill({ status: 404, contentType: 'text/plain', body: 'Not Found' }); }); await page.locator('#download-button').click(); await expect(page.locator('.download-error')).toBeVisible();
5. 性能优化与高级技巧
5.1 文件操作性能优化
-
内存管理：
typescript复制// 下载大文件时使用流处理 const stream = await download.createReadStream(); const writer = fs.createWriteStream('large-file.bin'); for await (const chunk of stream) { writer.write(chunk); } writer.end(); -
并行测试优化：
typescript复制// 使用Promise.all并行执行上传/下载 const uploadPromises = files.map(file => page.locator('input[type="file"]').setInputFiles(file) ); await Promise.all(uploadPromises);
5.2 CI/CD集成实践
-
测试文件管理：
typescript复制// 测试前准备测试文件 beforeAll(() => { if (!fs.existsSync('test-files')) { fs.mkdirSync('test-files'); } fs.writeFileSync('test-files/small.txt', 'test content'); fs.writeFileSync('test-files/large.bin', Buffer.alloc(1024 * 1024 * 10)); }); // 测试后清理 afterAll(() => { fs.rmSync('test-files', { recursive: true }); }); -
自动化测试报告：
typescript复制// 记录测试结果 const results = []; test('file upload test', async () => { const start = Date.now(); await page.locator('input[type="file"]').setInputFiles('test.pdf'); const duration = Date.now() - start; results.push({ test: 'file upload', status: 'passed', duration: duration }); });
6. 真实项目案例解析
6.1 云存储应用测试案例
typescript复制describe('Cloud Storage Test Suite', () => {
let browser: Browser;
let page: Page;
beforeAll(async () => {
browser = await chromium.launch();
page = await browser.newPage();
await page.goto('https://cloud.example.com');
});
test('upload multiple files', async () => {
const files = ['doc1.pdf', 'doc2.docx', 'image.jpg'];
await page.locator('.upload-area').setInputFiles(files);
for (const file of files) {
await expect(page.locator(`.file-item:has-text("${file}")`)).toBeVisible();
}
});
test('download with resume support', async () => {
// 模拟网络中断
await page.route('**/download', (route, request) => {
if (request.headers()['range']) {
// 处理断点续传
route.fulfill({
status: 206,
headers: { 'content-range': 'bytes 100-199/200' },
body: Buffer.alloc(100)
});
} else {
// 首次请求返回部分内容
route.fulfill({
status: 200,
headers: { 'accept-ranges': 'bytes', 'content-length': '200' },
body: Buffer.alloc(100)
});
}
});
const [download] = await Promise.all([
page.waitForEvent('download'),
page.locator('.download-btn').click()
]);
expect(await download.failure()).toBeNull();
});
});
6.2 企业文档管理系统测试案例
typescript复制describe('Document Management Test', () => {
test('version control upload', async () => {
const page = await browser.newPage();
await page.goto('https://docs.example.com');
// 上传初始版本
await page.locator('.upload-input').setInputFiles('v1.docx');
await expect(page.locator('.version-list >> nth=0')).toContainText('v1');
// 上传新版本
await page.locator('.upload-new-version').setInputFiles('v2.docx');
await expect(page.locator('.version-list >> nth=0')).toContainText('v2');
await expect(page.locator('.version-list >> nth=1')).toContainText('v1');
});
test('bulk download as zip', async () => {
const [download] = await Promise.all([
page.waitForEvent('download'),
page.locator('.bulk-download').click()
]);
const path = await download.path();
const zip = new require('adm-zip')(path);
const zipEntries = zip.getEntries();
expect(zipEntries.length).toBe(2);
expect(zipEntries.some(e => e.entryName === 'v1.docx')).toBeTruthy();
expect(zipEntries.some(e => e.entryName === 'v2.docx')).toBeTruthy();
});
});
在实际项目中，文件上传下载测试往往会遇到各种边界情况和特殊需求。通过Playwright强大的API和灵活的事件处理机制，我们可以构建出覆盖全面、稳定可靠的自动化测试方案。