前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《最新出炉》系列初窥篇-Python+Playwright自动化测试-32-JavaScript的调用执行-下篇

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

作者头像
北京-宏哥
发布2023-11-23 10:08:07
1870
发布2023-11-23 10:08:07
举报
文章被收录于专栏:北京宏哥北京宏哥

1.简介

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

2.用法

上一篇中就提到过,这里提取一下,语法如下:

代码语言:javascript
复制
# 原生js
js = '原生js;'
# 调用js
page.evaluate(js)

3.场景三

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

3.1代码设计
3.2参考代码
代码语言:javascript
复制
# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-11-11
@author: 北京-宏哥   
公众号:北京宏哥
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知识。好了,时间不早了,今天就分享和讲解到这里,感谢大家耐心的阅读,喜欢宏哥的,别忘记在文章末尾支持一下。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-11-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.简介
  • 2.用法
  • 3.场景三
    • 3.1代码设计
      • 3.2参考代码
        • 3.3运行代码
        • 4.小结
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档