1.簡介
通過前邊兩篇的學習，想必大家已經對iframe有了一定的認識和了解，今天這一篇主要是對iframe做一個總結，主要從iframe的操作（輸入框、點擊等等）和定位兩個方面進行總結。
2.iframe是什麼？
iframe 簡單來說就是一個 html 嵌套了另外一個 html。在頁面元素上最簡單的識別方法，就是看你需要定位的元素外層有沒有iframe的標籤名稱。
iframe就是我們常用的iframe標籤：<iframe>。iframe標籤是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面，例如我們可以在我們自己的網站頁面加載別人網站或者本站其他頁面的內容。iframe標籤的最大作用就是讓頁面變得美觀。iframe標籤的用法有很多，主要區別在於對iframe標籤定義的形式不同，例如定義iframe的長寬高。簡單的一句話概括就是：iframe 就是HTML 中，用於網頁嵌套網頁的。 一個網頁可以嵌套到另一個網頁中，可以嵌套很多層。和俄羅斯套娃差不多吧。
3.iframe定位
定位iframe 對象，總的來說有四種方法
page.frame_locator(selector) #通過page對象直接定位iframe 對象，傳selector 選擇器參數
page.locator(selector).frame_locator(selector) #通過page對象定位某個父元素，通過locator定位frame_locator(selector)
page.frame(name，url) #通過page對象直接定位iframe 對象，傳name 或者url參數
page.query_selector(selector).content_frame() #通過query_selector方式，定位到元素，轉成frame 對象
page 對象還有2個跟frame 相關的方法
page.frames #獲取page對象全部iframes,包含page本身的frame對象
page.main_frame #獲取page的main_frame （page對象本身也是一個frame對象）
4.iframe的層級結構
官網上寫了個示例，可以快速查看iframe的層級結構，如下圖所示：
仿照官方的示例，宏哥分別來查看一下QQ郵箱和163郵箱的frame的層級結構。
4.1QQ郵箱的frame層級結構
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-07-23 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-13-playwright操作iframe ''' # 3.導入模塊 from playwright.sync_api import sync_playwright def dump_frame_tree(frame, indent): print(indent + frame.name + '@' + frame.url) for child in frame.child_frames: dump_frame_tree(child, indent + " ") with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("https://mail.qq.com/") dump_frame_tree(page.main_frame, "") browser.close()
運行代碼後，可以看到QQ郵箱登錄頁面的frame層級結構如下：
從控制檯的輸出結果可以看出：QQ郵箱主頁面（主頁面其實也可以看成一個iframe 對象）下有3個iframe，其中最後一個iframe下又嵌套了一層iframe。（可能是由於宏哥登錄QQ緣故吧）
4.2163郵箱的frame 層級結構
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-07-23 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-13-playwright操作iframe ''' # 3.導入模塊 from playwright.sync_api import sync_playwright def dump_frame_tree(frame, indent): print(indent + frame.name + '@' + frame.url) for child in frame.child_frames: dump_frame_tree(child, indent + " ") with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("https://mail.163.com") dump_frame_tree(page.main_frame, "") browser.close()
運行代碼後，可以看到163郵箱登錄頁面的frame層級結構如下：
5.獲取page對象的frame對象
獲取page對象的frame用到了以下3個基本方法
page.main_frame #獲取page對象本身的 frame 對象
page.frames #獲取page對象全部frames 包含page本身的frame對象
frame.child_frames #獲取frame下的全部子 frame 對象
宏哥這裏以163郵箱舉例說明。
5.1代碼設計
5.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-07-23 @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("https://mail.163.com/") print('獲取page對象本身的frame對象') print(page.main_frame) print('獲取page對象全部frames 包含page本身的frame對象 ') print(page.frames) print('獲取page對象子frame ') print(page.main_frame.child_frames) browser.close()
5.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
從以上控制檯的運行結果可以看出，iframe 對象有2個重要的屬性name和url, 可以直接打印出來看看
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-07-23 @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("https://mail.163.com/") for frame in page.frames: print("name:"+frame.name+"| url:"+frame.url) browser.close()
運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
從以上控制檯打印結果可以看出。iframe 元素的name和url屬性，都會被作爲那麼屬性打印出來，如果2個屬性都沒有，那麼獲取的name屬性爲空字符。
6.page.frame(name，url) 的使用
page.frame 和 page.frame_locator 使用差異
page.frame_locator('') #返回的對象只能用locator() 方法定位元素然後click()等操作元素
page.frame() 返回的對象能直接使用fill() 和 click() 方法
page.frame(name，url) #方法可以使用frame的name屬性或url屬性定位到frame對象
6.1name屬性定位iframe
定位iframe的name屬性可以是iframe元素的name 或id屬性。name 屬性不能模糊匹配，只能絕對匹配字符串。
（1）使用name屬性定位示例。
a.宏哥偶然發現一個在線的免費的demo網址：https://sahitest.com/demo 很好用，今天就使用它來講解定位frame。如下圖所示：
b.參考代碼，如下：
# 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("https://sahitest.com/demo/framesTest.htm") # name 屬性定位 frame = page.frame(name="top") print(frame) browser.close()
c.運行代碼控制檯輸出，如下圖所示：
（2）iframe元素沒有name屬性，有id屬性，也可以用來定位的
a.宏哥這裏還用之前的html頁面，進行演示。如下圖所示：
b.參考代碼，如下：
# 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") # name 屬性定位 frame = page.frame(name="frameA") print(frame) browser.close()
c.運行代碼控制檯輸出，如下圖所示：
6.2url屬性定位iframe
url屬性的值，就是我們看到頁面上的src屬性，可以支持模糊匹配。
a.宏哥偶然發現一個在線的免費的demo網址：https://sahitest.com/demo 很好用，今天就使用它來講解定位frame。如下圖所示：
b.參考代碼，如下：
# 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("https://sahitest.com/demo/framesTest.htm") # name 屬性定位 frame = page.frame(url="index.htm") print(frame) browser.close()
c.運行代碼控制檯輸出，如下圖所示：
7.page.frame_locator(selector)
這個前邊已經詳細介紹過了，宏哥就是在這裏總結一下，具體使用方法可以查看前邊的iframe文章。
7.1基本語法
page.frame_locator(selector)
7.2使用示例
1.使用示例，可以直接定位到frame對象，繼續定位元素操作
# 直接定位輸入 page.frame_locator('[name="top"]').locator("#username").fill('北京-宏哥') page.frame_locator('[name="top"]').locator("#password").fill('123456')
2.或者先定位到iframe對象，再通過frame對象操作，只需要定位到frame 對象，後面的元素定位操作都基本一樣了。
# frame 對象操作 frame = page.frame_locator('[name="top"]') frame.locator("#username").fill('北京-宏哥') frame.locator("#password").fill('123456')
3.也可以通過先定位外層的元素，再定位到frame對象，使用基本語法
page.locator(selector).frame_locator(selector)
8.不常用的方法
page.query_selector(selector).content_frame() 方法 是一個不太常用的方法，使用page.query_selector(selector)元素句柄的方式定位到iframe，然後使用content_frame() 方法切換到iframe對象上
語法規則：
page.query_selector(selector).content_frame()
8.1使用示例
# query_selector 方法 iframe = page.query_selector('[src="down.html"]').content_frame() print(iframe)
9.小結
今天主要是對前邊的iframe的相關知識做了一個總結以便更好地使用和學習。 好了，時間不早了，關於標籤操作宏哥就今天就分享到這裏。感謝你耐心地閱讀。