《最新出爐》系列初窺篇-Python+Playwright自動化測試-12-playwright操作iframe-中篇

1.簡介

按照計劃今天就要用實際的例子進行iframe自動化測試。經過宏哥長時間的查找，終於找到了一個含有iframe的網頁（QQ郵箱和163郵箱），別的郵箱宏哥就沒有細看了。所以今天這一篇的主要內容就是用這兩個網頁的iframe結合上一篇的理論知識，宏哥給小夥伴或者童鞋們演示一下。

2.QQ郵箱

2.1iframe

F12查看HTML元素可以發現iframe，如下圖所示：

2.2代碼設計

2.3參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-07-23
@author: 北京-宏哥   QQ交流羣：705269076
公衆號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-11-playwright操作iframe
'''

# 3.導入模塊
from playwright.sync_api import Playwright, sync_playwright

def run(playwright: Playwright) -> None:

    browser = playwright.chromium.launch(headless=False, slow_mo=1000)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://mail.qq.com/")
    page.wait_for_timeout(3000)
    #點擊QQ登錄
    page.locator("#QQMailSdkTool_login_loginBox_tab_item_qq").click()
    page.wait_for_timeout(3000)
    # 定位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()
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

2.4運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

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

 

3.163郵箱

3.1iframe

同理F12查看HTML元素可以發現iframe，如下圖所示：

3.2代碼設計

由於iframe 元素 id 屬性是動態可變的id="x-URS-iframe1676960382133.3657" 可以使用xpath的contains 模糊匹配，或者css的正則匹配來對其進行定位。

3.3參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-07-23
@author: 北京-宏哥   QQ交流羣：705269076
公衆號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-11-playwright操作iframe
'''

# 3.導入模塊
from playwright.sync_api import Playwright, sync_playwright

def run(playwright: Playwright) -> None:

    browser = playwright.chromium.launch(headless=False, slow_mo=1000)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://mail.163.com")
    # xpath 模糊匹配
    frame = page.frame_locator('//iframe[contains(@id, "x-URS-iframe")]')
    frame.locator('[name="email"]').fill('北京-宏哥')
    frame.locator('[name="password"]').fill("123456")
    frame.locator('#dologin').click()
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

3.4運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

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

4.小結

1.在Web UI自動化的測試中，如果一個元素定位不到，那麼最大的可能定位的元素屬性是在 iframe 框架中，iframe 是 html 中的框架，在 html 中，所謂框架就是可以在同一個瀏覽器窗口中顯示不止一個頁面,對不同頁面進行嵌套。順着定位元素往上找，查看是否有<iframe>標籤，找到說明要定位此元素，需先定位到元素所在的iframe，然後再定位元素。
2.frame標籤有frameset、frame、iframe三種，frameset跟其他普通標籤沒有區別，不會影響到正常的定位，而frame與iframe對Playwright定位而言是一樣的，Playwright有一組方法對frame進行操作。
3.通常採用id和name就能夠解決絕大多數問題。但有時候frame並無這兩項屬性，則可以用index和WebElement來定位：
　　index從0開始，傳入整型參數即判定爲用index定位，傳入str參數則判定爲用id/name定位
　　WebElement對象，即用frame_locator系列方法所取得的對象，我們可以用tag_name、xpath等來定位frame對象

好了，時間不早了，今天就分享和講解到這裏，感謝大家耐心的閱讀，喜歡宏哥的，別忘記在文章末尾支持一下。