《最新出炉》系列初窥篇-Python+Playwright自动化测试-31-JavaScript的调用执行-上篇
<h3>1.简介</h3><p> 在做web自动化时，有些情况playwright的api无法完成以及无法应对，需要通过或者借助第三方手段比如js来完成实现，比如：去改变某些元素对象的属性或者进行一些特殊的操作，本文讲解playwright怎样来调用JavaScript完成特殊操作。</p>
<h3>2.用法</h3>
<p>上一篇中就提到过，这里提取一下，语法如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 原生js</span>
js = <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">原生js;</span><span style="color: rgba(128, 0, 0, 1)">'</span>
<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 调用js</span>
page.evaluate(js)</pre>
</div>
<h3 id="autoid-0-2-0">3.项目实战</h3>
<h4 id="autoid-0-3-0">3.1场景一</h4>
<p>1.日历时间控件限制手动输入的情况下，<strong>fill()</strong>无法写入数据，需要执行js来移除readonly属性！</p>
<p> 详细参考博客：日历时间控件（传送门）<br></p>
<h4 id="autoid-0-3-1">3.2场景二</h4>
<p>1.有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容。所以，有时候我们就需要模拟页面向下滚动的操作。而python没有提供操作滚动条的方法，只能借助js来完成！</p>
<p>2.使用JS语句模拟向下滚动页面</p>
<p>可以使用JS语句，定位滚动条的位置到最下面，从而实现页面的向下滚动。</p>
<p>语法如下：</p>
<div class="cnblogs_code">
<pre>js = <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">var q=document.documentElement.scrollTop=滚动条的位置</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
page.evaluate(js)</span></pre>
</div>
<h3 id="autoid-0-3-2">4.实际案例（场景二）</h3>
<p>宏哥在这里直接就用博客园的滚动条给小伙伴或者是童鞋们来实战演示一下，大家可以注意宏哥录制浏览器动作视频的滚动条在向下滚动直到博客园的底部。</p>
<h4>4.1代码设计</h4>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231102151454945-2059894211.png" alt="" loading="lazy"></p>
<h4>4.2参考代码</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> coding=utf-8🔥</span>
<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</span>
<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 2.注释：包括记录创建时间，创建人，项目名称。</span>
<span style="color: rgba(128, 0, 0, 1)">'''</span><span style="color: rgba(128, 0, 0, 1)">
Created on 2023-11-11
@author: 北京-宏哥 QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-31-JavaScript的调用执行-上篇
</span><span style="color: rgba(128, 0, 0, 1)">'''</span>
<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 3.导入模块</span>
<span style="color: rgba(0, 0, 255, 1)">from</span> playwright.sync_api <span style="color: rgba(0, 0, 255, 1)">import</span><span style="color: rgba(0, 0, 0, 1)"> sync_playwright
with sync_playwright() as p:
browser </span>= p.chromium.launch(headless=<span style="color: rgba(0, 0, 0, 1)">False)
page </span>=<span style="color: rgba(0, 0, 0, 1)"> browser.new_page()
page.goto(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">https://www.cnblogs.com/</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">)
js </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">var q=document.documentElement.scrollTop=50000</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
page.evaluate(js)
page.wait_for_timeout(</span>3000<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)"> page.pause()</span>
browser.close()</pre>
</div>
<h4>4.3运行代码</h4>
<p>1.运行代码，右键Run'Test'，控制台输出，如下图所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231102151530259-111005876.png" alt="" loading="lazy"></p>
<p>2.运行代码后电脑端的浏览器的动作（自己滚到底部了）。如下图所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231102154349999-1206759258.gif" alt="" loading="lazy"></p>
<h3>5.小结</h3>
<p>1.获取浏览器滚动条滚动距离的问题，共有两种方法，</p>
<div class="cnblogs_code">
<pre>document.body.scrolltop//当没有DOCTYPE声明时，用它
document.documentElement.scrollTop//标准网页，用它</pre>
</div>
<p>2.也有人说chrome只能使用document.body.scrollTop方法得到height值，本人试用了一下，得到的结果是</p>
<p><img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231102154622029-111649287.png" alt="" loading="lazy"></p>
<p>以此可见，Chrome依然遵循上面的标准，使用document.documentElement.scrollTop方式，得到height值</p>
<p>其实在实际使用中，为确保在各个浏览器中的正常使用，js代码可采用如下方法：</p>
<div class="cnblogs_code">
<pre>var height = document.body.scrolltop||document.documentelement.scrolltop</pre>
</div>
<p>因为这二者只有一个值有效，因此保证了在各种情况下都能获取浏览器滚动条滚动的距离。当然了，我们也可以事先在控制台上试一下，或者是一个获取不到就是用另一个方法（二选一即可）。</p>
<p>好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢大家耐心的阅读！喜欢宏哥的别忘记支持一下哈！！！</p>
</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/17787643.html
頁:
[1]