Web自动化Selenium-JavaScript的应用

最新推荐文章于 2024-06-19 13:58:13 发布

测试-东方不败之鸭梨

最新推荐文章于 2024-06-19 13:58:13 发布

阅读量1.2k

点赞数

分类专栏： # selemium 文章标签： javascript 自动化

本文链接：https://blog.csdn.net/seanyang_/article/details/127471538

版权

selemium 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JavaScript是Web页面的编程语言。Selenium提供了execute_script方法，用来执行JavaScript，从而完成一些特殊的操作。

操作页面元素

我们可以借助JavaScript操作页面元素，如在搜索框中输入文字、单击按钮等

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
ele1JS = "document.getElementById('kw').value='storm'"
ele2JS = "document.getElementById('su').click()"
driver.execute_script(ele1JS)
sleep(3)
driver.execute_script(ele2JS)
sleep(3)
driver.quit()

修改页面元素属性

当遇到某input型日期时间控件包含readonly属性时，我们是无法通过send_keys去选择日期时间的，这时候我们需要借助JavaScript来删除掉readonly属性，从而达到允许输入的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期时间控件</title>
</head>
<body>
<input type="date" name="name1" id="id1" readonly>
</body>
</html>

from selenium import webdriver
from time import sleep
import os

driver = webdriver.Chrome()
html_file = 'File:///' + os.getcwd() + os.sep + 'myhtml7_2.html'
driver.get(html_file)
sleep(2)
js2 = "document.getElementById('id1').removeAttribute('readonly')"
driver.execute_script(js2)

driver.find_element_by_tag_name('input').send_keys('002020/06/06')
sleep(5)
driver.quit()

再提供以下几种删除元素属性的方法

# js = "document.getElementById('c-date1').removeAttribute('readonly')" # 原生js，移除属性
# js = "$('input[id=c-date1]').removeAttr('readonly')"  # jQuery，移除属性
# js = "$('input[id=c-date1]').attr('readonly',False)"  # jQuery，设置为False
# js = "$('input[id=c-date1]').attr('readonly','')"  # jQuery，设置为空

操作滚动条

在实际项目中，某些Web页面内容过长会出现滚动条。当我们操作当前滚动条页面范围以外的元素时可能会报错，这时候就需要使用Selenium操作滚动条到指定位置。

（1）借助JavaScript操作纵向滚动条

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
# driver = webdriver.Firefox()
driver.get("http://www.baidu.com")
driver.find_element_by_id('kw').send_keys("storm")
driver.find_element_by_id('su').click()
js1 = "window.scrollTo(0, document.body.scrollHeight)"# 滑动滚动条到底部
js2 = "window.scrollTo(0,0)"# 滑动到顶端
js3 = "window.scrollTo(0,200)"# 向下滑动200像素
js4 = "arguments[0].scrollIntoView();"  # 滑动到指定元素
sleep(2) #等待页面加载完，注意观察滚动条目前处于最上方
driver.execute_script(js1) #执行js1，将滚动条滑到最下方
sleep(2) #加等待时间，看效果
driver.execute_script(js2) #执行js2，将滚动条滑到最上方
sleep(2) #加等待时间，看效果
driver.execute_script(js3) #执行js3，将滚动条向下滑动到200像素
sleep(2) #加等待时间，看效果
driver.execute_script(js2) #执行js2，将滚动条滑到最上方
sleep(2)
ele = driver.find_element_by_id('con-ar')  #定位一个元素
driver.execute_script(js4,ele)  #滑动到上面定位的元素的地方
sleep(2)
driver.quit()

（2）借助JavaScript操作横向滚动条

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
# driver = webdriver.Firefox()
driver.get("http://www.baidu.com")
driver.find_element_by_id('kw').send_keys("storm")
driver.find_element_by_id('su').click()
driver.set_window_size(500,500) #缩小浏览器窗口，使之出现横向滚动条
js5 = "window.scrollTo(document.body.scrollWidth,0)"
js6 = "window.scrollTo(0,0)"
js7 = "window.scrollTo(200,0)"
driver.execute_script(js5)  #滑动到最右边
sleep(2)
driver.execute_script(js6) #滑动到最左边
sleep(2)
driver.execute_script(js7) #向右滑动200像素
sleep(2)
driver.quit()

（3）操作内嵌滚动条内嵌滚动条一般嵌在一个iframe里面，先切换到要操作的滚动条所在的iframe，然后正常调用JavaScript即可。

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
# driver = webdriver.Firefox()
driver.get("http://sahitest.com/demo/iframesTest.htm")
sleep(2)
driver.switch_to.frame(1)
js5 = "window.scrollTo(0,200)"
driver.execute_script(js5)  #向下滑动200像素
sleep(2)
driver.quit()

●使用window.scrollTo(x,y)这一语句可以实现所有的纵向或横向滑动滚动条。其中x为横坐标，y为纵坐标，如想纵向滑动200像素，语句就是window.scrollTo(0,200)。

●获取当前窗口的宽度和高度分别可以用document.body.scrollWidth和document.body.scrollHeight语句实现。

●滑动到指定元素位置可以用arguments[0].scrollIntoView()，arguments[0]是指第一个传参。

高亮显示正在被操作的页面元素

测试过程中，我们可以借助JavaScript高亮显示正在被操作的元素。

def highLightElement(driver,element):
     '''
     #封装高亮显示页面元素的方法：使用js代码将页面元素对象的背景颜色设置为绿色，边框设置为红色
     :param driver:
     :param element:
     :return:
     '''
        driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", element, "background: green; border: 2px solid red;")

if __name__ == '__main__':
     from selenium import webdriver
     from time import sleep
     driver = webdriver.Chrome()
     driver.get('https://www.baidu.com/')
     ele = driver.find_element_by_id('kw')
     highLightElement(driver, ele)
     sleep(3)
     driver.quit()

操作span类型元素

实际项目中可能会遇到span类型元素，针对此类型元素，有一些特殊的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span类型元素测试</title>
</head>
<body>
    <span id="span_id">span的文本</span>
</body>
</html>

（1）通过id来定位元素，获取span的文本

from selenium import webdriver
import os

'''
定位元素，通过text取文本
'''
driver = webdriver.Chrome()
html_file = 'File:///' + os.getcwd() + os.sep + 'myhtml7_3.html'
driver.get(html_file)
ele = driver.find_element_by_id('span_id')
print(ele.text)
driver.quit()

（2）通过JavaScript修改标签的文本

from selenium import webdriver
from time import sleep
import os

'''
通过js的方式修改span中间的值
js = 'document.getElementById("span_id").innerText="aaaa"'
'''
driver = webdriver.Chrome()
html_file = 'File:///' + os.getcwd() + os.sep + 'myhtml7_3.html'
driver.get(html_file)
sleep(2)
js1 = "document.getElementById('span_id').innerText='aaa'"
driver.execute_script(js1)
sleep(2)
driver.quit()