自动化操作——JS

Posted 2021-01-30 zouzy

一、概念

　　webdriver通过执行javascript语句，操作页面。webdriver执行js有两种方式同步与异步，execute_script()，execute_async_script()，前者影响后续的代码顺序，即必须等js执行完成才可以继续，后者反之。

　　在selenium自动化中调用js方式，注：也可以使用JQ语法进行操作：

driver.execute_script("js_code")  #用于直接操作

result=driver.execute_script("return js_code")  #获取js返回值

driver.execute_script("arguments[0].scrollIntoView(true);", element);   #入参两个参数，前者是js代码，后者是元素对象

二、语法

　　1、定位

　　　　document.getElementById    //根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；

　　　　document.getElementsByClassName    //根据类名查找元素，多个类名用空格分隔，返回一个 htmlCollection 
　　　　　　　　　　　　　　　　　　　　　　　　//另外，不仅仅是document，其它元素也支持getElementsByClassName 方法；

　　　　document.getElementsByTagName    //根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。

　　　　document.getElementsByName    //根据元素的name属性查找，返回一个 NodeList 。

　　　　document.querySelector    //返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。

　　　　document.querySelectorAll    //返回一个 NodeList ，IE8+(含）。

　　　　document.forms    //获取当前页面所有form，返回一个 HTMLCollection ；

 

　　2、获取界面信息

　　　　document.body.scrollWidth; //获取完整网页正文全文宽，包括有滚动条时的未见区域

　　　　document.body.scrollHeight; //获取完整网页正文全文高，包括有滚动条时的未见区域 　
　　　

　　　　document.documentElement.clientWidth; //仅获取可见区域宽度，不有滚动条时的未见区域

　　　　document.documentElement.clientHeight; //仅获取可见区域高度，不有滚动条时的未见区域
 

　　　　document.documentElement.scrollTop=100; //设置或返回匹配元素相对滚动条顶部的偏移，即获取网页被卷去的高度

　　　　document.documentElement.scrollLeft=100 ; //设置或返回匹配元素相对滚动条左侧的偏移 ，即获取网页被卷去的左部分


　　　　document.documentElement.offsetTop; //获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的                                               
                                           //高度

　　　　document.documentElement.offsetLeft; //获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度IE、
                                           //Opera 认为offsetHeight = clientHeight + 滚动条 + 边框。FF 认为offsetHeight
                                           //是网页内容实际高度，可以小于 clientHeight。offsetHeight在新版本的FF和IE中是一样的                                  
                                           //表示网页的高度，与滚动条无关，chrome中不包括滚动条。
　　　　　　　　　　　　　　　　　　　　　　　　　//详见 https://blog.csdn.net/w390058785/article/details/80461845

　　　　window.screen.height;  //屏幕分辨率的高
　　　　window.screen.width;   //屏幕分辨率的宽 
　　　　
　　　　document.documentElement.style;  //获取行内式标签style属性，html 标签上直接写 
                                        //<input style=‘color:red;‘ > 这样才可以取到
　　　　document.documentElement.getComputedStyle()  //获取对象css属性
　　　　//详见 https://www.cnblogs.com/xiyangbaixue/p/4001531.html

 

　　3、操作界面元素

　　　　window.scrollTo(100,400); 　　//滚动位置left=100，top=400

　　　　document.getElementsByClassName("name")[0].scrollIntoViewIfNeeded(true) //滚动到name元素显示

　　　　document.getElementById(“id”).value="你想设置的文字"  //给元素设置文本值

　　　　
　　　　document.getElementsByClassName("name")[0].scrollIntoViewIfNeeded(true) //滚动到name页面居中显示
　　　　document.getElementsByClassName("comment-content")[0].scrollIntoView()　　//滚动到name页面顶上显示

　　　　document.getElementById("query").style.display="none"  // 隐藏
　　　　document.getElementById("query").style.display="block"  // 可见

　　　　document.getElementsByClassName("sec-input")[0].disabled=false   // 取消置灰

　　　　document.getElementById("query").removeAttribute(‘readonly‘) // 移除‘readonly‘属性，是元素可输入

　　　　document.getElementById("query").innerHTML     // 获取HTML内容
　　　　document.getElementsByClassName(‘top-nav‘)[0].innerText   // 获取文本内容
　　　　document.getElementsByClassName("sec-input")[0].attributes.属性    //获取元素属性

　　　　//滚动条拖动到元素位置
　　　　element=driver.find_element_by_id(‘auto‘)
　　　　driver.execute_script(‘arguments[0].scrollIntoViewIfNeeded(true);‘,element)