Playwright-html-report源码解析

 执行命令生成html格式报告

 Playwright在执行完成测试,支持生成html格式的测试报告,如下图所示,使用"npx playwright test"执行测试,执行完成后,会提示“npx playwright show-report”命令。执行该命令,在http://localhost:9323地址上启动了一个web应用,该应用显示的就是生成的html报告。

生成的html报告内容如下所示:

点击某个test case,可以查看该case具体的执行步骤信息,如下图所示:

html-report源码解释

  那么playwright是如何生产html格式报告的呢?下载playwright source code,在packages下面有个html-reporter的目录,该目录下的代码选用了react框架,构建工具是vite。执行"npm run build"命令,可以build出html-reporter@0.0.0的lib,供其他模块使用。

  查看html-reporter的源码,可以看到html报告中的UI就是有react构建的,以html报告的header为例,header中包含了一个search框,另外,显示了All xx,Passed xx,Failed xx,Flaky xx,Skipped xx.查看headerView.tsx文件,内容如下所示:截图一本质上就是实现search检索框,截图二就是实现不同状态的tests数量显示。总结而言,html格式测试报告的UI是由react构建的。

  report-html目录有下多个组件,例如headerView,testCaseView,testFileView等,这些View最终都汇聚到reportView中。  要生成html格式报告,光用react还不行,还需要有测试结果相关的数据,才能渲染出期望结果。测试结果需要在测试执行过程中,测试执行结束后,收集到整个测试相关数据,然后调用

  Indext.tsx是应用的入口文件,主要内容如下所示:获取zip格式的report数据信息文件,读取文件内容,获取到json格式的数据信息,report.json。这些数据用于UI上测试结果数据信息显示,该文件中return的是<ReportView report={report}></ReportView>。

  zip数据信息来源于window.playwrightReportBase64.ZipReport 类实现了 LoadedReport 接口,它负责从ZIP归档中加载报告数据。报告数据存储在一个Base64编码的URI中,这个URI通过 window 对象的 playwrightReportBase64 属性提供。总结而言,report 数据来源于一个ZIP归档,该归档被编码为Base64字符串,并存储在全局 window 对象的一个属性中。ZipReport 类负责解析这个归档,并提取出所需的报告数据。

playwrightReportBase64从哪里生成

 从html-report的source code可以看到,读取的数据文件是从playwrightReportBase64 URL地址上获取的。那么,在哪里生成了这个数据文件呢?查看playwright/pakcages/playwright/src/reporter目录下,有一个html.ts文件,该文件主要负责收集测试过程中生成的测试数据。下面是部分source code,可以看到收集到数据后,被写入到了playwrightReportBase64 URL地址上。

在runner目录下的reporters.ts文件中,import了所有的reporter,用于生成测试报告。

  在runner目录下的runner.ts文件中,有犯法runAllTests(),该方法source code如下所示,可以看到在执行测试过程中,将测试执行结果进行的保存,用于后续的测试报告UI显示。

  以上就是playwright html-report生成原理。总结而言,就是在测试执行过程中监听测试执行情况,并记录测试数据结果信息,用react构建html格式的测试报告UI,在渲染报告的时候通过读取window.playwrightReportBase64 URL地址,获取测试结果信息,并显示在UI页面上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/29572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

创维超充车辆交付仪式暨参观座谈会圆满举行

6月14日&#xff0c;创维超充车辆交付仪式暨参观座谈会在南京成功举行。苏舜集团副总经理程璟一行以及近多出行东部大区总经理张显春一行齐聚一堂。创维汽车总裁、联合创始人吴龙八等领导亲临现场&#xff0c;对各位尊贵嘉宾的到来表示热烈欢迎&#xff0c;并与众人共同见证了这…

