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, expectdef 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, expectdef 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, expectdef 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()

????每天學習一點，今后必成大神-

往期推薦（由于跳轉參數丟失了，所有建議選中要訪問的右鍵，在新標簽頁中打開鏈接即可訪問）或者微信搜索: 北京宏哥? 公眾號提前解鎖更多干貨。

Appium自動化系列，耗時80天打造的從搭建環境到實際應用精品教程測試

Python接口自動化測試教程，熬夜87天整理出這一份上萬字的超全學習指南

Python+Selenium自動化系列，通宵700天從無到有搭建一個自動化測試框架

Java+Selenium自動化系列，仿照Python趁熱打鐵嘔心瀝血317天搭建價值好幾K的自動化測試框架

Jmeter工具從基礎->進階->高級，費時2年多整理出這一份全網超詳細的入門到精通教程

Fiddler工具從基礎->進階->高級，費時100多天吐血整理出這一份全網超詳細的入門到精通教程

Pycharm工具基礎使用教程