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

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

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

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

  1. 《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)

    1.简介 在做web自动化时,有些情况selenium的api无法完成,需要通过第三方手段比如js来完成实现,比如去改变某些元素对象的属性或者进行一些特殊的操作,本文将来讲解怎样来调用JavaScri ...

  2. 《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)

    1.简介 在实际工作中,我们需要对处理的元素进行高亮显示,或者有时候为了看清楚做跟踪鼠标点击了哪些元素需要标记出来.今天宏哥就在这里把这种测试场景讲解和分享一下. 2.用法 创建一个执行 JS 的对象 ...

  3. python - 接口自动化测试 - RunTest - 测试用例加载执行/测试报告生成

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: run_test.py @ide: PyCharm Com ...

  4. python接口自动化测试二十五:执行所有用例,并生成HTML测试报告

        import requestsimport unittest class TestQQ(unittest.TestCase):    '''测试QQ号接口'''      # 此注释将展示到测 ...

  5. Flutter 即学即用系列博客——04 Flutter UI 初窥

    前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...

  6. Spark系列-初体验(数据准备篇)

    Spark系列-初体验(数据准备篇) Spark系列-核心概念 在Spark体验开始前需要准备环境和数据,环境的准备可以自己按照Spark官方文档安装.笔者选择使用CDH集群安装,可以参考笔者之前的文 ...

  7. Python系列之入门篇——HDFS

    Python系列之入门篇--HDFS 简介 HDFS (Hadoop Distributed File System) Hadoop分布式文件系统,具有高容错性,适合部署在廉价的机器上.Python ...

  8. Python系列之入门篇——MYSQL

    Python系列之入门篇--MYSQL 简介 python提供了两种mysql api, 一是MySQL-python(不支持python3),二是PyMYSQL(支持python2和python3) ...

  9. python爬虫 scrapy2_初窥Scrapy

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  10. 第二篇 Python初识别及变量名定义规范

    第一个Python程序 可以打开notepad或者其他文本编辑器,输入:print("Hello Python!"),将文件保存到任意盘符下,后缀名是  .py 两种python程 ...

随机推荐

  1. VScode 中golang 调试 F5,json文件内容更改 Go

    调试:在Vscode软件中调试.go文件代码 1.1.1 确保调试文件正常运行 准备好.go文件,并且该文件能正常运行,终端输入命令运行程序,如:go run time.go 测试代码: packag ...

  2. tensorflow.js 多分类,机器学习区分企鹅种类

    前言: 在规则编码中,我们常常会遇到需要通过多种区间判断某种物品分类.比如二手物品的定价,尽管不是新品没有 SKU 但是基本的参数是少不了.想通过成色来区分某种物品,其实主要是确定一些参数.然后根据参 ...

  3. tensorflow-2.7-M1-安装依赖openblas问题

    问题描述 安装过程 conda create -n conda-forge-tensorflow conda-forge::tensorflow conda info -e conda activat ...

  4. asset module type 替代 loader 处理图片字体等文件资源

    前面文章中 体验了webpack的打包 .解析css资源 ,接下来看看项目中常用到的图片.字体.文件该怎么处理吧~ 项目路径如下,在上一篇 解析css资源 项目基础上增加了一些文件 demo ├─ s ...

  5. API接口的研发与应用

    ​ API(Application Programming Interface,应用程序编程接口)指的是为不同的软件应用程序提供编程接口的一组协议.规则以及工具的集合,以便它们能够互相交互,实现数据通 ...

  6. 从达梦数据库到Oracle数据库的性能测试数据迁移和导入优化

    为了在同样的数据基础上对比达梦数据库和Oracle数据库的业务性能,我们需要将达梦数据库的数据导入到Oracle数据库中.本文将提供一种思路来解决导入过程中遇到的问题及存在问题记录. 数据库版本信息 ...

  7. Web3.0时代的全新合作模式:DAO

    你有没有遇到这种情况:我有一个很棒的想法,想要开发出一个"改变世界"的项目,但是我既没有技术,也没有人脉,甚至没有资金,导致我始终没有办法开始行动,痛苦万分.就比如在黑客大赛上,我 ...

  8. centos7.6 安装Jenkins

    一.安装java环境 yum install -y java-11-openjdk* 三.将Jenkins存储库添加到yum repos wget -O /etc/yum.repos.d/jenkin ...

  9. 彻底弄懂ip掩码中的网络地址、广播地址、主机地址

    本文为博主原创,转载请注明出处: 概念理解: IP掩码(或子网掩码)用于确定一个IP地址的网络部分和主机部分.它是一个32位的二进制数字,与IP地址做逻辑与运算,将IP地址划分为网络地址和主机地址两部 ...

  10. 2023-10-07:用go语言,给定n个二维坐标,表示在二维平面的n个点, 坐标为double类型,精度最多小数点后两位, 希望在二维平面上画一个圆,圈住其中的k个点,其他的n-k个点都要在圆外。

    2023-10-07:用go语言,给定n个二维坐标,表示在二维平面的n个点, 坐标为double类型,精度最多小数点后两位, 希望在二维平面上画一个圆,圈住其中的k个点,其他的n-k个点都要在圆外. ...