2025年最新Python+Playwright自動化測試- 隱藏元素定位與操作

1.簡介

?對于前端隱藏元素，一直是自動化定位元素的隱形殺手，讓人防不勝防。腳本跑到隱藏元素時位置時報各種各樣的錯誤，可是這種隱藏的下拉菜單又沒有辦法避免，所以非常頭痛，這一篇只為交流隱藏元素自動化定位處理方法以及宏哥自己的一點淺薄見解。

2.什么是隱藏元素

隱藏元素，熟悉前端的或者HTML的小伙伴或者童鞋們一定不陌生，元素的屬性隱藏和顯示，主要是 type="hidden"和style="display: none;"屬性來控制的，當然了還有其他的方法控制，宏哥這里就不詳細說明了，有興趣的小伙伴或者童鞋們可以自己查一下資料。隱藏元素是什么，隱藏元素是通過屬性值 hidden="hidden"? 進行隱藏，如果前端代碼中出現這個，就代表該元素已經被隱藏了，大家也知道，如果元素隱藏了，是沒有辦法進行操作的，所謂的操作就是輸入，點擊，以及清空這些基本元素操作。如果通過selenium中的點擊進行操作元素的話，會報錯誤，沒有找到元素信息，前面也介紹了，隱藏的元素只能定位到，但是沒有辦法進行操作。

1.有兩個輸入框和一個登錄的按鈕，本來是顯示的，如下圖所示：

視頻教程：?

【已更新】B站講的最詳細的Python接口自動化測試實戰教程全集（實戰最新版）

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"> <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("000")}
</script>  
</html>

這樣登錄按鈕就不會顯示了，如下圖所示：

3.定位隱藏元素

?宏哥前邊說了，定位隱藏元素和普通的元素沒啥區別，接下來就來驗證下，是不是能定位到呢？其實前邊的文章中已經驗證了，可能小伙伴或者童鞋們沒有留意或者注意到，那么宏哥在這里就再次驗證一下。

3.1代碼設計

3.2參考代碼

# coding=utf-8🔥# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行# 2.注釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2024-05-15
@author: 000
000）
Project: Python+Playwright自動化測試 - 隱藏元素定位與操作
'''# 3.導入模塊

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:browser = playwright.chromium.launch(headless=False)context = browser.new_context()page = context.new_page()page.goto("E:\\Desktop\\test\\hidden\\login.html")loginButton = page.locator("#bjhg")print(loginButton.get_attribute("name"))# 通過id定位隱藏元素,然后進行判斷(上一篇兩種方法)print(page.is_visible("#bjhg"))print(page.locator("#bjhg").is_visible())page.wait_for_timeout(1000)print("browser will be close")page.close()context.close()browser.close()
with sync_playwright() as playwright:run(playwright)

3.3運行代碼

1.運行代碼，右鍵Run'Test'，就可以看到控制臺輸出，如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作。如下圖所示：

運行結果可以看出，隱藏元素用普通定位方法，事實上是定位到了，和普通元素的定位沒有任何區別！不要覺得它有什么特殊之處，需特殊的定位方法。

4.操作隱藏元素

大家也都知道Palywright操作方法是通過模擬人的操作方法進行的，那么元素都看不到了，就沒有所謂的操作不操作了，如果真的想要操作，我們可以使用前邊宏哥介紹的JS語法進行操作，因為JS語法屬于直接對前端的代碼進行操作，隱藏元素在HTML代碼中是存在的，隱藏元素主要是對于前端頁面來說是不可見的。

隱藏元素可以正常定位到，只是不能操作（定位元素和操作元素是兩碼事，很多初學者或者面試官有時候分不清楚），操作元素是click,clear,sendKeys這些方法。

//點擊隱藏登錄框
loginButton = page.locator("#000")
loginButton.click()

4.1代碼設計

按照上邊的思路設計代碼非常簡單。

4.2參考代碼

# coding=utf-8🔥# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行# 2.注釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2024-05-15
@author: 000
000）
Project: Python+Playwright自動化測試- 隱藏元素定位與操作
'''# 3.導入模塊

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:browser = playwright.chromium.launch(headless=False)context = browser.new_context()page = context.new_page()page.goto("E:\\Desktop\\test\\hidden\\login.html")loginButton = page.locator("#bjhg")# 操作隱藏元素loginButton.click()print(loginButton.get_attribute("name"))# 通過id定位隱藏元素,然后進行判斷(上一篇兩種方法)print(page.is_visible("#bjhg"))print(page.locator("#bjhg").is_visible())page.wait_for_timeout(1000)print("browser will be close")page.close()context.close()browser.close()
with sync_playwright() as playwright:run(playwright)

4.3運行代碼

1.運行代碼，右鍵Run'Test'，就可以看到控制臺輸出（報錯了），如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作（看到沒有觸發點擊事件，彈出窗口，最后報錯了）。如下圖所示：

隱藏元素用click()方法會拋異常“element is not visible - waiting...”這個報錯是說元素不可見，不等待中...，同樣的對“登錄”按鈕上的輸入框如果隱藏了，執行輸入（type）操作也是會報錯。

5.JS操作隱藏元素

Palywright和Selenium一樣是無法操作隱藏元素的（但是能正常定位到），本身這個框架就是設計如此，如果非要去操作隱藏元素，那就用js的方法去操作，Palywright提供了一個入口可以執行js腳本。 js和Palywright不同，只有頁面上有的元素（在dom里面的），都能正常的操作，接下來用js試試吧！

那就繼續完善上邊可以定位到但是不能操作的代碼。

5.1代碼設計

5.2參考代碼

# coding=utf-8🔥# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行# 2.注釋：包括記錄創建時間，創建人，項目名稱。
# 3.導入模塊

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:browser = playwright.chromium.launch(headless=False)context = browser.new_context()page = context.new_page()page.goto("E:\\Desktop\\test\\hidden\\login.html")loginButton = page.locator("#000")# 操作隱藏元素js = "document.getElementById('000').click()"page.wait_for_timeout(10000)page.evaluate(js)print(loginButton.get_attribute("name"))# 通過id定位隱藏元素,然后進行判斷(上一篇兩種方法)print(page.is_visible("#bjhg"))print(page.locator("#bjhg").is_visible())page.wait_for_timeout(1000)print("browser will be close")page.close()context.close()browser.close()
with sync_playwright() as playwright:run(playwright)

5.3運行代碼

1.運行代碼，右鍵Run'Test'，就可以看到控制臺輸出，如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作（觸發點擊事件，彈出窗口，運行完之后，會發現頁面正常的點擊，彈出到關注宏哥的公眾號窗口。）。如下圖所示：

6.小結

6.1簡化代碼

百度搜到的可能方法是先用js去掉hidden屬性，再用selenium操作，這個有點多此一舉，你既然都已經會用js了，何必不一次性到位直接click呢？而且宏哥發現之前講解的也是這種方法，有點“脫了褲子排氣”。在這里宏哥糾正一下，直接一步到位哈！

6.2面試提問

如果面試官想問的是定位后操作隱藏元素的話，本質上說這個問題就是毫無意義的，web自動化的目的是模擬人的正常行為去操作。如果一個元素頁面上都看不到了，你人工也是無法操作的是不是？人工都不能操作，那你自動化的意義又在哪呢？所以這個只是為了單純的考察面試者處理問題的能力，沒啥實用性！（面試造飛機，進去擰螺絲）既然面試官這么問了，那就想辦法回答上給個好印象吧！記住一定不要回懟面試官，否則你的這次面試就涼了啊！！！