Selenium元素定位不到？JS注入輕鬆搞定！
本文章出自【碼同學軟體測試】
碼同學公眾號：自動化軟體測試，領取資料可加：Matongxue_8
碼同學抖音號：小碼哥聊軟體測試
在使用Selenium做web自動化測試過程中，經常會遇到一些元件無法通過Selenium直接識別和處理，比如<input>標籤組合的下拉框，比如日期控制元件。面對這些元素，我們可以引入JS注入技術來解決問題。
Javascript
JavaScript是一種被廣泛用於Web前端開發的指令碼語言 ,常用來為網頁新增動態功能（彈窗，點選事件....）通過HTML DOM，JavaScript提供了頁面物件獲取和操作功能。
DOM模型把HTML文件解析成一棵樹，根節點是<html>，從根節點往下根據節點之間的關係（順序或包含）把節點解析為兄弟節點和孩子節點。<HTML> 節點有不同的型別：
- 元素
- 屬性
- 文字
Javascript可以根據DOM結構獲取任意的HTML元素，變更這些元素的屬性，樣式，並對元素的滑鼠鍵盤事件做出響應：
- Javascript提供了通過id查詢元素的方式：document.getElementById(id)；除了id, javascript還支援通過類名和標籤名查詢元素
- Javascript提供通過innerHTML改變元素內容的方式：document.getElementById(id).innerHTML=new HTML，通過變更節點內部的HTML可以改變元素的文字和行為
- Javascript提供通過attribute改變元素屬性的方式：document.getElementById(id).attribute=new value
Selenium支援Javascript
Selenium WebDriver可以被轉換為JavaScriptExecutor，通過JavaScriptExecutor執行Javascript指令碼，通過這種方式可以實現Selenium的Javascript注入，從而實現對複雜頁面元素的操作。
WebDriver driver=new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("js語句");
Jquery
Jquery是一個增強的JavaScript框架，它封裝了JavaScript常用的功能程式碼，簡化了HTML文件操作、事件處理、動畫設計和Ajax互動。
對於複雜的網頁元素查詢，通過Javascript較為低效，此時可以引入Jquery簡化元素查詢。
Jquery常見選擇器如下，詳細語法課參見官網https://jquery.com/
免費領取 碼同學軟體測試 課程筆記+超多學習資料+完整視訊+最新面試題，可加：Matongxue_8
Selenium支援Jquery
Selenium可以通過判定當前待測的網站是否引入Jquery，如果沒有則載入Jquery，載入完畢以後即可用Jquery程式碼來實現前端頁面元素的操作。
public class JqueryTest {
static JavascriptExecutor js;
static WebDriver driver;
public static void main(String[] args) {
driver=new ChromeDriver();
js=(JavascriptExecutor)driver;
driver.get("http://www.baidu.com/");
//判斷Jquery是否存在,若不存在則注入
if(!jqueryLoaded()){
injectJquery();
}
//通過jquery查找出頁面百度連結元素個數（.mnav）
List<WebElement> elements = (List<WebElement>) js
.executeScript("return jQuery.find('.mnav')");
driver.quit();
}
public static boolean jqueryLoaded() {
boolean loaded=false;
try {
loaded = (Boolean) js.executeScript("return" + " jQuery()!=null");
}catch (Exception e){
System.out.println("查詢jQuery物件出現異常");
}
System.out.println("頁面已存在Jquery物件，無需注入：" + loaded);
return loaded;
}
public static void injectJquery() {
js.executeScript(" var headID = "
+ "document.getElementsByTagName(\"head\")[0];"
+ "var newScript = document.createElement('script');"
+ "newScript.type = 'text/javascript';"
+ "newScript.src = "
+ "'http://code.jquery.com/jquery-latest.js';"
+ "headID.appendChild(newScript);");
}
}
END
免費領取碼同學軟體測試課程筆記+超多學習資料+學習完整視訊，可加：Matongxue_8/關注：自動化軟體測試
本文著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。