1.簡介
在之前的文章中宏哥講解和分享了，爲了看清自動化測試的步驟，通過JavaScript添加高亮顏色，就可以清楚的看到執行步驟了。在學習和實踐Playwright的過程中，偶然發現了使用Playwright中的highlight()方法也突出顯示Web元素。與之前的方法有異曲同工之妙。而且很簡單。highlight()方法可以突出顯示Web元素，方便調試和可視化操作。
2.測試場景
我們在日常工作中進行自動化測試，有時會遇到一個定位表達式，會同時定位到多個元素的可能，並且，有的元素是不可見的，這樣一來，不僅會導致我們的測試用例執行失敗，而且在查找問題時困難，尤其是隱藏的元素。那麼我們如何在調試定位的時候就讓我們定位到的全部元素都比較直觀的展示在我們眼前呢？selenium需要我們逐一去查看，而playwright就直接提供了一個高亮的方法來突出展示web頁面上的元素。
3.高亮顯示定位到的元素
在我們調試元素定位的時候，不知道頁面上有多少個此類元素，不清楚頁面上這個元素具體顯示在什麼位置，這時候就可以使用 locator.highlight（）。語法如下：
locator.highlight()
4.highlight實戰
4.1highlight高亮單個元素
我們以度娘首頁爲例：高亮百度的搜索框（搜索框的元素id爲kw）。
4.1.1代碼設計
4.1.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-11-21 @author: 北京-宏哥 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-35-highlight() 方法之追蹤定位 ''' # 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("https://www.baidu.com/") page.locator("#kw").highlight() page.wait_for_timeout(2000) context.close() browser.close() with sync_playwright() as playwright: run(playwright)
4.1.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
4.2highlight高亮多個元素
我們以度娘首頁爲例：高亮百度的新聞（新聞的元素文本爲<新聞>）。
4.2.1代碼設計
4.2.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-11-21 @author: 北京-宏哥 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-35-highlight() 方法之追蹤定位 ''' # 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("https://www.baidu.com/") page.get_by_text("新聞").highlight() page.wait_for_timeout(10000) context.close() browser.close() with sync_playwright() as playwright: run(playwright)
4.2.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
宏哥講解和分享的以上方法對於我們調試元素定位，是不是炒雞方便？
4.3元素匹配器 - nth
將定位器返回到第n個元素。下標是從0開始的。nth(0)表示選擇第一個元素。語法如下：
banana = page.get_by_role("listitem").nth(2)
4.3.1nth實戰演示
依舊使用上面的例子對新聞進行定位點擊，經過前邊的定位調試，我們確定要定位第一個新聞。
4.3.1.1代碼設計
4.3.1.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-11-21 @author: 北京-宏哥 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-35-highlight() 方法之追蹤定位 ''' # 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("https://www.baidu.com/") news = page.get_by_text("新聞").nth(0).click() page.wait_for_timeout(1000) context.close() browser.close() with sync_playwright() as playwright: run(playwright)
4.3.1.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
5.小結
今天主要講解和介紹了在代碼調試階段使用highlight()方法使得元素高亮顯示，幫助我們定位調試代碼是否有問題，靈活使用高亮顯示，可以提高我們的工作效率！好了，時間不早了，今天就分享到這裏，感謝大家耐心的閱讀！！！
6.擴展
6.1元素匹配 - first&last
和nth同理，first就是匹配第一個，last就是匹配最後一個。
first等同於nth(0)
last等同於nth(-1)
使用方法和nth一樣
6.2代碼示列
def nth_news(self): # 定位第二個新聞，並且高亮該元素 self.page.get_by_text("新聞").nth(1).click() # 使用first定位第一個 self.page.get_by_text("新聞").first.click() # 使用last定位最後一個 self.page.get_by_text("新聞").last.click()