JavaScript在Web端自动化中常用到的场景

lsekfe

前言
　　在做Web端自动化中，经常会使用到JS语法来辅助我们定位元素或者来修改元素的一些属性，从而达到自动化用例正常编写，今天安静来介绍下JS通过Selenium在Web端自动化中常用到的场景。

　　JavaScript
　　在介绍场景时，先介绍下什么是JS，即JavaScript的简写。一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名。

　　调用JS元素
　　既然JS语法可以在Selenium中进行使用，是通过什么来实现的呢？通过WebDriver中的execute_script()的方法来实现JS语法的操作。
　　那么JS元素在Web端自动化中具体的操作场景是什么呢？我们继续往下看。

　　定位元素
　　对于一些难定位的元素，可以通过JS的方法进行定位，JS提供了几种常用的定位元素方法。

1. # 通过id属性，获取元素
   
2. document.getElementById('id');
   
3. # 通过元素name属性，获取元素列表
   
4. document.getElementsByName('name');
   
5. # 通过标签名，获取元素列表
   
6. document.getElementsByTagName('tag_name');
   
7. # 通过类名，获取元素列表
   
8. document.getElementsByClassName("class_name");
   
9. # 通过选择器，获取一个元素
   
10. document.querySelector("css selector")

复制代码

浏览器操作
　　浏览器中输入操作和点击操作用的最多，JS语法也可以对输入框输入内容以及进行点击操作。安静这里拿百度来举例子。

1. from selenium import webdriver
   
2. driver = webdriver.Chrome()
   
3. # 打开百度
   
4. driver.get('https://www.baidu.com')
   
5. # JS语法进行百度输入框输入内容
   
6. js = "document.getElementById('kw').value='测试安静'"
   
7. # 执行JS语法
   
8. driver.execute_script(js)
   
9. # 通过JS语法进行点击操作
   
10. js2 = 'document.getElementById("su").click()'
    
11. # 执行JS语法
    
12. driver.execute_script(js2)

复制代码

过执行后发现，已经在百度页面搜索到了想要的内容。

　　通过JS修改元素属性
　　JS语法可以来修改元素的属性值：

1. from selenium import webdriver
   
2. driver = webdriver.Chrome()
   
3. driver.get('https://www.baidu.com')
   
4. # 通过JS修改id属性值
   
5. js1 = 'document.getElementById("kw").setAttribute("id","test")'
   
6. # 执行JS语言
   
7. driver.execute_script(js1)
   
8. # 通过修改的id进行定位输入内容
   
9. driver.find_element_by_id('test').send_keys('测试安静')

复制代码

通过执行后可以看出来，我们已经完成了对百度输入框ID的修改。

　　通过JS删除元素属性
　　JS语法也可以进行删除页面上的某些元素属性。
　　这个可能有的小伙伴们遇到过，安静举个简单的例子，12306网站上的日历输入框，无法输入内容，就是因为readonly这个属性来控制的，我们可以通过删除这个属性，然后自己输入日期时间：

1. from selenium import webdriver
   
2. driver = webdriver.Chrome()
   
3. driver.get('https://www.12306.cn/index/')
   
4. # 通过JS语法进行删除readonly 属性
   
5. js = 'document.getElementById("train_date").removeAttribute("readonly")'
   
6. driver.execute_script(js)
   
7. # 先清空，再输入
   
8. driver.find_element_by_id('train_date').clear()
   
9. driver.find_element_by_id('train_date').send_keys('2021-05-01')

复制代码

通过下方内容可以看出来，输入框已经可以输入内容了。

　　获取元素属性值
　　JS语法也可以获取到元素的属性值。通过下图可以看到，将需要返回的属性值进行了返回，但是这里要注意，如果要返回内容， 一定要在JS语法上加上return。

　　JS处理滚动条
　　在Web页面中元素在页面中央或者最下方需要操作滚动条才能看到元素内容。而Selenium中没有直接操作滚动条，这时候就可以使用JS来进行操作滚动条。

　　滚动条到顶部

1. # JS滚动条到顶部
   
2. js="var q=document.documentElement.scrollTop=0"

复制代码

设定滚动底部
　　这里安静通过设置scrolltop的值来确定滚动条的位置：

1. # 滚动条到底部，
   
2. js="var q=document.documentElement.scrollTop=10000"

复制代码

横向滚动条

1. # 操作横向滚动条
   
2. js  = “window.scrollTo(100,400)“

复制代码

安静这里通过案例进行展示：

1. from selenium import webdriver
   
2. driver = webdriver.Chrome()
   
3. import time
   
4. driver.get('http://bbs.51testing.com/forum.php')
   
5. # 滚动条到底部
   
6. js = "var q=document.documentElement.scrollTop=10000"
   
7. # 执行JS脚本
   
8. driver.execute_script(js)
   
9. time.sleep(1)
   
10. # 滚动条在顶部
    
11. js1 = "var q=document.documentElement.scrollTop=0"
    
12. # 执行JS脚本
    
13. driver.execute_script(js1)

复制代码

　通过执行已经发现，滚动条先滑动了底部，又滑动了顶部。

　　总结
　　安静这里通过列举了Web端自动中常用到的一些JS操作并通过实例进行了演示。具体场景可以根据公司项目进行设计。
　　在上文中也看到了一些JavaScript的语法，感兴趣的小伙伴可以进行学习一波。感谢大家的阅读，希望对您有所帮助。