【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)

给大家附上js自学网站，大家自行去学习JavaScript。
JavaScript 教程

---

文末说明
推荐博文： 只需Docker，环境问题再也不是测开路上的『坑』_霍格沃兹测试开发学社的博客-CSDN博客