《最新出炉》系列初窥篇-Python+Playwright自动化测试-4-playwright等待浅析
1.简介
在介绍selenium的时候，宏哥也介绍过等待，是因为在某些元素出现后，才可以进行操作。有时候我们自己忘记添加等待时间后，查了半天代码确定就是没有问题，奇怪的就是获取不到元素。然后搞了好久，或者经过别人的提示才恍然大悟没有添加等待时间。而playwright为了避免我们犯这么low的错误，它对元素执行操作前，会进行一系列可操作性检查，以确保这些行动按预期运行。它会自动等待所有相关检查通过，然后才执行请求的操作。如果所需的检查未在给定的范围内通过则抛出timeout，操作将失败并显示TimeoutError。正是由于playwright添加了默认等待时间才会增加脚本稳定性。
2.自动等待
什么是playwright的自动等待？在官网我们可以看到这样一段话：
Auto-wait. Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts - the primary cause of flaky tests.
翻译过来的大概意思就是说：自动等待：playwright对元素执行操作前，会进行一系列可操作性检查，以确保这些行动按预期运行。它会自动等待所有相关检查通过，然后才执行请求的操作。如果所需的检查未在给定的范围内通过则抛出timeout，操作将失败并显示TimeoutError。
如元素点击操作，在操作元素之前需要预判：
以下是针对每个操作执行的可操作性检查的完整列表：
| Action | Attached | Visible | Stable | Receives Events | Enabled | Editable |
|---|---|---|---|---|---|---|
| check | Yes | Yes | Yes | Yes | Yes | - |
| click | Yes | Yes | Yes | Yes | Yes | - |
| dblclick | Yes | Yes | Yes | Yes | Yes | - |
| setChecked | Yes | Yes | Yes | Yes | Yes | - |
| tap | Yes | Yes | Yes | Yes | Yes | - |
| uncheck | Yes | Yes | Yes | Yes | Yes | - |
| hover | Yes | Yes | Yes | Yes | - | - |
| scrollIntoViewIfNeeded | Yes | - | Yes | - | - | - |
| screenshot | Yes | Yes | Yes | - | - | - |
| fill | Yes | Yes | - | - | Yes | Yes |
| selectText | Yes | Yes | - | - | - | - |
| dispatchEvent | Yes | - | - | - | - | - |
| focus | Yes | - | - | - | - | - |
| getAttribute | Yes | - | - | - | - | - |
| innerText | Yes | - | - | - | - | - |
| innerHTML | Yes | - | - | - | - | - |
| press | Yes | - | - | - | - | - |
| setInputFiles | Yes | - | - | - | - | - |
| selectOption | Yes | Yes | - | - | Yes | - |
| textContent | Yes | - | - | - | - | - |
| type | Yes | - | - | - | - | - |
3.slow_mo
通过前边的学习和实践，想必大家和宏哥有同样的感觉吧：Playwright 打开浏览器运行脚本的速度那就是一个字：快！相对于selenium，playwright执行速度会更快，眨眼间就完事了。因此为了便于我们查看执行的过程，我们可以加上等待来减缓执行，但是与selenium不同，playwright通过slow_mo （单位是毫秒）减慢执行速度，它的作用范围是全局的，从启动浏览器到操作元素每个动作都会有等待间隔，方便在出现问题的时候看到页面操作情况。使用方法如下:
chromium.launch(headless=False, slow_mo=50)
3.1牛刀小试
宏哥就按照上边的方法实践一下，看一下是否真的可以减缓执行速度。
3.1.1参考代码
# coding=utf-8
# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行
# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-05-25
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《《最新出炉》系列初窥篇-Python+Playwright自动化测试-4-playwright自动等待及扩展
'''
# 3.导入模块
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False, slow_mo=5000)
page = browser.new_page()
page.goto("https://www.baidu.com")
print(page.title())
page.fill('#kw', "北京-宏哥")
page.click('#su')
browser.close()
3.1.2运行代码
1.运行代码，右键Run'test'，控制台输出，如下图所示：
2.代码的执行过程，如下图所示：
4.time.sleep()
与selenium不同，playwright不再支持time.sleep()，而是使用page.wait_for_timeout()来实现等待，当我们调试时需要等待，即可使用该方法。Playwright 在查找元素的时候具有自动等待功能，如果你在调试的时候需要使用等待，你应该使用page.wait_for_timeout(5000) 代替 time.sleep(5)并且最好不要等待超时。
注：请使用 wait( wait_for_timeout) 方法而不是time模块。这是因为我们内部依赖于异步操作，并且在使用时time.sleep(5)无法正确处理它们。
4.1牛刀小试
宏哥就按照上边的方法实践一下。
4.1.1参考代码
# coding=utf-8
# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行
# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-05-25
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《《最新出炉》系列初窥篇-Python+Playwright自动化测试-4-playwright自动等待及扩展
'''
# 3.导入模块
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False, slow_mo=1000)
page = browser.new_page()
page.goto("https://www.baidu.com")
print(page.title())
# 等待5秒
page.wait_for_timeout(5000)
page.fill('#kw', "北京-宏哥")
page.click('#su')
# 等待3秒
page.wait_for_timeout(3000)
browser.close()
4.1.2运行代码
1.运行代码，右键Run'test'，控制台输出，如下图所示：
2.代码的执行过程，如下图所示：
5.小结
本文主要介绍了一些playwright的使用与selenium有一些不同，我们需要注意不同点，比如playwright默认是无头模式运行以及等待的改变。下一篇文章我们将介绍playwright定位元素的方法。
好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。
5.1自行设置等待
即使 Playwright 已经做了充分准备，但是也并不完全稳定，在实际项目中依旧容易出现因页面加载导致事件没有生效等问题，为了避免这些问题，需要自行设置等待。
# 固定等待1秒
page.wait_for_timeout(1000)
# 等待事件
page.wait_for_event(event)
# 等待加载状态
page.get_by_role("button").click()
page.wait_for_load_state()