Playwright 精通系列第五篇：表单处理与文件上传/下载

在自动化测试中，表单操作和文件上传/下载是两大常见需求。表单操作不仅包括输入框和按钮的交互，还涉及到单选框、多选框、下拉菜单等复杂组件。而文件上传和下载更是许多用户测试流程中的难点，尤其是在处理非标准化的文件组件时。

本篇文章将深入探讨 表单处理 和 文件上传/下载 的核心功能，结合实战案例，列举常见问题和解决思路，帮助你更高效地完成自动化测试。

---

1. Playwright 表单处理的优势

1. 链式操作简洁高效：Playwright 提供了链式调用，操作表单元素无需频繁切换上下文。
2. 强大的自动等待机制：Playwright 会自动等待表单元素的加载和交互状态，减少显式等待代码。
3. 支持复杂组件操作：如单选框、多选框、动态生成的下拉菜单等，Playwright 提供了灵活的操作方法。
4. 文件上传/下载内置支持：Playwright 原生支持文件上传和下载，不需要额外的插件或配置。

---

2. 表单处理详解

表单操作是自动化测试中最基础的功能之一，Playwright 提供了灵活的 API 来处理表单元素。

2.1 输入框操作

输入框是表单中最常见的组件，Playwright 支持 fill 和 type 方法：

• fill：快速填充内容，会清空现有值。
• type：逐字输入，模拟真实用户的输入行为。

代码示例：输入用户名和密码

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()

    page.goto("https://example.com/login")

    # 填充用户名和密码
    page.locator("input#username").fill("test_user")
    page.locator("input#password").type("secure_password")  # 模拟逐字输入

    # 点击登录按钮
    page.locator("button#login").click()

    browser.close()

常见问题及解决思路：

1. 问题：输入框不可见或被遮挡。

   • 解决：检查输入框状态，确保其 is_visible() 返回 True，或使用 scroll_into_view_if_needed() 滚动到可见区域。

2. 问题：输入框中已有默认值，需要清空后输入。

   • 解决：直接使用 fill("") 清空输入框。

---

2.2 单选框和复选框

Playwright 提供了 check 和 uncheck 方法操作复选框和单选框，并自动确保复选框的状态。

代码示例：单选和复选框操作

# 选择单选框
page.locator("input[type='radio'][value='option1']").check()

# 勾选复选框
page.locator("input[type='checkbox'][id='accept-terms']").check()

# 取消勾选复选框
page.locator("input[type='checkbox'][id='accept-terms']").uncheck()

常见问题及解决思路：

1. 问题：单选框/复选框未正确选中。

   • 解决：在操作之前使用 is_checked() 检查状态，确保需要时调用 check() 或 uncheck()。

2. 问题：动态生成的复选框/单选框未加载完成。

   • 解决：使用 wait_for() 等待元素加载。

---

2.3 下拉菜单

Playwright 提供了 select_option 方法，支持通过值、标签或索引选择下拉菜单的选项。

代码示例：操作下拉菜单

# 按值选择
page.locator("select#options").select_option("value1")

# 按标签选择
page.locator("select#options").select_option(label="Option 2")

# 按索引选择
page.locator("select#options").select_option(index=2)

常见问题及解决思路：

1. 问题：无法选择动态生成的选项。

   • 解决：确保下拉菜单的选项已完全加载后再执行操作，使用 wait_for_selector 或 wait_for()。

2. 问题：非标准下拉菜单（自定义组件无法用 select_option 操作）。

   • 解决：使用点击操作模拟选择，例如：

     page.locator("div.custom-dropdown").click()
     page.locator("div.option-item >> text='Option 2'").click()
     

---

2.4 动态表单处理

对于动态生成的表单（如添加行或列的表格），Playwright 的动态等待机制可以轻松应对。

代码示例：动态添加表单行

# 点击添加行按钮
page.locator("button#add-row").click()

# 填充动态生成的输入框
page.locator("input[name='row-1-name']").fill("New Row Name")

---

3. 文件上传

文件上传在自动化测试中常见于简历上传、图片上传等场景，Playwright 提供了 set_input_files 方法，能够轻松上传文件。

代码示例：文件上传

# 文件上传
page.locator("input[type='file']").set_input_files("path/to/file.txt")

# 上传多个文件
page.locator("input[type='file']").set_input_files(["file1.txt", "file2.txt"])

常见问题及解决思路：

1. 问题：文件上传控件不可见。

   • 解决：使用 force=True 强制上传文件，即使控件不可见也能触发。

     page.locator("input[type='file']").set_input_files("file.txt", force=True)
     

2. 问题：文件上传后没有触发后续操作。

   • 解决：确保文件上传触发的事件已绑定，可以通过 evaluate 触发事件：

     page.evaluate("document.querySelector('input[type=file]').dispatchEvent(new Event('change'))")
     

---

4. 文件下载

Playwright 提供了 page.expect_download() 方法，可以监听下载事件并保存文件。

代码示例：文件下载

with page.expect_download() as download_info:
    page.locator("a#download-link").click()  # 点击下载链接

download = download_info.value
download.save_as("downloaded_file.txt")  # 保存文件
print(f"Downloaded file: {download.path()}")

常见问题及解决思路：

1. 问题：文件下载路径未知或默认保存到系统临时目录。

   • 解决：创建一个带有指定下载路径的上下文：

     context = browser.new_context(accept_downloads=True)
     

2. 问题：下载被浏览器拦截（如弹出下载确认框）。

   • 解决：检查页面或服务器设置，确保下载直接触发而非需要手动确认。

---

5. 实战案例：文件上传与下载

场景描述

1. 打开文件管理系统页面。
2. 上传一个文件，验证上传成功。
3. 下载该文件，验证文件内容。

代码实现

from playwright.sync_api import sync_playwright

def run(playwright):
    browser = playwright.chromium.launch(headless=False)
    page = browser.new_page()

    # 打开文件管理页面
    page.goto("https://example.com/file-manager")

    # 上传文件
    page.locator("input[type='file']").set_input_files("test_upload.txt")
    print("File uploaded successfully!")

    # 下载文件
    with page.expect_download() as download_info:
        page.locator("a#download-link").click()
    download = download_info.value
    download.save_as("downloaded_test.txt")
    print(f"Downloaded file saved as: {download.path()}")

    browser.close()

with sync_playwright() as playwright:
    run(playwright)

---

6. 与 Selenium 的对比

功能	Playwright	Selenium
表单操作简洁性	链式调用，自动等待	需单独处理等待、状态检查
文件上传方式	原生支持 set_input_files	需使用 send_keys，且部分浏览器兼容性差
文件下载	内置下载监听，轻松保存	不支持直接监听文件下载，需借助插件或解析请求
动态表单处理	自动等待，支持复杂动态表单	需显式等待，代码复杂度高

---

7. 小结

本篇文章深入探讨了 Playwright 在表单处理和文件上传/下载方面的强大功能，结合常见问题给出了具体的解决思路。无论是复杂的表单组件，还是文件操作，Playwright 都提供了高效、稳定的解决方案。

亮点：

• 涵盖了所有常见表单组件（输入框、单选框、复选框、下拉菜单）的操作技巧。
• 提供了文件上传和下载的完整案例，解决常见难点。
• 对比 Selenium，突出了 Playwright 在操作简洁性和稳定性上的优势。

---

预告：在下一篇文章中，我们将深入探讨 鼠标与键盘操作，包括拖拽、双击、悬停、组合键输入等高级操作技巧，敬请期待！