HOWTO: 上传与下载文件
本文将介绍如何使用 Playwright 实现文件上传和下载操作，这在 Web 自动化测试中是非常常见的场景。通过模拟用户操作，我们可以验证上传头像、提交文档或图片等功能的正常运行。
实现文件上传
在 Web 自动化测试中，上传文件是一个常见的需求。Playwright 提供了 fileChooser.setFiles() 方法来模拟用户选择文件的操作。下面是一段简单的示例代码，展示如何使用 Playwright 实现文件上传：
JavaScript
Python
const { chromium } = require('leanpro.web');
(async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com'); // 替换为实际网址
// 等待文件选择器触发
const [fileChooser] = await Promise.all([
page.waitForEvent('filechooser'),
page.click('selector-for-file-upload-button') // 替换为触发文件对话框的按钮选择器
]);
// 设置要上传的文件路径
await fileChooser.setFiles('/path/to/your/file'); // 替换为实际文件路径
// 继续其他操作
await page.click('selector-for-submit-button'); // 替换为提交按钮的选择器
await browser.close();
})();from leanproWeb import WebAuto
browser = WebAuto().__enter__().chromium.launch(headless=False)
context = browser.new_context()
page = context.new_page()
page.goto('https://example.com') # 替换为实际网址
# 等待文件选择器触发
with page.expect_file_chooser() as fc_info:
page.click('selector-for-file-upload-button') # 替换为触发文件对话框的按钮选择器
file_chooser = fc_info.value
# 设置要上传的文件路径
file_chooser.set_files('/path/to/your/file') # 替换为实际文件路径
# 继续其他操作
page.click('selector-for-submit-button') # 替换为提交按钮的选择器
browser.close()在这个示例中：
- 启动浏览器并打开一个新的页面。
- 导航到目标网址。
- 等待文件选择器触发，同时点击上传按钮以打开文件选择对话框。
- 使用
fileChooser.setFiles('/path/to/your/file')方法指定要上传的文件路径。 - 执行后续操作，如点击提交按钮。
实现文件下载
在进行自动化测试时，下载文件也是一个常见的操作。Playwright 提供了 page.on('download') 事件来处理文件下载，并且可以通过设置 acceptDownloads 选项来允许自动化脚本访问下载的文件。下面是一段示例代码，展示如何使用 Playwright 实现文件下载：
JavaScript
Python
const { chromium } = require('leanpro.web');
const path = require('path');
(async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext({
acceptDownloads: true // 允许上下文中的页面进行文件下载
});
const page = await context.newPage();
await page.goto('https://example.com'); // 替换为实际网址
// 等待文件下载触发
const [download] = await Promise.all([
page.waitForEvent('download'),
page.click('selector-for-download-button') // 替换为触发下载的按钮选择器
]);
const filePath = path.resolve('downloads', await download.suggestedFilename());
console.log(`Downloading file to: ${filePath}`);
// 保存下载的文件
await download.saveAs(filePath);
// 继续其他操作
...
await browser.close();
})();from leanproWeb import WebAuto
import os
browser = WebAuto().__enter__().chromium.launch(headless=False)
context = browser.new_context(accept_downloads=True)
page = context.new_page()
page.goto('https://example.com') # 替换为实际网址
# 等待文件下载触发
with page.expect_download() as download_info:
page.click("selector-for-download-button")
download = download_info.value
# 解析下载文件的保存路径
downloads_path = os.path.join(os.getcwd(), 'downloads')
file_path = os.path.join(downloads_path, download.suggested_filename)
# 确保下载目录存在
if not os.path.exists(downloads_path):
os.makedirs(downloads_path)
print(f'Downloading file to: {file_path}')
# 保存下载的文件到指定路径
download.save_as(file_path)
# 继续其他操作
...
browser.close()在这个示例中：
- 启动浏览器，并使用
browser.newContext({ acceptDownloads: true })创建一个允许文件下载的上下文。 - 使用
page.goto()方法导航到目标网站。 - 等待文件下载触发，同时点击下载按钮以开始下载文件。
- 将下载的文件保存到指定路径。
- 执行后续操作。如验证下载文件的内容或格式是否正确。