web自动化——JavaScript定位

学习笔记
1

一、JavaScript简介

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

1.1、自动化测试中使用JavaScript脚本

使用场景：部分场景使用selenium原生方法无法解决

  • 修改时间控件
  • 滚动到某个元素
  • 其他场景

1.2、JavaScript 使用思路

  1. 页面调试 js 脚本
  2. Selenium执行js

1.3、JavaScript调试方法

  1. 进入 console 调试
  2. 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

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

四、JavaScript操作案例

js处理-案例1-展示下拉框

  • 案例一：通过属性修改展示下拉框 
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"'
    )
    # 鼠标来回晃动发现class属性在变化
    # class ="site-nav-menu site-nav-mytaobao site-nav-multi-menu J_MultiMenu "
    driver.find_element(By.XPATH, "//*[text()='已买到的宝贝']").click()
    sleep(2)
    driver.quit()

js处理-案例2-时间控件

  • 案例二：通过属性修改时间控件的值
    • 打开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)