前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《最新出炉》系列初窥篇-Python+Playwright自动化测试-31-JavaScript的调用执行-上篇

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

作者头像
北京-宏哥
发布2023-11-22 10:57:25
2490
发布2023-11-22 10:57:25
举报
文章被收录于专栏:北京宏哥

1.简介

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

2.用法

上一篇中就提到过,这里提取一下,语法如下:

代码语言:javascript
复制
# 原生js
js = '原生js;'
# 调用js
page.evaluate(js)

3.项目实战

3.1场景一

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

   详细参考博客:日历时间控件(传送门

3.2场景二

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

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

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

语法如下:

代码语言:javascript
复制
js = "var q=document.documentElement.scrollTop=滚动条的位置"

page.evaluate(js)

4.实际案例(场景二)

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

4.1代码设计
4.2参考代码
代码语言:javascript
复制
# coding=utf-8🔥

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

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-11-11
@author: 北京-宏哥 
公众号:北京宏哥
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.获取浏览器滚动条滚动距离的问题,共有两种方法,

代码语言:javascript
复制
document.body.scrolltop//当没有DOCTYPE声明时,用它
document.documentElement.scrollTop//标准网页,用它

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

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

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

代码语言:javascript
复制
var height = document.body.scrolltop||document.documentelement.scrolltop

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-11-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.简介
  • 2.用法
  • 3.项目实战
    • 3.1场景一
      • 3.2场景二
      • 4.实际案例(场景二)
        • 4.1代码设计
          • 4.2参考代码
            • 4.3运行代码
            • 5.小结
            相关产品与服务
            云服务器
            云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档