软件测试学习笔记丨执行JavaScript脚本

测试人
60 阅读6分钟

本文转自测试人社区，原文链接：ceshiren.com/t/topic/318…

一、JavaScript简介

  • JavaScript是一种具有函数优先级的轻量级，解释型或即时编译型的编程语言；
  • 可以嵌入到HTML页面，对浏览器事件做出响应；
  • 也可以基于Node.js技术进行服务器端编程。

二、常用JavaScript脚本

2.1 js脚本-元素操作

  • 通过css查找元素：
    • 点击元素（对应click）
    • input标签对应的值（对应send_keys）
    • 元素的类属性
    • 元素的文本值
// 百度首页：https://www.baidu.com/
// 修改属性值
document.querySelector("#kw").value = "霍格沃兹测试学院"
// 点击操作
document.querySelector("#su").click()
// 淘宝首页： https://www.taobao.com/ 
// 修改元素的类属性
document.querySelector("#J_SiteNavMytaobao").className\
="site-nav-menu site-nav-mytaobao site-nav-multi-menu J_MultiMenu site-nav-menu-hover"
// 测试人首页：https://ceshiren.com/
// 获取元素内的文本信息
document.querySelector("#ember63").innerText

2.2 js脚本-滚动操作

  • 页面滚动到底部；
  • 指定到滚动的位置。
document.documentElement.scrollTop=10000 
document.querySelector('css表达式').scrollIntoView();

三、Selenium执行JavaScript

3.1 背景

  • 使用场景：
    • 部分场景使用selenium原生方法无法解决。
      • 修改时间控件；
      • 滚动到某个元素；
      • 其他场景。

3.2 使用思路

1、页面调试js脚本；

  • JavaScript调试方法：

（1）进入console调试；

（2）js脚本如果有返回值，则会在浏览器返回。

2、Selenium执行js。

  • 调用执行js方法；
    • 在js语句中添加return：代码可以获取js的执行结果；
    • 结合find_element方法。

四、JavaScript操作案例

1、直接执行

# 直接执行
execute_script("js脚本")
# 获取js执行结果
execute_script("return js脚本")

2、展示下拉框

  • 案例一：通过属性修改展示下拉框
    • 打开网页首页
    • 修改下拉框属性
    • 点击悬浮框内的选项
def test_select_down():
    driver = webdriver.Chrome()
    driver.implicitly_wait(3)    # 打开网址
    driver.get("https://www.taobao.com/")
    # 修改下拉框属性
    sleep(1)
    driver.execute_script('document.querySelector("#J_SiteNavMytaobao").'
                                'className="site-nav-menu site-nav-mytaobao '
                                'site-nav-multi-menu J_MultiMenu '
                                'site-nav-menu-hover"')
    driver.find_element(By.XPATH, "//*[text()='已买到的宝贝']").click()
    sleep(5)
    driver.quit()

3、时间控件

  • 案例二：通过属性修改时间控件的值
    • 打开12306网站
    • 修改时间控件值
    • 打印出发日期
def test_data_time():
    # 打开网址
    driver = webdriver.Chrome()
    driver.implicitly_wait(3)
    driver.get("https://www.12306.cn/index/")
    sleep(1)
    # 修改出发日期
    driver.execute_script('document.querySelector("#train_date").value="2022-12-22"')
    sleep(1)
    # 打印出发日期， 返回值的使用
    train_data = driver.execute_script('return document.querySelector("#train_date").value')
    print(train_data)
    sleep(3)

本文转自测试人社区，原文链接：ceshiren.com/t/topic/318…

一、JavaScript简介

  • JavaScript是一种具有函数优先级的轻量级，解释型或即时编译型的编程语言；
  • 可以嵌入到HTML页面，对浏览器事件做出响应；
  • 也可以基于Node.js技术进行服务器端编程。

二、常用JavaScript脚本

2.1 js脚本-元素操作

  • 通过css查找元素：
    • 点击元素（对应click）
    • input标签对应的值（对应send_keys）
    • 元素的类属性
    • 元素的文本值
// 百度首页：https://www.baidu.com/
// 修改属性值
document.querySelector("#kw").value = "霍格沃兹测试学院"
// 点击操作
document.querySelector("#su").click()
// 淘宝首页： https://www.taobao.com/ 
// 修改元素的类属性
document.querySelector("#J_SiteNavMytaobao").className\
="site-nav-menu site-nav-mytaobao site-nav-multi-menu J_MultiMenu site-nav-menu-hover"
// 测试人首页：https://ceshiren.com/
// 获取元素内的文本信息
document.querySelector("#ember63").innerText

