自動化操作——JS

一、概念

　　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)