测出Bug后如何跟踪界面弹窗的接口调用和传参？

￡神魔★判官ぃ 2023-09-24 22:46 5阅读 0赞

**前情回顾**

在之前的文章里（如[《如何通过界面元素准确找到使用得后端接口》][Link 1]、[《如何“顺藤摸瓜”对web应用bug进行初步分析》][web_bug]）我们了解了如何简单判断界面出现的问题是属于后端接口故障还是前端故障，了解了如何通过前端提示或界面元素如何快速找到绑定的后端接口。

我们在学习到这类知识后获得了简单的调试和分析能力，已经能够独立分析一些故障原因。但是问题总是层出不穷的，习得的方法并不能一劳永逸……

**故事继续**

有这么一个场景：当你点击界面某个按钮或者某个图标，开启了一个新标签页，但是，你发现新标签页的某些选项设置与需求不一致。比如：你期望新标签页上的搜索框，设定的搜索时间是上级页面选择的7天，但新标签页上搜索框搜索时间范围设定却是1天。

这个时候，你反复尝试、清除浏览器缓存、仔细观察每个步骤，避免人为因素导致测试结果偏差。但无数次尝试后你断定：的确是个bug。

你想直接告诉前端开发同事：xxx搜索框传入搜索时间范围不正确。但你按捺住了冲动，你想搜集更多的证据证明这的确是前端的bug。毕竟，有理有据，说服人都能理直气壮。

可是，弹出新标签页不同于同一页面变化，要怎么跟踪从上级页面传入下级页面的参数呢？或者说，怎么能够跟踪新页面的接口调用呢？

**主线任务**

如何跟踪弹出页面的接口调用以及上级页面传入的参数呢？光说不练假把式。还是以51testing网站为例进行讲解~

如下图所示为51testing界面，点击“最新更新”栏目下的“行业资讯”，会弹出新标签页打开链接，访问详细内容。

![b7782c5ce3d17bd3e0ebfb006d11c19e.png][]

图1 51testing首页

我们首先来解决我们本次讨论的核心问题：如何跟踪弹窗开启的新标签页调用的后端接口？

这个问题，可能有人会回答：在新标签页开启浏览器调试模式，切换到“网络”，然后刷新页面。

的确，不能否认这是一个跟踪新标签页调用后端接口的方法。但是，请大家想想，刷新页面查看接口调用和上级页面触发调用接口是完全一样的吗？！

至少有一种情况不一样。如果新标签页需要接受上级页面传参，且刷新页面该参数值会恢复默认值的情况。一旦使用刷新页面跟踪接口调用，我们有可能会失去上级页面传入的参数，从而无法真正知晓是否上级页面传入参数有误。

那么，要怎么做呢？你需要掌握以下几个浏览器调试模式小技巧。

**1）勾选“网络”>“保留日志”**

打开浏览器调试模式，切换到“网络”，勾选“保留日志”。这个时候在上级页面点击图表或按钮跳转时，即可看到上级页面调用的接口。

如下图所示，点击“最新更新”栏目下的“行业资讯”，弹出新标签页时，在上级页面调试模式可看到事件触发时调用的接口http://m6816.talk99.cn/monitor/s?c=e&i=20001818&v=65a28119f8eb5cd040470977326503e3&p=882593729&x=1667542852272，及相应的参数。

![dab689abf252f8ad5155bfcdc2486574.png][]

图2 51testing上级页面弹出新标签页事件触发时调用的接口

**2）勾选“控制台”>“保留日志”**

众所周知，调试模式的“网络“面板主要是跟踪接口调用。除了上述1）所述的方法，我们还可以通过勾选”控制台“>”保留日志“，跟踪弹出窗口新标签页开启时，上级页面的前端日志。设置方式如下图所示。

![2705459f51cd06d7c317ef735ac3e8bc.png][]

图3 ”控制台“>”保留日志“设置

由于本案例中，“控制台“未输出相关日志，因此暂不截图演示。

**3）开启“为弹式窗口自动打开DevTools”**

我们1）、2）讲的方法都是捕捉上级页面事件触发时的日志输出，那么对于新页面我们怎么在事件触发时第一时间捕捉发起的接口调用和前端输出呢？！

了解一下“为弹式窗口自动打开DevTools“设置？！这个设置简直不要太好用。

打开浏览器调试窗口，点击右上方“设置“图标，勾选“为弹式窗口自动打开DevTools“设置即可。

![00840413e69aa2c91fa5b81681c4e00b.png][]

图4 “为弹式窗口自动打开DevTools“设置

完成“为弹式窗口自动打开DevTools“设置后，在上级页面触发弹出窗口开启新标签页时，新标签页会自动打开浏览器调试模式。

如下图所示，51testing的“行业资讯”新标签页调式模式下的网络面板。通过该面板可以及时跟踪新页面调用接口，以及从接口中捕捉上级页面传入的参数。

![8fe244cb741e4a0cab016b6ce088b6a2.png][]

图5

51testing的“行业资讯”新标签页调式模式下的网络面板

**任务交割**

通过本文的叙述和简单案例的讲解，我想大家对“如何跟踪界面弹窗的接口调用和传参“有了初步的认识，且掌握了几个小技巧。希望这些小技巧能帮助你更好地完成测试工作。记住：我们的目标是——没有蛀牙测试工作更专业！

**最后：** 下方这份完整的软件测试视频学习教程已经整理上传完成，朋友们如果需要可以自行免费领取**【保证100%免费】**

![4bef2bcc832534845b0294e084093b1c.png][]

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

![5e30e29caf934e78878a37830760ae75.gif][]

[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5NTU0MDg0MA==&mid=2651290983&idx=1&sn=06a12706d1566be38f3fef44252ce3b8&chksm=bd0527608a72ae7603dfb4944e5b0cee233db779265ce2b738d398200a8a86330a1e7fb11763&scene=21#wechat_redirect
[web_bug]: https://mp.weixin.qq.com/s/QyAbfSFxIWLaHqSfovGIfw
[b7782c5ce3d17bd3e0ebfb006d11c19e.png]: https://img-blog.csdnimg.cn/img_convert/b7782c5ce3d17bd3e0ebfb006d11c19e.png
[dab689abf252f8ad5155bfcdc2486574.png]: https://img-blog.csdnimg.cn/img_convert/dab689abf252f8ad5155bfcdc2486574.png
[2705459f51cd06d7c317ef735ac3e8bc.png]: https://img-blog.csdnimg.cn/img_convert/2705459f51cd06d7c317ef735ac3e8bc.png
[00840413e69aa2c91fa5b81681c4e00b.png]: https://img-blog.csdnimg.cn/img_convert/00840413e69aa2c91fa5b81681c4e00b.png
[8fe244cb741e4a0cab016b6ce088b6a2.png]: https://img-blog.csdnimg.cn/img_convert/8fe244cb741e4a0cab016b6ce088b6a2.png
[4bef2bcc832534845b0294e084093b1c.png]: https://img-blog.csdnimg.cn/img_convert/4bef2bcc832534845b0294e084093b1c.png
[5e30e29caf934e78878a37830760ae75.gif]: https://img-blog.csdnimg.cn/5e30e29caf934e78878a37830760ae75.gif