javascript 自动化运维 javascript自动化脚本

转载

夜行者3号 2023-08-28 16:11:04

文章标签 javascript 自动化运维 javascript 前端自动化时间控件 文章分类 JavaScript 前端开发

（八） web自动化测试-selenium执行JavaScript脚本

文章目录

（八） web自动化测试-selenium执行JavaScript脚本
前言
一、selenium中使用js控制滚动条高度
二、控制内嵌滚动条高度
三、selenium中使用js操作时间控件
总结

前言

selenium能够执行js，使得selenium拥有更强大的能力，js可以做的事情，selenium大部分也能做：

直接使用js操作页面，能解决很多click()不生效的问题
页面滚动到底部，顶部
处理富文本，时间控件的输入

方法：
execute_script()：执行js代码
return：可以返回js的返回结果
execute_script：argument传参

一、selenium中使用js控制滚动条高度

场景：需要定位的元素没有在当前页面显示，无法定位，需要上下滑动滚动条才可以看到

–scrollHeight 获取对象的滚动高度。
–scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
–scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
–scrollWidth 获取对象的滚动宽度。

滚动到底部

js = "window.scrollTo(0,document.body.scrollHeight)"

滚动到顶部

js = "window.scrollTo(0,0)"

横向滚动

1.滚动条左右滚动（一般屏幕最大化后，很少出现此种情况）

2.通过坐标控制横向和纵向滚动条scrollTo(x, y)

js = "window.scrollTo(100,200);"

注：scrollTo方法无浏览器兼容问题，可以通用，但其他的方法有兼容性区别，如：

1.针对chrome

js = "var q=document.body.scrollTop=0"

2.除chrome其他浏览器

js = "var q=document.documentElement.scrollTop=0"

示例：
打开百度
搜索北京
滑动到底部
点击下一页按钮

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep


class TestJs:
    def setup(self):
        self.driver = webdriver.Chrome()
        self.driver.maximize_window()
        self.driver.implicitly_wait(3)
        self.driver.get("https://www.baidu.com")

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

    def test_js(self):
        # 使用js定义输入框元素，return返回给input_element
        input_element = self.driver.execute_script("return document.getElementById('kw')")
        input_element.send_keys("北京")
        # 使用js定义搜索按钮元素，return返回给click_element
        click_element = self.driver.execute_script("return document.getElementById('su')")
        click_element.click()
        # 滑动至页面最下方
        self.driver.execute_script("document.documentElement.scrollTop=10000")
        sleep(3)
        # 点击下一页按钮
        self.driver.find_element(By.XPATH, '//*[@id="page"]/div/a[10]').click()
        sleep(3)
        # 获取页面title
        print(self.driver.execute_script("return document.title"))
        # 获取页面性能数据
        print(self.driver.execute_script('return JSON.stringify(performance.timing)'))

注：

需要js操作元素是，js代码中必须使用return返回后，才可以进行后续操作
也可以获取页面的性能数据，用来后续的测试分析

二、控制内嵌滚动条高度

场景：在内嵌网页或文本中有滚动条

上下左右滚动

js='document.getElementById("div_id").scrollTop=0’

js='document.getElementById("div_id").scrollTop=10000’

js='document.getElementById("div_id").scrollLeft=0

js='document.getElementById("div_id").scrollLeft=10000’

三、selenium中使用js操作时间控件

场景：大部分的时间控件都是readonly属性，需要手动去选择对应的时间，手工测试中很容易做到，但是有readonly属性会导致sendkeys方法无法使用

处理过程：

1.取消日期的readonly属性
2.给value赋值
3.用js实现上述步骤，在使用execute_scripy来执行
案例需求：
打开网址：https://www.12306.cn/index/
修改出发日期为2022-05-30
打印出发日期
关闭

def test_date(self):
        self.driver.get("https://www.12306.cn/index/")
        # 定义字符串，接受js命令，移除元素的readonly属性
        data_js = "document.getElementById('train_date').removeAttribute('readonly')"
        self.driver.execute_script(data_js)
        # 元素赋值，修改日期
        data_js1 = "document.getElementById('train_date').value='2022-05-31'"
        self.driver.execute_script(data_js1)
        print(self.driver.find_element(By.ID, 'train_date').text)
        sleep(5)

注：如果空间没有readonly属性，可以直接使用元素的value进行赋值