1.簡介
通過前邊三篇的學習，想必大家已經對iframe有了一定的認識和了解，今天這一篇主要是對iframe的一些特殊情況的介紹和講解，主要從iframe的定位、監聽事件和執行js腳本三個方面進行展開介紹。
2.iframe定位
2.1動態id屬性如何定位
有時候，我們可能看到的iframe 的id不是固定的，是動態的一個id, 每次刷新，它的值都不一樣（一般前面一部分是固定的），而且它的剛好又沒有name屬性。例如：宏哥前邊講解的163郵箱的iframe的id就是動態的。如下圖所示：
像上圖所示的這種動態的id，如何定位了，宏哥在這裏講解兩種比較常用的方法，當然了可能有比宏哥更好的方法，歡迎留言討論。
2.2.1第一種方法
可以用css的正則匹配元素屬性
|
語法 |
描述 |
|
|
匹配 name 以 value 開頭的元素 |
|
|
匹配 name 以 end 結尾的元素 |
|
|
匹配class屬性包含text的元素 |
參考代碼：
# css 正則匹配屬性 frame = page.frame_locator('[id^="x-URS-iframe"]') print(frame) frame.locator('#username').fill('北京-宏哥')
2.2.2第二種方法
使用xpath的contains 包含屬性。參考代碼：
# xpath的contains 包含屬性 frame = page.frame_locator('//*[contains(@id, "x-URS-iframe")]') print(frame) frame.locator('#username').fill('北京-宏哥')
2.2兩層iframe如何定位
兩層iframe，顧名思義是：iframe下嵌套另外一個iframe。解決辦法沒什麼技巧，一層一層定位即可。多層也是類似的方法。例如：宏哥前邊講解的QQ郵箱的iframe就有個2層的iframe。如下圖所示：
#一層一層定位定位frame frame = page.frame_locator('[class="QQMailSdkTool_login_loginBox_qq_iframe"]').frame_locator("#ptlogin_iframe") #點擊密碼登錄 frame.locator("#switcher_plogin").click() frame.locator('#u').fill('北京-宏哥') frame.locator('#p').fill("123456") frame.locator('#login_button').click()
3.監聽事件
iframe的事件可以通過page對象直接監聽到。如下圖所示：
3.1代碼設計
其它的下載事件，文件上傳監聽方法都類似一樣。
3.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-08-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-13-playwright操作iframe ''' # 3.導入模塊 from playwright.sync_api import sync_playwright def handler(dialog): print("監聽dialog 事件") print(dialog.message) # dialog.accept() with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/iframe/index.html") page.on('dialog', handler) # 一層一層定位 frame = page.frame_locator('#frameA') frame.locator('#alert').click() #page.pause() browser.close()
3.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
4.執行js腳本
4.1在page對象執行js腳本
使用page.evaluate(js代碼)方法可以直接在page對象上執行JavasScript 代碼。
4.1.1代碼設計
4.1.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-08-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-13-playwright操作iframe ''' # 3.導入模塊 from playwright.sync_api import sync_playwright def handler(dialog): print("監聽dialog 事件") print(dialog.message) # dialog.accept() with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("https://sahitest.com/") page.on("dialog", handler) # 執行JavaScript page.evaluate("alert('hello world')") #page.pause() browser.close()
4.1.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
4.2在iframe上執行js腳本
在iframe上執行JavaScript代碼，需在iframe對象上執行。例如：在iframe的input中輸入“北京-宏哥”，如下圖所示：
4.2.1代碼設計
4.2.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-08-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-13-playwright操作iframe ''' # 3.導入模塊 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/iframe/index.html") iframe = page.frame(name='frameA') # 執行js 給輸入框輸入內容 js = "document.getElementById('iframeinput').value='北京-宏哥';" iframe.evaluate(js) page.pause() browser.close()
4.2.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
5.小結
今天主要講解和分享了一下iframe在一些特殊情況下如何定位，以及iframe的監聽事件和執行js腳本。好了，時間不早了，今天就分享到這裏，感謝您耐心的閱讀！！！