web测试抓包基本功——使用Google的F12

川长思鸟来 2022-10-12 15:53 446阅读 0赞

## web测试抓包基本功——使用Google的F12 ##

作为一个测试，平常大部分时间都是在做功能测试。  
而由于公司产品的原因，大部分时间都是在做web测试。  
因此，很容易因为工作重复的原因，经常会**忽略一些测试要留意的地方**。  
以下列出几点 前后端web测试需要留意的点。

一、从界面入手。比对原型图。  
从界面显示适配浏览器到 数据显示————这就是一个大家来找茬的游戏，有眼即可。  
主要就是 需求评审前看一遍需求——评审时别打瞌睡，听下产品经理的设计考虑帮助理解很重要。——第一次测试时，开着原型图比对时就可以了。

二、字段取值

重点留意有多个数字需要取值的界面——比如 实缴金额、应缴金额——要**特别留意前端是否取错值**。

操作  
1、在web界面 点击F12 使用Google自带的抓包工具，准备抓包  
![f12准备抓包][f12]  
2、界面点击，再次向后端发起请求——我这里示例是点击“查询”  
![抓包到请求][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70]

开始分析：  
1、接口前端有没有调对？  
![比对接口是否调对][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 1]  
在headers里拿获取到的url里的接口跟开发的接口文档比对，看前端是否调对接口  
（如果没有接口文档，一般也有开发的接口管理平台，比如swagger等，一般开发很少犯调错接口的错）  
2、检查**前端开发取值是否正确——这个是开发经常出bug的地方**  
![检查前端取值][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 2]

这个就要看接口文档，后端开发对字段的定义了。——哪个是应缴、哪个是实缴  
![开发接口的定义][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 3]  
嗯，那如果应缴金额跟实缴金额的值都一样，比如都是金额 500.那怎么判断前端是否取对值？  
答案——改数据库字段,（直接在Navicat手动修改、或者按业务流程在测试环境造异常缴费数据）  
2.2 在linux数据库查看接口调的sql——核对数据从哪个数据库表取值——也是手动改数据校验接口返回数据取值是否正确的前提  
![知道自己要去看哪个服务的日志][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 4]  
从接口知道要去 estate-trade 服务查看日志  
首先要知道自己要去哪个服务的日志获取查询sql——————服务的日志放的位置要问开发，同时自己也要有服务器的访问权限。  
![linux查看日志][linux]  
敲下Enter开始动态查看日志后，web界面再点击“查询”，重新发起查询请求  
![复制查询sql][sql]  
![数据库运行查询sql][sql 1]  
数据库运行查询sql。顺带**检查sql返回的数据是否符合业务需求+数据是从哪个数据库表查，取值是否正确**的  
![数据库运行sql][sql 2]  
2.3**检查数据条数是否正确**——比如数据库符合业务条件的确定是28条，而不是27条或30条——这个需要直接去数据库表查下  
![跟前端再次比对][20210705150916904.png]

同时也**跟web界面的数据条数比对**，确定我们没有取错sql  
![从sql看是查那张表][sql 3]

从sql我们知道源数据是从哪个表来的，就可以去对应哪个表该对应数据。——同时也**校验后端开发接口取值没取错表**。

如果实缴应缴金额一致，可以在**数据库改对应数据的值。————但是一定要记得校验完成后就改回来**——不然以后大概率挖坑埋自己。

**总结：检查前端取值、检查前端取值、检查前端取值。不要点点看看就过了。要溯源！！！**

[f12]: /images/20221005/036215e8a8b4499f86356d3a466cef0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70]: /images/20221005/242a7c2fa81c467280a7588cb69a57df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 1]: /images/20221005/4cdf75c7044e4ab1988ae66e0b1a3e60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 2]: /images/20221005/d033d9c731bf4af3824f815860df0b49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 3]: /images/20221005/002eba7d2e4f439aa41a79e63fdd6bd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDc4MjAyNg_size_16_color_FFFFFF_t_70 4]: /images/20221005/32c4e93e65c94c1ca1c6ae643b5616c8.png
[linux]: /images/20221005/a22aa4e6662e4c0db58f75be7c532463.png
[sql]: /images/20221005/1d79ee1557694f1fbea9ad2bbc28b37c.png
[sql 1]: /images/20221005/aeb85f1bc6384eeba6800ad3171f4832.png
[sql 2]: /images/20221005/97acd233b08c4e45a8f5d7abd23ff66e.png
[20210705150916904.png]: /images/20221005/80529a3bdd224cffa48720a7c3964fd0.png
[sql 3]: /images/20221005/aa9953d8918240f0b99624e7546e1dc6.png