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)