《最新出炉》系列初窥篇-Python+Playwright自动化测试-32-JavaScript的调用执行-下篇 - 北京-宏哥

来源：cnblogs　　作者：北京-宏哥　　时间：2023/11/22 16:45:51　　对本文有异议

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