《最新出炉》系列初窥篇-Python+Playwright自动化测试-31-JavaScript的调用执行-上篇

1.简介

在做web自动化时，有些情况playwright的api无法完成以及无法应对，需要通过或者借助第三方手段比如js来完成实现，比如：去改变某些元素对象的属性或者进行一些特殊的操作，本文讲解playwright怎样来调用JavaScript完成特殊操作。

2.用法

上一篇中就提到过，这里提取一下，语法如下：

复制代码

# 原生js
js = '原生js;'
# 调用js
page.evaluate(js)

3.项目实战

3.1场景一

1.日历时间控件限制手动输入的情况下，**fill()**无法写入数据，需要执行js来移除readonly属性！

详细参考博客：日历时间控件（传送门）

3.2场景二

1.有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容。所以，有时候我们就需要模拟页面向下滚动的操作。而python没有提供操作滚动条的方法，只能借助js来完成！

2.使用JS语句模拟向下滚动页面

可以使用JS语句，定位滚动条的位置到最下面，从而实现页面的向下滚动。

语法如下：

复制代码

js = "var q=document.documentElement.scrollTop=滚动条的位置"

page.evaluate(js)

4.实际案例（场景二）

宏哥在这里直接就用博客园的滚动条给小伙伴或者是童鞋们来实战演示一下，大家可以注意宏哥录制浏览器动作视频的滚动条在向下滚动直到博客园的底部。

4.1代码设计

4.2参考代码

复制代码

# coding=utf-8🔥

# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行

# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-11-11
@author: 北京-宏哥   QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-31-JavaScript的调用执行-上篇
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://www.cnblogs.com/")
    js = "var q=document.documentElement.scrollTop=50000"
    page.evaluate(js)
    page.wait_for_timeout(3000)
    # page.pause()
    browser.close()

4.3运行代码

1.运行代码，右键Run'Test'，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（自己滚到底部了）。如下图所示：

5.小结

1.获取浏览器滚动条滚动距离的问题，共有两种方法，

复制代码

document.body.scrolltop//当没有DOCTYPE声明时，用它
document.documentElement.scrollTop//标准网页，用它

2.也有人说chrome只能使用document.body.scrollTop方法得到height值，本人试用了一下，得到的结果是

以此可见，Chrome依然遵循上面的标准，使用document.documentElement.scrollTop方式，得到height值

其实在实际使用中，为确保在各个浏览器中的正常使用，js代码可采用如下方法：

复制代码

var height = document.body.scrolltop||document.documentelement.scrolltop

因为这二者只有一个值有效，因此保证了在各种情况下都能获取浏览器滚动条滚动的距离。当然了，我们也可以事先在控制台上试一下，或者是一个获取不到就是用另一个方法（二选一即可）。

好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢大家耐心的阅读！喜欢宏哥的别忘记支持一下哈！！！