【Web自动化测试】（七）Selenium中执行JavaScript脚本-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Web自动化测试】（七）Selenium中执行JavaScript脚本。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

相关文章链接：
【Web自动化测试】（一）Selenium介绍及安装部署说明
【Web自动化测试】（二）使用selenium编写测试用例
【Web自动化测试】（三）Selenium中控件定位方法
【Web自动化测试】（四）Selenium中WEB控件交互的方法
【Web自动化测试】（五）Selenium中的三种等待方式
【Web自动化测试】（六）Selenium中表单、多窗口、多frame、多浏览器等场景处理方法
【Web自动化测试】（八）cookie复用

前言：
本文为在霍格沃兹测试开发学社中学习到的一些技术，写出来分享给大家，希望有志同道合的小伙伴可以一起交流技术，一起进步。

Selenium能够执行js，这使得Selenium拥有更强大的功能。只要js可以完成的操作，Selenium大部分应该也能完成。
基于这一功能，Selenium直接使用js操作，可以解决很多click()不生效的情况。

1.Selenium中调用js
在Selenium中主要使用一下函数来调用js：

execute_script(script, *args)

说明：在当前窗口/框架中同步执行JavaScript。
参数：
- script：被执行的js脚本
- *args：被执行的js脚本中使用的参数
使用方法：
- driver.execute_script('return document.title;')
- 注意： js脚本中return document.title;中使用return可以获取js脚本返回的结果
源码：

    def execute_script(self, script, *args):
        converted_args = list(args)
        command = None
        if self.w3c:
            command = Command.W3C_EXECUTE_SCRIPT
        else:
            command = Command.EXECUTE_SCRIPT

        return self.execute(command, {
            'script': script,
            'args': converted_args})['value']

2.示例

示例一：使用js完成滑动操作

场景：当页面显示的数据较多，需要点击底部的对象时，需要把鼠标移动到底部，才可以点击对象。
示例说明：
- 第一步：打开百度首页；
- 第二步：输入搜索关键字；
- 第三步：点击搜索后，跳转到搜索结果页；
- 第四步：滑动到底部，点击下一页；


import time
from selenium import webdriver


class TestJs:
    def setup(self):
        self.driver=webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.implicitly_wait(5)

    def teardown(self):
        self.driver.quit()

    def test_js_scroll(self):
        self.driver.get("https://www.baidu.com/")
        # 定位搜索框，传入搜索内容
        self.driver.find_element_by_id("kw").send_keys("selenium")
        # 使用JS定位搜索按钮，点击搜索
        ele_search = self.driver.execute_script('return document.getElementById("su")')
        ele_search.click()
        # 将搜索页面滑动至最下方
        self.driver.execute_script('document.documentElement.scrollTop=10000')
        time.sleep(3)
        # 点击下一页
        self.driver.find_element_by_xpath('//*[@id="page"]/div/a[10]').click()
        time.sleep(3)
        #打印js脚本执行后的返回结果
            #返回页面标题
        print(self.driver.execute_script('return document.title'))
             #返回performance.timing
        print(self.driver.execute_script('return JSON.stringify(performance.timing)'))

示例二：使用js操作时间控件

场景：大部分时间空间都是readonly属性，需要手动去选择对应的时间，手工测试中很容易做到，自动化中对控件的操作可以使用js完成，
处理思路：
- 1.要取消日期的readonly属性；
- 2.给value赋值；
- 3.写代码来实现如上两步骤，再webdriver对js进行处理；
示例说明：
- 打开网址：https://www.12306.cn/
- 修改触发日期
- 打印出发日期
- 关闭网址

lass TestJs:
    def setup(self):
        self.driver=webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.implicitly_wait(5)

    def teardown(self):
        self.driver.quit()
        
    def test_js_datetime(self):
        # 打开网址
        self.driver.get('https://www.12306.cn/')
        time.sleep(3)
        # 定位时间元素；进行readonly属性去除操作；赋值新日期
        # 注意：可以合并执行JS方法的写法
        self.driver.execute_script(
            'a=document.getElementById("train_date");a.removeAttribute("readonly");a.value="2021-1-20"')
        time.sleep(3)