2.2 js脚本-滚动操作

  • 页面滚动到底部；
  • 指定到滚动的位置。
document.documentElement.scrollTop=10000 
document.querySelector('css表达式').scrollIntoView();

三、Selenium执行JavaScript

3.1 背景

  • 使用场景：
    • 部分场景使用selenium原生方法无法解决。
      • 修改时间控件；
      • 滚动到某个元素；
      • 其他场景。

3.2 使用思路

1、页面调试js脚本；

  • JavaScript调试方法：

（1）进入console调试；

（2）js脚本如果有返回值，则会在浏览器返回。

2、Selenium执行js。

  • 调用执行js方法；
    • 在js语句中添加return：代码可以获取js的执行结果；
    • 结合find_element方法。

四、JavaScript操作案例

1、直接执行

# 直接执行
execute_script("js脚本")
# 获取js执行结果
execute_script("return js脚本")

2、展示下拉框

  • 案例一：通过属性修改展示下拉框
    • 打开网页首页
    • 修改下拉框属性
    • 点击悬浮框内的选项
def test_select_down():
    driver = webdriver.Chrome()
    driver.implicitly_wait(3)    # 打开网址
    driver.get("https://www.taobao.com/")
    # 修改下拉框属性
    sleep(1)
    driver.execute_script('document.querySelector("#J_SiteNavMytaobao").'
                                'className="site-nav-menu site-nav-mytaobao '
                                'site-nav-multi-menu J_MultiMenu '
                                'site-nav-menu-hover"')
    driver.find_element(By.XPATH, "//*[text()='已买到的宝贝']").click()
    sleep(5)
    driver.quit()

3、时间控件

  • 案例二：通过属性修改时间控件的值
    • 打开12306网站
    • 修改时间控件值
    • 打印出发日期
def test_data_time():
    # 打开网址
    driver = webdriver.Chrome()
    driver.implicitly_wait(3)
    driver.get("https://www.12306.cn/index/")
    sleep(1)
    # 修改出发日期
    driver.execute_script('document.querySelector("#train_date").value="2022-12-22"')
    sleep(1)
    # 打印出发日期， 返回值的使用
    train_data = driver.execute_script('return document.querySelector("#train_date").value')
    print(train_data)
    sleep(3)

推荐学习

【霍格沃兹测试开发】7天软件测试快速入门带你从零基础/转行/小白/就业/测试用例设计实战

【霍格沃兹测试开发】最新版！Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium （上集）

【霍格沃兹测试开发】最新版！Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium （下集）

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学（上集）

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学（下集）

【霍格沃兹测试开发】精品课合集/ 自动化测试/ 性能测试/ 精准测试/ 测试左移/ 测试右移/ 人工智能测试

【霍格沃兹测试开发】腾讯/ 百度/ 阿里/ 字节测试专家技术沙龙分享合集/ 精准化测试/ 流量回放/Diff

【霍格沃兹测试开发】Pytest 用例结构/ 编写规范 / 免费分享

【霍格沃兹测试开发】JMeter 实时性能监控平台/ 数据分析展示系统Grafana/Docker 安装

【霍格沃兹测试开发】接口自动化测试的场景有哪些？为什么要做接口自动化测试？如何一键生成测试报告？

【霍格沃兹测试开发】面试技巧指导/ 测试开发能力评级/1V1 模拟面试实战/ 冲刺年薪百万！

【霍格沃兹测试开发】腾讯软件测试能力评级标准/ 要评级表格的联系我

【霍格沃兹测试开发】Pytest 与Allure2 一键生成测试报告/ 测试用例断言/ 数据驱动/ 参数化

【霍格沃兹测试开发】App 功能测试实战快速入门/adb 常用命令/adb 压力测试

【霍格沃兹测试开发】阿里/ 百度/ 腾讯/ 滴滴/ 字节/ 一线大厂面试真题讲解，卷完拿高薪Offer ！

【霍格沃兹测试开发】App自动化测试零基础快速入门/Appium/自动化用例录制/参数配置

【霍格沃兹测试开发】如何用Postman 做接口测试，从入门到实战/ 接口抓包（最新最全教程）

avatar
文章
阅读
粉丝