接口测试平台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

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


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


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

相关文章
|
2月前
|
资源调度 测试技术 Linux
一款接口自动化神器—开源接口测试平台Lim(Less is More)
一款接口自动化神器—开源接口测试平台Lim(Less is More)
128 2
|
4月前
|
分布式计算 测试技术 Spark
通过Langchain实现大模型完成测试用例生成的代码(可集成到各种测试平台)
通过Langchain实现大模型完成测试用例生成的代码(可集成到各种测试平台)
647 0
|
1月前
|
缓存 运维 Serverless
应用研发平台EMAS产品常见问题之测试检查更新没有反应如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
|
1月前
|
机器学习/深度学习 人工智能 监控
视觉智能平台常见问题之体验产品的美颜测试关掉如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
23 1
|
2月前
|
测试技术
Lim测试平台测试报告说明
Lim测试平台测试报告说明
32 2
|
2月前
|
SQL 测试技术 数据库连接
Lim接口测试平台-接口测试功能详解
Lim接口测试平台-接口测试功能详解
40 1
|
2月前
|
SQL 监控 测试技术
Lim测试平台变量使用规则介绍
Lim测试平台变量使用规则介绍
27 0
|
2月前
|
测试技术
使用Lim测试平台快速完成批量造数
使用Lim测试平台快速完成批量造数
31 1
|
2月前
|
SQL JSON 监控
Lim测试平台快速上手教程
Lim测试平台快速上手教程
38 0
|
2月前
|
测试技术 Linux 数据安全/隐私保护
如何远程访问Linux MeterSphere一站式开源持续测试平台
MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能,全面兼容 JMeter、Selenium 等主流开源标准,有效助力开发和测试团队充分利用云弹性进行高度可扩展的自动化测试,加速高质量的软件交付,推动中国测试行业整体效率的提升。