《最新出爐》系列初窺篇-Python+Playwright自動化測試-32-JavaScript的調用執行-下篇

1.簡介

 在實際工作中，我們需要對處理的元素進行高亮顯示，或者有時候爲了看清楚操作過程和步驟我們需要跟蹤鼠標點擊了哪些元素需要標記出來。雖然很少遇到，但是爲了以後大家可以參考或者提供一種思路，今天宏哥就在這裏把這種測試場景playwright是如何處理的講解和分享一下。

2.用法

上一篇中就提到過，這裏提取一下，語法如下：

# 原生js
js = '原生js;'
# 調用js
page.evaluate(js)

3.場景三

利用JS處理元素高亮顯示。其實這個前邊在代碼中也有實現過，只不過沒有提到可能沒有注意或者看到過，宏哥在這裏就講解一下。

3.1代碼設計

3.2參考代碼

# coding=utf-8🔥

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

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

# 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://www.baidu.com/")
    #定位點擊登錄
    #page.pause()
    page.locator("#s-top-loginbtn").click()
    page.locator("#TANGRAM__PSP_11__userName").fill("北京-宏哥")
    #設置顏色
    usernamejs ="var u = document.getElementById('TANGRAM__PSP_11__userName').style.background = 'yellow'; var u1=document.getElementById('TANGRAM__PSP_11__userName').style.border = '2px solid red'"
    page.evaluate(usernamejs)
    passwordjs = "var u = document.getElementById('TANGRAM__PSP_11__password').style.background = 'yellow'"
    page.evaluate(passwordjs)
    submitjs = "var u = document.getElementById('TANGRAM__PSP_11__submit').style.background = 'yellow'"
    page.evaluate(submitjs)
    page.wait_for_timeout(3000)
    # page.pause()
    browser.close()

3.3運行代碼

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

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

4.小結

 宏哥今天講解的這種辦法優點是：可以幫你清楚的看到那些功能執行了，那些沒有執行，對鼠標都點擊走過的路線進行一個追蹤。缺點是：前期需要編寫代碼添加顏色以及要熟悉JavaScript語法和css知識。好了，時間不早了，今天就分享和講解到這裏，感謝大家耐心的閱讀，喜歡宏哥的，別忘記在文章末尾支持一下。