web自动化基础之js操作

为什么有了selenium还需要执行js操作?

前面我们讲过,selenium之所以能操纵浏览器,是因为我们写好的selenium代码它会经过处理后作为参数通过http协议传给webDriver服务端,webDriver再根据请求来决定向浏览器发送什么样的js代码,浏览器的js解释器执行js代码之后就达到了我们web自动化预期的效果。那么为什么有了selenium封装的那么多指令,还需要执行js呢?因为有一些指令js是没有封装的。比如说修改某个元素的属性,selenium中是没有封装这样的方法的:
在这里插入图片描述
所以要执行一些selenium中没有对应封装方法的指令我们就需要执行js。

例子

举个例子,12306。我们要通过selenium输入或选择出发日期,怎么实现呢?
在这里插入图片描述
一个常见的思路是定位弹出日期的按钮并点击,弹出日期选择框后再定位具体的日期然后再点击:
在这里插入图片描述
但是我们在控制台中是定位不到弹出的日期选择框这个组件的,可以看到它是一个伪元素,我们无法定位。
在这里插入图片描述
第二个方法是,既然触发日期它有一个输入框,那么我们直接在上面输入日期就可以了。但是这样也是不行的。我们看下这个元素有个readonly属性,它限制了我们的输入,我们是无法直接通过send_keys直接输入的。我们得修改readonly属性的值为false然后才能进行输入。而selenium中没有封装修改属性的方法,所以我们得自己手写js,然后拜托selenium去发送js指令让浏览器执行。
在这里插入图片描述

#初始化浏览器并访问url
driver = webdriver.Chrome()
driver.get("https://www.12306.cn/")

#js脚本。设置readonly=false,然后设置value的值
js = """
e=document.getElementById("train_date");
e.readOnly=false;
e.value="2021-04-01";
"""
#执行js代码
driver.execute_script(js)

执行的时候,出发日期并没有按我们所想的那样输入2021-04-01,这是因为执行js时没有设置等待。

为什么执行js需要等待?

首先,浏览器执行js代码前,页面得加载出来,所以在执行js前需要设置等待时间。接着,浏览器执行js代码也需要时间,虽然执行得很快,但也还是需要设置等待时间的。所以js代码在执行前、执行时都需要设置等待时间。那么三种等待时间用哪个呢?答案是强制等待。

为什么要用强制等待?

前面所说的显性等待和隐性等待它们都有一个共同点,它们都是selenium的内部方法,所以只能用在selenium中。而我们现在是需要等待浏览器来执行js,这是两个系统,一个是python,一个是浏览器,两个系统之间的等待就需要用强制等待。

浏览器或电脑性能太差,导致浏览器执行js代码效率太低怎么办?

还有一种情况就是浏览器或电脑的性能太差,导致浏览器执行js代码给我们返回的结果特别慢,这时就应该每一条js语句分开写,然后单独设置等待:

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://www.12306.cn/index/")

# 使用强制等待
time.sleep(1)

# 发送js给浏览器
js = """e = document.getElementById("train_date");"""
driver.execute_script(js)
time.sleep(0.2)

js = """e.readOnly = false;"""
driver.execute_script(js)
time.sleep(0.2)

js = """e.value = "2020-07-20";"""
driver.execute_script(js)
time.sleep(0.2)

selenium与js的交叉问题

还有一种情况是,我们先通过selenium定位到元素,然后再用js改变这个元素的属性,这样做可以吗?
我们先来看下execute_script方法的部分源码:

    def execute_script(self, script, *args):
        """
        Synchronously Executes JavaScript in the current window/frame.

        :Args:
         - script: The JavaScript to execute.
         - \*args: Any applicable arguments for your JavaScript.

        :Usage:
            driver.execute_script('return document.title;')
        """

可以看到这个方法还有一个不定长参数 args,这个参数可以用来传递一些在执行 js 代码的时候需要的一些参数,比如通过 js 去操作某个元素,我们可以将selenium定位到的元素传进去。

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://www.12306.cn/index/")

# 使用强制等待
time.sleep(1)

# 使用 python 定位到元素
element = driver.find_element_by_id("train_date")
time.sleep(0.2)

# arguments[0] 相当于python中format方法,作用是占坑位
js = """arguments[0].readOnly = false;"""
driver.execute_script(js, element)
time.sleep(0.2)

js = """arguments[0].value = "2020-07-20";"""
driver.execute_script(js_code, element)
time.sleep(0.2)

用js实现窗口滚动

为什么需要进行窗口滚动?

有很多场景我们需要操作的元素都在当前可见页面的下面,所以需要拖动滚动条滚动到这个元素可见后才能进行操作:
在这里插入图片描述

如何进行滚动?

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://www.12306.cn/index/")

#先定位元素
element = driver.find_element_by_link_text("常见问题")
#进行窗口滚动,把元素滑动到可见范围内
el.location_once_scrolled_into_view
#点击
element.click()

如何实现循环滚动?

还有一种情况就是页面会边滚动边加载数据,这时就需要不断地进行滚动操作:
在这里插入图片描述
js里有一个scrollTo方法,可以通过传入网页的横坐标及纵坐标后,滚动到对应坐标的位置(下面是菜鸟教程对这个方法的介绍):
在这里插入图片描述
另外还有一个属性需要知道的是scrollHeight,它表示的是浏览器的滚动高度:
在这里插入图片描述

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://readhub.cn/topics")

#滑动到页面最底部
for i in range(3):
    js = 'window.scrollTo(0, document.body.scrollHeight);'
    driver.execute_script(js)
time.sleep(3)
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web自动化测试是一种通过编写脚本或使用自动化测试工具来模拟用户在Web应用程序中的操作,并验证应用程序的功能和性能的方法。要学习Web自动化测试,可以按照以下步骤进行: 1. 掌握基本的编程知识:Web自动化测试通常使用编程语言来编写测试脚本,所以需要学习一种编程语言,比如Python、Java或JavaScript。掌握基本的编程概念和语法是学习Web自动化测试的基础。 2. 学习HTML和CSS:了解HTML和CSS的基本知识对于理解Web页面的结构和样式很重要。这对于定位操作页面元素非常有帮助。 3. 学习Web开发技术:了解基本的Web开发技术,比如HTTP协议、浏览器工作原理、前端框架等,可以帮助你更好地理解Web应用程序的工作原理,从而更好地进行自动化测试。 4. 选择自动化测试工具:有许多流行的自动化测试工具可供选择,比如Selenium、Cypress、Puppeteer等。选择一个适合你的项目需求和编程语言的工具,并深入学习它的使用。 5. 实践项目:通过实践项目来巩固学到的知识。选择一个简单的Web应用程序,并编写自动化测试脚本来模拟用户的操作并验证应用程序的功能和性能。 6. 持续学习和提升:Web自动化测试是一个不断发展的领域,新的工具和技术不断涌现。保持学习的态度,关注最新的发展,参与社区讨论和交流,不断提升自己的技能。 希望这些步骤能帮助你开始学习Web自动化测试!如果你有任何更具体的问题,欢迎继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值