《最新出炉》系列初窥篇-Python+Playwright自动化测试-4-playwright等待浅析
<h3>1.简介</h3><p>在介绍selenium的时候，宏哥也介绍过等待，是因为在某些元素出现后，才可以进行操作。有时候我们自己忘记添加等待时间后，查了半天代码确定就是没有问题，奇怪的就是获取不到元素。然后搞了好久，或者经过别人的提示才恍然大悟没有添加等待时间。而playwright为了避免我们犯这么low的错误，它对元素执行操作前，会进行一系列可操作性检查，以确保这些行动按预期运行。它会自动等待所有相关检查通过，然后才执行请求的操作。如果所需的检查未在给定的范围内通过则抛出timeout，操作将失败并显示TimeoutError。正是由于playwright添加了默认等待时间才会增加脚本稳定性。</p>
<h3>2.自动等待</h3>
<p>什么是playwright的自动等待？在官网我们可以看到这样一段话：</p>
<p><strong>Auto-wait.</strong> 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.</p>
<p>翻译过来的大概意思就是说：自动等待：playwright对元素执行操作前，会进行一系列可操作性检查，以确保这些行动按预期运行。它会自动等待所有相关检查通过，然后才执行请求的操作。如果所需的检查未在给定的范围内通过则抛出timeout，操作将失败并显示TimeoutError。</p>
<p>如元素点击操作，在操作元素之前需要预判：</p>
<p>以下是针对每个操作执行的可操作性检查的完整列表：</p>
<table>
<thead>
<tr><th style="text-align: left">Action</th><th style="text-align: center">Attached</th><th style="text-align: center">Visible</th><th style="text-align: center">Stable</th><th style="text-align: center">Receives Events</th><th style="text-align: center">Enabled</th><th style="text-align: center">Editable</th></tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">check</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">click</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">dblclick</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">setChecked</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">tap</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">uncheck</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">hover</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">scrollIntoViewIfNeeded</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">screenshot</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">fill</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
</tr>
<tr>
<td style="text-align: left">selectText</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">dispatchEvent</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">focus</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">getAttribute</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">innerText</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">innerHTML</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">press</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">setInputFiles</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">selectOption</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">textContent</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: center">Yes</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
</tr>
</tbody>
</table>
<h3>3.slow_mo</h3>
<p>通过前边的学习和实践，想必大家和宏哥有同样的感觉吧：Playwright 打开浏览器运行脚本的速度那就是一个字：快！相对于selenium，playwright执行速度会更快，眨眼间就完事了。因此为了便于我们查看执行的过程，我们可以加上等待来减缓执行，但是与selenium不同，playwright通过slow_mo （单位是毫秒）减慢执行速度，它的作用范围是全局的，从启动浏览器到操作元素每个动作都会有等待间隔，方便在出现问题的时候看到页面操作情况。使用方法如下:</p>
<div class="cnblogs_code">
<pre>chromium.launch(headless=False, slow_mo=50)</pre>
</div>
<h4>3.1牛刀小试</h4>
<p>宏哥就按照上边的方法实践一下，看一下是否真的可以减缓执行速度。</p>
<h5>3.1.1参考代码</h5>
<div class="cnblogs_code">
<pre># 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<span> sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False, slow_mo=5000<span>)
page =<span> browser.new_page()
page.goto("https://www.baidu.com"<span>)
print<span>(page.title())
page.fill('#kw', "北京-宏哥"<span>)
page.click('#su'<span>)
browser.close()</span></span></span></span></span></span></span></pre>
</div>
<h5>3.1.2运行代码</h5>
<p>1.运行代码，右键Run'test'，控制台输出，如下图所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202305/1232840-20230523160008177-631646617.png" alt="" loading="lazy"></p>
<p>2.代码的执行过程，如下图所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202305/1232840-20230523155356796-1235825031.gif" alt="" loading="lazy"></p>
<h3>4.time.sleep()</h3>
<p>与selenium不同，playwright不再支持time.sleep()，而是使用page.wait_for_timeout()来实现等待，当我们调试时需要等待，即可使用该方法。Playwright 在查找元素的时候具有自动等待功能，如果你在调试的时候需要使用等待，你应该使用page.wait_for_timeout(5000) 代替 time.sleep(5)并且最好不要等待超时。</p>
<p>注：请使用 wait( wait_for_timeout) 方法而不是time模块。这是因为我们内部依赖于异步操作，并且在使用时time.sleep(5)无法正确处理它们。</p>
<h4>4.1牛刀小试</h4>
<p>宏哥就按照上边的方法实践一下。</p>
<h5>4.1.1参考代码</h5>
<div class="cnblogs_code">
<pre># 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<span> sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False, slow_mo=1000<span>)
page =<span> browser.new_page()
page.goto("https://www.baidu.com"<span>)
print<span>(page.title())
# 等待5秒
page.wait_for_timeout(5000<span>)
page.fill('#kw', "北京-宏哥"<span>)
page.click('#su'<span>)
# 等待3秒
page.wait_for_timeout(3000<span>)
browser.close()</span></span></span></span></span></span></span></span></span></pre>
</div>
<h5>4.1.2运行代码</h5>
<p>1.运行代码，右键Run'test'，控制台输出，如下图所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202305/1232840-20230523160622504-1589534569.png" alt="" loading="lazy"></p>
<p>2.代码的执行过程，如下图所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202305/1232840-20230523160904331-1794540992.gif" alt="" loading="lazy"></p>
<h3>5.<span style="font-size: 1.17em">小结</span></h3>
<p>本文主要介绍了一些playwright的使用与selenium有一些不同，我们需要注意不同点，比如playwright默认是无头模式运行以及等待的改变。下一篇文章我们将介绍playwright定位元素的方法。</p>
<p>好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。</p>
<h4>5.1自行设置等待</h4>
<p>即使 Playwright 已经做了充分准备，但是也并不完全稳定，在实际项目中依旧容易出现因页面加载导致事件没有生效等问题，为了避免这些问题，需要自行设置等待。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 固定等待1秒</span>
page.wait_for_timeout(1000<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 等待事件</span>
<span style="color: rgba(0, 0, 0, 1)">page.wait_for_event(event)
</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 等待加载状态</span>
page.get_by_role(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">).click()
page.wait_for_load_state()</span></pre>
</div>
</div>
<div id="MySignature" role="contentinfo">
<div id="MySignature" style="display: block">
<div style="font-size: 13px; border: 1px dashed rgb(45, 161, 45); padding: 10px 15px; background-color: rgb(248, 248, 248)">
<label style="font-weight: bold">
为了方便大家在移动端也能看到我分享的博文，现已注册个人微信公众号，扫描左下方二维码即可，欢迎大家关注，提前解锁更多测试干货！有时间会及时分享相关技术博文。
</label>
<br>
<label style="font-weight: bold">
为了方便大家互动讨论相关技术问题，刚刚建立了咱们的专门的微信群交流互动群，群内会分享交流测试领域前沿知识。请您扫描中间的微信二维码进群
</label>
<br>
<label style="font-weight: bold">
为了方便大家互动讨论相关技术问题，现已组建专门的微信群，由于微信群满100，请您扫描右下方宏哥个人微信二维码拉你进群
<label style="font-weight: bold; color: red; font-size: 15px">
（请务必备注：已关注公众号进群）平时上班忙（和你一样），所以加好友不及时，请稍安勿躁~
</label>
，欢迎大家加入这个大家庭，我们一起畅游知识的海洋。
</label>
<br>
感谢您花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧，让博主能喝上一杯咖啡，在此谢过了！
<br>
如果您觉得阅读本文对您有帮助，请点一下左下角
“推荐”
按钮，您的
<label style="font-weight: bold; color: red; font-size: 15px">
“推荐”
</label>
将是我最大的写作动力！另外您也可以选择
【
<strong>
关注我
</strong>
】
，可以很方便找到我！
<br>
本文版权归作者和博客园共有，来源网址：
https://www.cnblogs.com/du-hong
欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利！
</div>
<div style="text-align: center; margin-top: 10px">
<p style=" font-weight: bolder; color: red; ">
公众号(关注宏哥)     
        
       
       
微信群(扫码进群)    
       
       
    
      
      客服微信
</p>
<img style="width: 200px;padding-right: 50px;" alt="个人微信公众号" src="https://img2018.cnblogs.com/common/1741949/201911/1741949-20191119095948011-608816619.png">
<img style="width: 200px;padding-right: 65px;" alt="微信群" src="https://img2024.cnblogs.com/blog/1232840/202506/1232840-20250610113707419-637869921.png">
<img style="width: 200px" alt="个人微信" src="https://img2018.cnblogs.com/common/1741949/201911/1741949-20191106101257091-849954564.png">
</div>
</div><br><br>
来源：https://www.cnblogs.com/du-hong/p/17425709.html
頁:
[1]