《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer

本文主要是介绍《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

宏哥微信粉丝群:https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入

1.简介

在我们日常执行自动化测试工作的过程中,经常会遇到一些偶发性的bug,但是因为bug是偶发性的,我们不一定每次执行都能复现,所以我们在测试执行的时候,追踪用例执行就变得非常重要了。playwright提供了一个Playwright Trace Viewer工具来追踪测试执行,这是一个GUI工具,我们可以通过它探索记录的 Playwright 测试跟踪,可以在测试的每个操作中前后移动,并直观地查看每个操作期间发生的情况。

2.API

Trace View介绍官方API的文档地址:Trace viewer | Playwright Python 

3.Trace Viewer 追踪功能

可以使用browser_context.tracing API 记录跟踪。

3.1同步
browser = chromium.launch()
context = browser.new_context()# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)page.goto("https://playwright.dev")# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")
3.2异步
browser = await chromium.launch()
context = await browser.new_context()# Start tracing before creating / navigating a page.
await context.tracing.start(screenshots=True, snapshots=True, sources=True)await page.goto("https://playwright.dev")# Stop tracing and export it into a zip archive.
await context.tracing.stop(path = "trace.zip")

如果screenshot选项为True,每个跟踪都会记录一个截屏视频并将其呈现为胶片,可以将鼠标悬停在胶片上以查看每个操作和状态的放大图像,有助于轻松找到要检查的操作。

运行代码:将记录跟踪并将其放入名为trace.zip.

4.打开跟踪

运行代码后,我们可以看到,在文件夹中会多出一个名为trace.zip,我们可以使用playwright cli或者在浏览器中打开保存的跟踪trace.playwright.dev。命令如下:

playwright show-trace trace.zip

5.查看文件(轨迹)

运行上述命令后,我们可以查看生成的trace.zip内容,我们可以单击左侧的操作或者上方的时间轴来查看测试痕迹,并且查看操作前后页面的状态。在测试的每个步骤中检查日志、源和网络。跟踪查看器创建一个 DOM 快照,因此我们可以与其完全交互,打开 devtools 等。有2种方法可以查看文件(轨迹)。

5.1方法一

通过命令行查看操作过程追踪。

playwright show-trace trace.zip
5.2方法二

方法2.访问 Playwright Trace Viewer 选择录制好的trace.zip文件即可打开。

6.项目实战

还是以度娘查询“北京-宏哥”,然后点击“百度一下”为例进行演示。

6.1代码设计

