使用Selenium执行JavaScript脚本：探索Web自动化的新领域

前言

在我们使用selenium进行自动化测试的时候，selenium能够帮助我们实现元素定位和点击输入等操作，但是有的时候，我们会发现，即使我们的元素定位没有问题，元素也无法执行操作；也有部分情况是我们无法直接定位滚动条河时间控件来进行操作，这个时候，我们就需要借助JavaScript来解决问题。本文就来给大家介绍一下selenium如何执行JavaScript脚本，以及这种方法的一些常见应用场景和最佳实践。

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']

使用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完成，我们需要先移除readonly属性，再给value赋值，具体代码如下：

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_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="2024-3-20"')
        time.sleep(3)

总结

通过使用Selenium执行JavaScript脚本，我们可以更灵活地操作根级别文档和时间控件，提高了测试的效率和准确性。在实际应用中，开发者可以根据具体需求，灵活运用JavaScript脚本来优化自动化测试和网页操作，从而更好地满足项目需求。