web自动化与JS的邂逅

一、窗口滚动

用途：滑动WEB页面

def scrollTo(x, y):

    js = """window.scrollTo("{x}", "{y}")""".format(x=x, y=y)
    
    driver.execute_script(js)

参数说明

x：屏幕向右移动的距离

y：屏幕向下移动的距离

二、移除属性

用途：该方法可以删除元素的任何属性，主要用来移除时间控件的readonly属性

def remove_attribute(css, attribute, index=0):

    js = """
    var element = document.querySelectorAll("{css}")[{index}];
        element.removeAttribute("{attribute}");
    """.format(css=css, index=index, attr=attribute)
    
    driver.execute_script(js)

def remove_attribute(class_name,attribute,index=0,node=0):
	'''childNodes[1]，表示元素节点位置'''
	js = """
	var element = document.getElementsByClassName(class_name)[index].childNodes[node];
		element.removeAttribute(attribute)
	"""
	driver.execute_script(js)

详情

def remove_attribute(element,attribute):
	'''arguments指的是execute_script()方法中js代码后面的所有参数，arguments[0]表示第一个参数，argument[1]表示第二个参数'''
	
	js = 'arguments[0].removeAttribute(argument[1])'
	
	driver.execute_script(js,element,attribute)

三、高亮元素

用途：方便用户查看当前操作的是哪个页面元素，也方便测试人员定位问题

def height_light(css, index=0):

    js = """
    var element = document.querySelectorAll("{css}")[{index}];
        element.style.border="2px solid red";
    """.format(css=css, index=index)
    
    driver.execute_script(js)

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

四、点击元素

用途：由于web自动化的最大问题就是稳定性比较差，有些时候使用selenium无法点击元素，因此我们可以使用JS实现元素的点击操作

def click(css, index=0):

    js = """var element = document.querySelectorAll("{css}")[{index}];
               element.click();""".format(css=css, index=index)
               
    driver.execute_script(js)

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

五、清除输入框内容

用途：用来清除输入框的内容

def clear(css, index=0):
    js = """var element = document.querySelectorAll("{css}")[{index}];
                element.value = "";""".format(css=css, index=index)
    driver.execute_script(js)

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

六、输入内容

用途：输入框中输入内容

def input(self, css, value, index=0):

    js = """var element = document.querySelectorAll("{css}")[{index}];
                element.value = "{value}";""".format(css=css, index=index, value=value)
                
    driver.execute_script(js)

参数说明

css：css表达式

value：待输入的数据

index：索引值，默认0，标识第一个元素

七、滚动页面

用途：滚动web页面

def scrollTo(self, element, x, y):

    js = """
    arguments[0].scrollTo("{}", "{}")
    """.format(x, y)
    
    driver.execute_script(js, element)

参数说明

element：通过selenium中的定位方法查找到的WebElement元素对象

arguments[0]：代表execute_script（）方法的第二个参数

说明：可以修改替换querySelectorAll方法为getElementById, getElementByClassName等，但是需要注意使用getElementById时，不需要index参数；

demo

八、操作页面弹窗显示信息

用途：弹窗显示信息

from selenium import webdriver
from time import sleep

dr = webdriver.Firefox()
dr.get("https://www.baidu.com/")

dr.execute_script("window.alert('PYTHON')")

sleep(3)
dr.quit()

九、获取元素的属性值

from selenium import webdriver
from time import sleep

dr = webdriver.Firefox()
dr.get("https://www.baidu.com/")

dr.find_element_by_id("kw").send_keys("hi")
retu = dr.execute_script("return document.getElementById('kw').value;")
print(retu)

sleep(3)
dr.quit()

十、操作滚动条下拉

#将滚动条移动到页面的底部
js="var q=document.documentElement.scrollTop=100000"  
driver.execute_script(js)  
time.sleep(3)  
#将滚动条移动到页面的顶部  
js="var q=document.documentElement.scrollTop=0"  
driver.execute_script(js)  
time.sleep(3)  
#若要对页面中的内嵌窗口中的滚动条进行操作，要先定位到该内嵌窗口，在进行滚动条操作 
js="var q=document.getElementById('id').scrollTop=100000" 
driver.execute_script(js) 
time.sleep(3) 
#这个据说对IE和firefox都奏效，但是对chrome这个高逼格的不行！
js="var q=document.body.scrollTop=100000"  
driver.execute_script(js)  
time.sleep(3)  

十一、拖动到特定地方

target = driver.find_element_by_id("id_keypair") 

driver.execute_script("arguments[0].scrollIntoView();", target) #拖动到可见的元素去 

参数说明：
target：想要显示的元素