RK3588/算能/Nvidia智能盒子:[AI智慧油站」,以安全为基,赋能精准经营

2021年9月&#xff0c;山东省应急管理厅印发了关于《全省危险化学品安全生产信息化建设与应用工作方案&#xff08;2021-2022 年&#xff09;》的通知&#xff0c;要求全省范围内加快推进危险化学品安全生产信息化、智能化建设与应用工作&#xff0c;建设完善全省危险化学品安全…

属于PCIe 7.0的那道光来了~

随着数据洪流的持续涌动与计算密集型应用的爆发式增长&#xff0c;传统的电子互连技术在应对高带宽、低延迟、节能等多维度需求时日益显现其局限性。在这个背景下&#xff0c;光学互连技术以其独特的性能优势&#xff0c;逐渐成为业界瞩目的焦点&#xff0c;被视为未来数据中心…

基于Umijs框架的人脸识别系统的服务端口号的更改方法

目录 一、问题描述 二、问题分析 1、umijs介绍 2、Umijs的端口配置 3、umijs的作用 4、尝试启动7000端口 5、再次查看配置文件 三、问题解决 1、更改package.json的start选项中的端口 2、结果验证 &#xff08;1&#xff09;项目启动日志查看 &#xff08;2&#x…

【正则表达式】入门

参考视频&#xff1a;10分钟快速掌握正则表达式_哔哩哔哩_bilibili 这个网站用来测试写的正则表达式效果&#xff1a;regex101: build, test, and debug regex 示例&#xff1a; 限定符 ? 表示前一个字符可有可无 比如这里输入&#xff1a;de? 匹配结果可以得到d和de * 前…

【进阶篇-Day3:JAVA接口新特性、代码块、内部类、Lambda表达式、组件等的介绍】

目录 1、接口新特性1.1 JDK8的新特性1.2 JDK9的新特性 2、代码块2.1 代码块的定义2.2 代码块的分类 3、内部类3.1 内部类的定义3.2 内部类成员访问3.3 学习内部类的原因3.4 内部类的分类3.4.1 成员内部类3.4.2 静态内部类3.4.3 局部内部类3.4.4 匿名内部类&#xff08;1&#x…

优化 Flutter 应用开发:探索 ViewModel 的威力

介绍 1.1 什么是 ViewModel&#xff1f; ViewModel&#xff0c;顾名思义&#xff0c;就是视图的模型。在 Flutter 中&#xff0c;ViewModel 是一种用于管理视图状态和业务逻辑的重要概念。它承载了应用程序的核心功能&#xff0c;像是一个精心设计的控制中心&#xff0c;负责…

智能车联网安全发展形势、挑战

一、技术演进加速车联网安全环境复杂变化 当前&#xff0c;5G、大数据、大算力、大模型等技术正加速在车联网领域实现融合应用。车联网的网络通信能力、感知计算水平以及创新业务应用都在快速发展&#xff0c;与此同时&#xff0c;车联网的网络安全环境也在随之演进变化&#…

刷题——两个链表相加

原题&#xff1a;链表相加(二)_牛客题霸_牛客网 还没有完全掌握&#xff0c;只学会了反转链表 两个链表相加代码如下 /*** struct ListNode {* int val;* struct ListNode *next;* ListNode(int x) : val(x), next(nullptr) {}* };*/ class Solution { public:/*** 代码中的…

【Go语言精进之路】构建高效Go程序:了解string实现原理并高效使用

&#x1f525; 个人主页&#xff1a;空白诗 &#x1f525; 热门专栏&#xff1a;【Go语言精进之路】 文章目录 引言一、Go语言的字符串类型1.1 字符串的定义1.2 字符串的零值可用1.3 字符串的不可变性1.4 字符串的拼接1.5 字符串的常用方法1.6 实际使用示例 二、字符串的内部表…

软件设计不是CRUD(23):在流式数据处理系统中进行业务抽象落地——详细编码

&#xff08;接上文《软件设计不是CRUD&#xff08;22&#xff09;&#xff1a;在流式数据处理系统中进行业务抽象落地——设计思考》&#xff09; 4、详细设计 项目开发初期&#xff0c;有两种测速雷达和对应的摄像头需要接入&#xff0c;分别是STC500型测速雷达和TTS400型测…

pip导出格式错乱问题

pip导出带有各种路径 pip只导出版本 pip list | tail -n 3 | awk {print $1""$2} > requirements.txt

国际荐酒师香港协会受邀参加2024年美国独立日庆祝活动

国际荐酒师&#xff08;香港&#xff09;协会受邀参加2024年美国独立日庆祝活动促进世界酒中国菜的全球化发展 2024年6月18日&#xff0c;国际荐酒师&#xff08;香港&#xff09;协会大中华区驻广州办事处荣幸地接受了美国驻广州总领事馆 Nicholas Burns大使和Lisa Heller总领…

20240616日志:大模型压缩方法DMS

Location: Beijing 1 大模型剪枝 Fig. 1.1大模型压缩-剪枝 剪枝的理论来源基于彩票假设&#xff08;Lottery Ticket Hypothesis&#xff09;&#xff0c;指在神经网络中存在一种稀疏连接模式&#xff0c;即仅利用网络的一小部分连接&#xff08;彩票&#xff09;就足以实现与整…

零撸项目:撸包看广告小游戏app开发源码

开发一个名为“撸包看广告小游戏”的APP涉及多个方面&#xff0c;包括前端界面设计、后端逻辑处理、广告集成以及小游戏开发等。然而&#xff0c;我不能直接提供特定的源码&#xff0c;因为这涉及到多个因素&#xff0c;如安全性、版权和定制化需求。但我可以为你提供一个大致的…

AntDesign Vue Radio 单选框

案例&#xff1a;基本用法 <script setup> import {ref} from "vue";const value ref(false) </script> <template><div class"p-8 bg-indigo-50 text-center"><a-radiov-model:checked"value"class"w-96&quo…

【C++17 之 .base() 函数实现正向和反向迭代器之间的交换,原理及代码展示】接上一p

在 C17 之前&#xff0c;如果你有一个反向迭代器&#xff08;std::reverse_iterator&#xff09;并希望获取其对应的正向迭代器&#xff0c;你通常需要做一些额外的转换或维护额外的正向迭代器。然而&#xff0c;从 C17 开始&#xff0c;std::reverse_iterator 提供了一个 .bas…

颠覆行业!格行随身WiFi重新定义服务标准,线上线下无缝融合!随身WiFi行业的“海底捞”!随身WiFi哪个品牌最可靠?随身WiFi靠谱推荐!

不得不承认网络销售是现如今的重要销售方式&#xff0c;刚刚结束的618&#xff0c;以及接下来的双11&#xff0c;双12等电商购物节都是异常火爆&#xff0c;可背后也有不同的声音传来&#xff0c;网店现在生意也难做了&#xff1f;消费正回归线下实体经济&#xff1f; 这就是因…

这个开源软件,送给爱读书的你!!【送源码】

对于喜欢阅读的人来说&#xff0c;一定经历过从一本厚厚的修仙书籍到MP3、MP4的阅读时代&#xff0c;再到现今的手机软件。 但是现在的阅读软件经常会遇见以下问题&#xff1a;比如广告弹窗太多&#xff0c;排版乱&#xff0c;甚至很多的APP都进入会员时代&#xff0c;再加上一…

数字人源码部署该如何选对数字人源头工厂?

数字人作为AI产业的中流砥柱&#xff0c;其应用场景之广泛。从数字人口播、到直播到数字人克隆、到声音克隆、再至AI复活、数字人名片、数字人员工、数字人客服、3D息影舱智能交互、要知道这一切仅仅只是用了两年的时间&#xff0c;可见我国的AI技术取得突破性发展. 如果把时间…