Playwright自动化实战一
在今后的一段时间里，我将针对playwright在实际项目中的使用进行讲解，以及对playwright使用中的一些心得进行分享，废话不多说，直接来今天的分享内容。
首先我们来列举下playwright中的一些等待关键字的具体逻辑，我这里举得是我常用的一些
| wait_for() | 元素等待 | 接收两个参数 【timeout、state】 | 显示等待 |
| wait_for_timeout() | 元素等待 | 接收一个参数 【timeout】 | 不是显示等待，不会检查任何元素状态 |
| wait_for_selector() | 等待某个selector | 接收多个参数 【selector、state、timeout】 | 显示等待 |
| wait_for_element_state() | 等待到某个状态 | 接收多个参数 【state、timeout】 | 一般与wait_for_selector() 搭配使用 |
| wait_for_url() | 等待跳转到某个路由 | 接收多个参数 【url、timeout】 | |
| wait_for_load_state() | 等待页面加载到指定状态 | 接收多个参数 【state、timeout】 | |
1、wait_for(state,timeout)，含义：最多等timeout毫秒，期间一旦元素达到指定state就提前返回，超时仍然未满足就报错
| 参数 | 含义 | 举例 |
|---|---|---|
state="visible" | 元素可见（出现在 DOM 且宽高 > 0） | 按钮出现即可点击 |
state="attached" | 元素在 DOM 里（可见/不可见都算） | 只想确认 DOM 存在 |
state="hidden" | 元素不可见（DOM 可存在，但宽高=0 或 display:none） | 等弹框消失 |
state="detached" | 元素已移除（DOM 里不存在） | 等加载条消失 |
2、wait_for_timeout(timeout)，含义：固定睡眠，人为操作
| API | 类型 | 行为 | 用途 |
|---|---|---|---|
wait_for(state="visible", timeout=5000) | 显式等待 | 条件满足就提前结束，超时抛错 | 等元素出现/消失 |
wait_for_timeout(5000) | 固定睡眠 | 固定睡满 5 秒，不检查任何条件 | 人为延时、缓冲 |
3、wait_for_selector(selector，state，timeout)，含义：最多等timeout，期间一旦选择器对应的元素达到指定状态就提前返回，超时仍未满足则报错
| 参数 | 含义 | 举例 |
|---|---|---|
state="visible" | 元素可见（出现在 DOM 且宽高 > 0） | 按钮出现即可点击 |
state="attached" | 元素在 DOM 里（可见/不可见都算） | 只想确认 DOM 存在 |
state="hidden" | 元素不可见（DOM 可存在，但宽高=0 或 display:none） | 等弹框消失 |
state="detached" | 元素已移除（DOM 里不存在） | 等加载条消失 |
| API | 类型 | 行为 | 用途 |
|---|---|---|---|
wait_for_selector(...) | 显式等待 | 条件满足就提前结束，超时抛错 | |
wait_for_timeout(5000) | 固定睡眠 | 固定睡满 5 秒，不检查任何条件 | 人为延时、缓冲 |
self.page.wait_for_selector(//div[@class='app-menu']//div[@class='el-scrollbar__view']/ul/div, state='visible'，timeout=5000)
最多等 5 秒，期间元素一旦可见就提前返回；超时仍未可见就抛错4、wait_for_element_state()，含义：最多等timeout毫秒，期间一旦某个元素达到指定state就提前返回
| 参数 | 含义 | 举例 |
|---|---|---|
state="visible" | 元素可见（出现在 DOM 且宽高 > 0） | 按钮出现即可点击 |
state="attached" | 元素在 DOM 里（可见/不可见都算） | 只想确认 DOM 存在 |
state="hidden" | 元素不可见（DOM 可存在，但宽高=0 或 display:none） | 等弹框消失 |
state="detached" | 元素已移除（DOM 里不存在） | 等加载条消失 |
element.wait_for_element_state("visible", timeout=5_000)
最多等 5 秒，期间这个元素一旦可见就提前返回；超时仍未可见就抛错5、wait_for_url()，含义：最多等timeout毫秒，期间一旦当前URL匹配给定模式就提前返回，超时仍未匹配则报错
| 模式 | 含义 | 示例 |
|---|---|---|
| 完整字符串 | 完全相等 | "https://example.com/ok" |
** 通配符 | 任意路径段 | "**/insurance/verify*" |
| 正则 | 复杂匹配 | re.compile(r".*/verify\?id=\d+") |
page.wait_for_url("**/insurance/verify*", timeout=5_000)
最多等 5 秒，期间 URL 一旦匹配就提前返回；超时仍未匹配就抛错6、wait_for_load_state()，含义：页面加载状态等待【一旦网络空闲就返回】，最多等timeout毫秒，期间一旦页面达到指定加载状态就提前返回，超时仍未满足就报错
| 状态 | 含义 | 常用场景 |
|---|---|---|
"load"（默认） | DOM load 事件触发（HTML 下载完） | 传统页面 |
"networkidle" | 网络空闲（无活跃请求 ≥500ms） | 前后端分离/Ajax 多 |
"domcontentloaded" | DOMContentLoaded 事件触发（DOM 树构建完） | 只需 DOM 解析完 |
page.wait_for_load_state("networkidle", timeout=5_000)
最多等 5 秒，期间一旦网络空闲就提前返回；超时仍未空闲就抛错7、很多情况下，会将上面的进行组合使用，比如：
wait_for_selector+wait_for_element_state，这个是我个人用的比较多的
等到元素已经完全加载且处于期望的状态
wait_for_selector(selector).wait_for_element_state(state=state_info,timeout=10000)
state_info: Literal["disabled", "editable", "enabled", "hidden", "stable", "visible"] = "stable"优势：首先通过wait_for_selector()来等待选择器所定位的元素，然后在返回的元素上调用wait_for_element_state()方法
返回值：如果返回的是None，表示等待完成
总结：
实战中，等待是经常使用的操作，不管是web还是移动，都无法做到及时响应下一步，但是固定等待时间又很耗费时间，效率不高，因此利用wait中的相关状态判断+超时时间，可以极大的提高效率，不至于无脑等待。