在做selenium web自動化的時候，有時通過selenium定位不到，或無法操作元素，這個時候就需要通過js來 定位/操作元素，然後通過selenium自帶的execute_script()方法去執行js語句。下麵介紹幾種js的定位方法。 一.ID id的值都是唯一的，所以當存在id欄位時可優 ...
在做selenium web自動化的時候，有時通過selenium定位不到，或無法操作元素，這個時候就需要通過js來
定位/操作元素，然後通過selenium自帶的execute_script()方法去執行js語句。下麵介紹幾種js的定位方法。
一.ID
id的值都是唯一的，所以當存在id欄位時可優先使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> function a(){ alert(document.getElementById("button_id").style.display='block') //id定位 } </script> <body> <button style="display: none" id="button_id">隱藏</button> <button onclick="a()">點擊</button> </body> </html>
二.NAME
name值定位元素的話返回的為list，用下標取值即可。如下通過name定位並執行點擊事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> function a(){ document.getElementsByName("button_name")[0].click() //name定位 } function b(){ alert("word") } </script> <body> <span name="button_name" onclick="b()">隱藏</span> <button onclick="a()">點擊</button> </body> </html>
三.TAG_NAME
tag_name對應的便是標簽名稱，返回的也是list集合。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> function a(){ document.getElementsByTagName("input")[0].value="請輸入內容" //輸入內容 } </script> <body> <input> <button onclick="a()">點擊</button> </body> </html>
四.CLASS_NAME
class_name對應的值是class，返回list集合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> function a(){ alert(document.getElementsByClassName("h2_class")[0].style.backgroundImage) //classname定位 } </script> <body> <h2 class="h2_class" style="display: block; background-image: url('https://static.geetest.com/captcha_v3/batch/v3/25173/2023-01-3')"></h2> <button onclick="a()">點擊</button> </body> </html>
五.CSS
css定位有兩個方法，下麵一一演示看下。
1.querySelectorAll()：返回所有匹配的結果，list集合。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> function a(){ document.querySelectorAll("input[name='2']")[1].value="123" //返回全部 } </script> <body> <div class="liming"> <div> <input name="2"> </div> <div> <input name="2"> </div> </div> <button onclick="a()">點擊</button> </body> </html>
2.querySelector()：不管匹配結果有多少個，只返回第一個。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> function a(){ alert(document.querySelector("div[class='liming']>div:nth-child(2)>input").getAttribute("name")) } </script> <body> <div class="liming"> <div> <input name="1"> </div> <div> <input name="2"> </div> </div> <button onclick="a()">點擊</button> </body> </html>
文章來源：https://www.cnblogs.com/lihongtaoya/ ，請勿轉載
