《最新出炉》系列初窥篇-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知识。好了，时间不早了，今天就分享和讲解到这里，感谢大家耐心的阅读，喜欢宏哥的，别忘记在文章末尾支持一下。