在進行 click、input、scroll 等操作時，有時會遇到元素無法或很難操作的情況。這時可以考慮使用 WebDriver 的 execute_script() 執行 JavaScript 操作 DOM。
以下整理一些常見範例：
選取元素
- 使用 ID 選取
document.getElementById("example");
- 使用 class name 選取
document.getElementsByClassName("example");
- 使用 name 選取
document.getElementsByName("example");
- 使用 CSS 選取
document.querySelector("[attribute='value1']"); // 選取第一個符合的元素
document.querySelectorAll("input[attribute='value2']"); // 選取所有符合的元素
- 使用 tag name 選取
document.getElementsByTagName("input"); // 選取所有 input 元素
- 使用 XPath 選取
document.evaluate("//*[text()='example']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
操作元素
選取後可進行修改、點擊、滾動等操作。
- 點擊元素
document.getElementById("example").click();
- 點擊多個元素中的其中一個
var a = document.getElementsByClassName("ui example button");
a[2].click(); // 選取第三個符合的按鈕並點擊
- 修改 value 值
document.getElementById("example").value = "20";
修改其他 attribute 的值
- document.getElementById("Mobility").selectedIndex = 12; // 設定 select 選擇的索引值
- 移除屬性
document.getElementsByName("example")[0].removeAttribute("hidden"); // 移除 hidden 屬性
- 捲動元素到視窗可見範圍
arguments[0].scrollIntoView();
- 捲動元素到視窗中間
arguments[0].scrollIntoView({ block: 'center' });
⋯⋯