Playwright自动化测试系列课（3） | 第二阶段：核心技能与调试交互操作大全

霍格沃兹测试开发学社

1123人浏览 · 2025-07-22 17:21:44

霍格沃兹测试开发学社 · 2025-07-22 17:21:44 发布

一、交互操作核心：从基础到高级

1. 点击与输入操作

精准点击

click()：基础点击，支持自动等待元素可操作（可见、未禁用）。

进阶控制：

# 强制超时（非必要不推荐）
page.click('button#submit', timeout=5000)
# 点击含特定文本的元素（正则匹配）
page.click('text=/Log\s?in/i')

智能输入
- fill()：快速填充文本（清空后输入）：
```
page.fill('input[name="username"]', 'admin')  
```
- type()：模拟逐字符输入（适用于需触发输入事件的场景）：
```
page.type('#search', 'Playwright', delay=100)  # 延迟100ms/字符  
```

2. 拖拽与悬停

拖拽操作

# 元素A拖到元素B
page.drag_and_drop('#item', '#dropzone')  
# 坐标拖拽（像素级控制）
page.locator('#slider').drag_to_target(x=100, y=0)

悬停触发

page.hover('#menu')  # 触发下拉菜单

二、文件操作实战：上传与下载

1. 文件上传

单文件上传（直接指定路径）：

page.locator('input[type="file"]').set_input_files('data/test.png')

多文件上传：

page.locator('input#multi-files').set_input_files(['1.jpg', '2.pdf'])

动态文件选择（监听文件选择对话框）：

with page.expect_file_chooser() as fc:  
    page.click('text=Upload')  
file_chooser = fc.value  
file_chooser.set_files('data.csv')

2. 文件下载

监听下载事件（自动保存文件）：

with page.expect_download() as download_info:  
    page.click('text=Export Report')  
download = download_info.value  
download.save_as(f'downloads/{download.suggested_filename}')

避坑指南：

设置下载路径避免权限问题

验证文件名防覆盖：if download.suggested_filename.endswith('.csv')

三、调试技巧：解决交互中的疑难杂症

1. 智能等待策略

元素状态检测：

# 等待元素可见（超时5秒）
page.wait_for_selector('.modal', state='visible', timeout=5000)  
# 等待加载动画消失
page.wait_for_selector('.spinner', state='hidden')

自定义等待条件：

def is_button_enabled():  
    return page.is_enabled('button#submit')  
page.wait_for_function(is_button_enabled)

2. 断点调试与录屏分析

插入断点：

page.pause()  # 暂停测试，手动操作调试

Trace Viewer 分析：

# 记录操作日志（含DOM快照、网络请求）
context.tracing.start(screenshots=True, snapshots=True)  
# 执行操作...
context.tracing.stop(path='trace.zip')

查看日志：npx playwright show-trace trace.zip

3. 实时定位器修复

使用 Playwright Inspector（调试模式）动态调整定位器：

PWDEBUG=1 pytest -s  # 启动调试

悬停元素查看推荐定位器
编辑定位器字段即时验证效果

四、高级场景：复杂交互的解决方案

iframe 嵌套操作

frame = page.frame_locator('iframe#payment')  
frame.get_by_role('button', name='Pay').click()

Shadow DOM 穿透

# 通过 >> 穿透Shadow边界
page.locator('div#shadow-host input').fill('data')

动态列表交互

items = page.locator('.list > li')  
await items.filter(has_text='VIP').click()  # 点击含"VIP"的项

五、避坑指南：交互操作稳定性提升

问题	解决方案
元素定位失败	优先用 `get_by_role()`/`get_by_test_id()` 替代 CSS/XPath
动态加载超时	组合 `wait_for_selector()` + `networkidle` 事件
文件上传卡顿	用 `set_input_files()` 代替模拟点击选择文件
跨页面下载丢失	确保下载按钮在当前上下文，非新开标签页

实战总结：

🔹 优先语义化定位：get_by_role() 兼顾稳定性与可读性
🔹 文件操作走API：set_input_files() 和 expect_download() 替代人工模拟
🔹 调试必用Trace：失败时分析 trace.zip 定位根因
🔹 复杂交互拆步骤：拖拽/悬停等操作分段验证

掌握上述技能，可覆盖 登录、表单提交、文件管理、动态组件操作 等 90% 的 Web 自动化场景！下一步可进阶学习 网络拦截 与 移动端模拟。

学习交流群

爱测智能化服务平台

测开人必看！0代码+AI驱动，测试效率飙升300% ——霍格沃兹测试开发学社‌重磅上新‌「爱测智能化服务平台」限时开放体验！

一码难求的Manus：智能体技术如何重构生产力？测试领域又有哪些新机遇？

开源工具

AppCrawler 开源版
https://github.com/seveniruby/AppCrawler

Hogwarts-Browser-Use 开源版
指导安装贴：hogwarts-browser-use - 开源项目 - 爱测-测试人社区

专业版（7天免费试用）

自动遍历测试框架 AppCrawler 专业版
通用数据驱动测试框架 hogwarts-ddt 专业版
测试智能体框架 hogwarts-agent 专业版

学社提供的资源

教育官网：霍格沃兹测试开发学社
科技官网：测吧（北京）科技有限公司
火焰杯就业选拔赛：火焰杯就业选拔赛 - 霍格沃兹测试开发学社
火焰杯职业竞赛：火焰杯职业竞赛 - 霍格沃兹测试开发学社
学习路线图：霍格沃兹测试开发学社
公益社区论坛：爱测-测试人社区 - 软件测试开发爱好者的交流社区，交流范围涵盖软件测试、自动化测试、UI测试、接口测试、性能测试、安全测试、测试开发、测试平台、开源测试、测试教程、测试面试题、appium、selenium、jmeter、jenkins
公众号：霍格沃兹测试学院
视频号：霍格沃兹软件测试
ChatGPT体验地址：霍格沃兹测试开发学社

本套视频教程所有配套资料领取方式如下:

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能