接口测试平台190: 并发报告(6)

简介: 接口测试平台190: 并发报告(6)

本节课我们继续研发这个 并发的自研报告模板:

   目前:

image.png

image.png


然后我们今天开发下面的那个模块:详情部分


这部分我准备用bootstarp的表格来展示比较好。

所以先要引入:

image.png


而这个dom层的 表格table。我写的可能稍微复杂一些,大家理解不了的可以加v :qingwanjianhua 进群咨询


image.png

用的dom层的双重循环。


效果如下:(后续我们会美化)

image.png


然后就是步骤的详情了。这个包含请求数据,返回体,断言结果,不可能直接这么展示出来。

所以我们最好做个点击事件-弹层来表示。

image.png


效果如下:

image.png



然后是这个按钮的点击事件:

image.png


注意,点击事件中传入了step.id,这样可以让detail函数清楚自己要展示的是哪个step的数据。


不过这里我们又遇到了一个问题,就是数据从何而来?


我们之前的确在进入页面的时候带上了我们辛苦存放的数据,但是那些是给dom层用的,我们现在要使用的是bom层中。


所以我们还是有俩种方案,一种是带着这个step_id 去后台通过接口拿数据来展示。

另一种是想办法把一开始带过来的数据通过某种方式放在bom层可用。


具体选哪种我们下节课再说....


本节课我们先来把这个弹层做出来...

image.png

弹层默认是隐藏的,点击后展示,并且填充数据(当然现在还没写这步骤)


测试下效果:

image.png

当然这个页面确实挺难看....


不过我们后续会优化的哦~


本节到此结束,欢迎收看:测试开发干货

相关文章
|
4天前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
30 11
|
1月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
1月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
60 3
|
1月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
133 1
|
2月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
77 2
|
1月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
64 0
|
2月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
77 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
2月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
45 0
|
3月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
263 7
Jmeter实现WebSocket协议的接口测试方法
|
3月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
273 3
快速上手|HTTP 接口功能自动化测试
下一篇
DataWorks