32-JavaScript的调用执行-下

1.简介

在实际工作中，我们需要对处理的元素进行高亮显示，或者有时候为了看清楚操作过程和步骤我们需要跟踪鼠标点击了哪些元素需要标记出来。虽然很少遇到，但是为了以后大家可以参考或者提供一种思路，今天就在这里把这种测试场景playwright是如何处理的讲解和分享一下。

2.用法

上一篇中就提到过，这里提取一下，语法如下：

复制代码

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

3.场景三

利用JS处理元素高亮显示。其实这个前边在代码中也有实现过，只不过没有提到可能没有注意或者看到过，在这里就讲解一下。

3.1代码设计

3.2参考代码

复制代码

# coding=utf-8🔥
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知识。