1.簡介
對於前端隱藏元素，一直是selenium自動化定位元素的隱形殺手，腳本跑到隱藏元素時位置時報各種各樣的錯誤，可是這種隱藏的下拉菜單又沒有辦法避免，所以非常頭痛，這一篇只為交流隱藏元素自動化定位處理方法以及宏哥自己的一點淺薄見解。
2.什么是隱藏元素
隱藏元素，熟悉前端的或者HTML的小伙伴或者童鞋們一定不陌生，元素的屬性隱藏和顯示，主要是 type="hidden"和style="display: none;"屬性來控制的，當然了還有其他的方法控制，宏哥這里就不詳細說明了，有興趣的小伙伴或者童鞋們可以自己查一下資料。隱藏元素是什么，隱藏元素是通過屬性值 hidden="hidden" 進行隱藏，如果前端代碼中出現這個，就代表該元素已經被隱藏了，大家也知道，如果元素隱藏了，是沒有辦法進行操作的，所謂的操作就是輸入，點擊，以及清空這些基本元素操作。如果通過selenium中的點擊進行操作元素的話，會報錯誤，沒有找到元素信息，前面也介紹了，隱藏的元素只能定位到，但是沒有辦法進行操作。
1.有兩個輸入框和一個登錄的按鈕，本來是顯示的，如下圖所示：
2.接下來在登錄的元素屬性里面讓它隱藏，代碼如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" type="text/css" href="Login.css"/> </head> <body> <div id="login"> <h1>北京宏哥</h1> <form method="post"> <input type="text" required="required" placeholder="用戶名" name="u"></input> <input type="password" required="required" placeholder="密碼" name="p"></input> <button id="bjhg" class="but" type="submit" style="display: none;" onclick="display_alert()">登錄</button> </form> </div> </body> <script type="text/javascript"> function display_alert(){ alert("請關注公眾號：北京宏哥") } </script> </html>
這樣登錄按鈕就不會顯示了，如下圖所示：
3.定位隱藏元素
宏哥前邊說了，定位隱藏元素和普通的元素沒啥區別，接下來就來驗證下，是不是能定位到呢？其實前邊的文章中已經驗證了，可能小伙伴或者童鞋們沒有留意或者注意到，那么宏哥在這里就再次驗證一下。
3.1參考代碼
package lessons; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * @公眾號:北京宏哥 * * 《手把手教你》系列技巧篇（四十九）-java+ selenium自動化測試-隱藏元素定位與操作（詳解教程） * * 2021年11月24日 */ public class testHidden { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", ".\\Tools\\chromedriver.exe"); WebDriver driver =null; try { driver = new ChromeDriver(); driver.get("file:///C:/Users/DELL/Desktop/test/hidden/login.html"); driver.manage().window().maximize(); //通過id定位隱藏元素 WebElement loginButton = driver.findElement(By.id("bjhg")); System.out.println("打印元素信息："+loginButton); //獲取元素屬性 System.out.println(loginButton.getAttribute("name")); //判斷元素是否隱藏 System.out.println(loginButton.isDisplayed()); } catch (Exception e) { e.printStackTrace(); } finally{ System.out.println("執行結束,關閉瀏覽器"); driver.quit(); } } }
3.2運行結果
運行結果可以看出，隱藏元素用普通定位方法，事實上是定位到了，和普通元素的定位沒有任何區別！不要覺得它有什么特殊之處，需特殊的定位方法。
4.操作隱藏元素
大家也都知道selenium操作方法是通過模擬人的操作方法進行的，那么元素都看不到了，就沒有所謂的操作不操作了，如果真的想要操作，我們可以使用前邊宏哥介紹的JS語法進行操作，因為JS語法屬於直接對前端的代碼進行操作，隱藏元素在HTML代碼中是存在的，隱藏元素主要是對於前端頁面來說是不可見的。
隱藏元素可以正常定位到，只是不能操作（定位元素和操作元素是兩碼事，很多初學者或者面試官有時候分不清楚），操作元素是click,clear,sendKeys這些方法。
//點擊隱藏登錄框 WebElement loginButton = driver.findElement(By.id("bjhg")); loginButton.click();
隱藏元素用click()方法會拋異常“org.openqa.selenium.ElementNotInteractableException: element not interactable”這個報錯是說元素不可見，不可以被操作，同樣的對“登錄”按鈕上的輸入框如果隱藏了，執行輸入（Sendkeys）操作也是會報“ElementNotInteractableException”。
5.JS操作隱藏元素
selenium是無法操作隱藏元素的（但是能正常定位到），本身這個框架就是設計如此，如果非要去操作隱藏元素，那就用js的方法去操作，selenium提供了一個入口可以執行js腳本。 js和selenium不同，只有頁面上有的元素（在dom里面的），都能正常的操作，接下來用js試試吧！
那就繼續完善上邊可以定位到但是不能操作的代碼。
5.1代碼設計
5.2參考代碼
package lessons; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * @公眾號:北京宏哥 * * 《手把手教你》系列技巧篇（四十九）-java+ selenium自動化測試-隱藏元素定位與操作（詳解教程） * * 2021年11月24日 */ public class testHidden { public static void main(String[] args) throws InterruptedException { System.setProperty("webdriver.chrome.driver", ".\\Tools\\chromedriver.exe"); WebDriver driver =null; try { driver = new ChromeDriver(); driver.get("file:///C:/Users/DELL/Desktop/test/hidden/login.html"); driver.manage().window().maximize(); //通過id定位隱藏元素 WebElement loginButton = driver.findElement(By.id("bjhg")); System.out.println("打印元素信息："+loginButton); //獲取元素屬性 System.out.println(loginButton.getAttribute("name")); //通過JavaScript點擊hidden屬性的登錄按鈕 JavascriptExecutor jsExecutor = (JavascriptExecutor) driver; String js = "document.getElementById('bjhg').click()"; jsExecutor.executeScript(js); } catch (Exception e) { e.printStackTrace(); } finally{ System.out.println("執行結束,關閉瀏覽器"); Thread.sleep(5000); driver.quit(); } } }
5.3運行代碼
1.運行代碼，右鍵Run AS->Java Appliance，控制台輸出，如下圖所示：
2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：
運行完之后，會發現頁面正常的點擊，彈出到關注宏哥的公眾號頁面了。
6.小結
6.1簡化代碼
百度搜到的可能方法是先用js去掉hidden屬性，再用selenium操作，這個有點多此一舉，你既然都已經會用js了，何必不一次性到位直接click呢？而且宏哥發現之前講解的也是這種方法，有點“脫了褲子排氣”。在這里宏哥糾正一下，直接一步到位哈！
6.2面試提問
如果面試官想問的是定位后操作隱藏元素的話，本質上說這個問題就是毫無意義的，web自動化的目的是模擬人的正常行為去操作。 如果一個元素頁面上都看不到了，你人工也是無法操作的是不是？人工都不能操作，那你自動化的意義又在哪呢？所以這個只是為了單純的考察面試者處理問題的能力，沒啥實用性！（面試造飛機，進去擰螺絲） 既然面試官這么問了，那就想辦法回答上給個好印象吧！記住一定不要回懟面試官，否則你的這次面試就涼了啊！！！