6.2参考代码
# coding=utf-8🔥# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-12-06
@author: 北京-宏哥
公众号:北京宏哥
Project: 《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer
'''# 3.导入模块
from playwright.sync_api import Playwright, sync_playwright, expectdef run(playwright: Playwright) -> None:browser = playwright.chromium.launch(headless=False)context = browser.new_context()context.tracing.start(screenshots=True, snapshots=True, sources=True)page = context.new_page()page.goto("https://www.baidu.com/")page.locator("#kw").click()page.locator("#kw").fill("北京-宏哥")page.locator("#su").click()context.tracing.stop(path="trace.zip")context.close()browser.close()with sync_playwright() as playwright:run(playwright)
6.3运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

2.运行代码后与代码同一目录下看到trace.zip文件。如下图所示:

6.4查看文件(轨迹)

1.按照前边讲解的方法查看宏哥这里使用第二种。访问https://trace.playwright.dev/,选择我们录制好的trace.zip文件,将其拖拽到页面中,即可打开。如下图所示:

2.我们可以看到我们每一步操作的页面截图,查看页面展示是否完整,如下图所示:

3.查看操作前后的页面变化,通过点击不同按钮,查看页面变化,如下图所示:

4.展示操作完整信息,操作的时间点,耗时,元素定位等信息都会被展示,如下图所示:

7.创建多个追踪文件

上边宏哥讲解的是创建一个追踪文件。那么如果想使用同一个浏览器上下文创建多个跟踪文件,我们可以先用tracing.start()。然后再使用tracing.start_chunk创建多个跟踪文件。语法示例如下:

context.tracing.start(name="trace", screenshots=True, snapshots=True)
page = context.new_page()
page.goto("https://playwright.dev")context.tracing.start_chunk()
page.get_by_text("Get Started").click()
# Everything between start_chunk and stop_chunk will be recorded in the trace.
context.tracing.stop_chunk(path = "trace1.zip")context.tracing.start_chunk()
page.goto("http://example.com")
# Save a second trace file with different actions.
context.tracing.stop_chunk(path = "trace2.zip")

有兴趣的小伙伴或者童鞋们可以自己实现一下,宏哥这里由于时间的关系,不在这里给大家进行演示了。

8.小结

本文主要介绍了playwright的可视化追踪工具Trace Viewer的使用,Trace Viewer功能非常强大,提供的信息非常完整,便于我们去快速定位问题。 好了,今天时间不早了,关于playwright的可视化追踪工具Trace Viewer就先介绍讲解到这里。感谢您耐心的阅读!!!

 每天学习一点,今后必成大神-

往期推荐(由于跳转参数丢失了,所有建议选中要访问的右键,在新标签页中打开链接即可访问)或者微信搜索: 北京宏哥  公众号提前解锁更多干货。

Appium自动化系列,耗时80天打造的从搭建环境到实际应用精品教程测试

Python接口自动化测试教程,熬夜87天整理出这一份上万字的超全学习指南

Python+Selenium自动化系列,通宵700天从无到有搭建一个自动化测试框架

Java+Selenium自动化系列,仿照Python趁热打铁呕心沥血317天搭建价值好几K的自动化测试框架

Jmeter工具从基础->进阶->高级,费时2年多整理出这一份全网超详细的入门到精通教程

Fiddler工具从基础->进阶->高级,费时100多天吐血整理出这一份全网超详细的入门到精通教程

Pycharm工具基础使用教程

这篇关于《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1007204

相关文章

一文带你搞懂Python中__init__.py到底是什么

《一文带你搞懂Python中__init__.py到底是什么》朋友们,今天我们来聊聊Python里一个低调却至关重要的文件——__init__.py,有些人可能听说过它是“包的标志”,也有人觉得它“没... 目录先搞懂 python 模块(module)Python 包(package)是啥?那么 __in

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

Python实现特殊字符判断并去掉非字母和数字的特殊字符

《Python实现特殊字符判断并去掉非字母和数字的特殊字符》在Python中,可以通过多种方法来判断字符串中是否包含非字母、数字的特殊字符,并将这些特殊字符去掉,本文为大家整理了一些常用的,希望对大家... 目录1. 使用正则表达式判断字符串中是否包含特殊字符去掉字符串中的特殊字符2. 使用 str.isa

python中各种常见文件的读写操作与类型转换详细指南

《python中各种常见文件的读写操作与类型转换详细指南》这篇文章主要为大家详细介绍了python中各种常见文件(txt,xls,csv,sql,二进制文件)的读写操作与类型转换,感兴趣的小伙伴可以跟... 目录1.文件txt读写标准用法1.1写入文件1.2读取文件2. 二进制文件读取3. 大文件读取3.1

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停

基于Python实现读取嵌套压缩包下文件的方法

《基于Python实现读取嵌套压缩包下文件的方法》工作中遇到的问题,需要用Python实现嵌套压缩包下文件读取,本文给大家介绍了详细的解决方法,并有相关的代码示例供大家参考,需要的朋友可以参考下... 目录思路完整代码代码优化思路打开外层zip压缩包并遍历文件:使用with zipfile.ZipFil

Python处理函数调用超时的四种方法

《Python处理函数调用超时的四种方法》在实际开发过程中,我们可能会遇到一些场景,需要对函数的执行时间进行限制,例如,当一个函数执行时间过长时,可能会导致程序卡顿、资源占用过高,因此,在某些情况下,... 目录前言func-timeout1. 安装 func-timeout2. 基本用法自定义进程subp

Python实现word文档内容智能提取以及合成

《Python实现word文档内容智能提取以及合成》这篇文章主要为大家详细介绍了如何使用Python实现从10个左右的docx文档中抽取内容,再调整语言风格后生成新的文档,感兴趣的小伙伴可以了解一下... 目录核心思路技术路径实现步骤阶段一:准备工作阶段二:内容提取 (python 脚本)阶段三:语言风格调

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验