作为一名测试预备役,我要恶补F12的用法!

01 什么是F12

浏览器自带的一个开发调试工具,可以用F12一键呼唤出,所以简称F12工具。

特点,两个词:简单、轻量

02 如何启动F12

①键盘按下F12,启动!

②鼠标右键 -> 检查

③菜单 -> 更多工具 -> 开发者工具

④ctrl+shift+i

03 常规设置

1.显示位置调整

2.设置颜色和语言

3.手机版本的切换,适合测试H5页面小程序测试,可以方便在电脑操作和调试;也可以选择尺寸和不同的手机型号

04 Elements/元素

可用于页面结构分析,也可用于自动化脚本的元素定位;或者页面元素分析(元素大小,元素布局等)。前端页面-html页面,标签语言。

查看元素的代码

点击左上角的箭头图标〈或按快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置。

查看元素的属性

定位到元素的源代码之后,可以从源代码中读出该元素的属性。如class、src、width等属性的值。

修改元素的代码与属性

点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:选择Edit as HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。

当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,所以这个功能也是作为调试页面效果而使用。

05 Network/网络

这是测试用的最多一个模块,主要用于进行测试问题的分析和定位,这个部分记录了前后端的交互,是我们学习F12工具的重点内容。

前端和后端信息通过接口传输,Network记录了接口信息:

http请求消息:请求行、请求头、请求体

http响应消息:响应行,响应头,响应体

抓到的报文分析

状态: http的响应状态码

方法: http请求方法

域名:服务器的域名或者IP+端口

文件和类型: html、css js png

发起者:请求怎么发起的,比如script:页面是由script脚本处理的时候发送的

传输和代销:传输的文件及大小

详细报文内容

消息头,cookies,请求,响应,耗时

如何定位问题出在前端还是后端?

1、明显的前端js问题

2、抓包分析:

1)前端没有发送请求--前端问题

2)前端发送内容数据错误--前端问题

3)后端没有给响应消息--后端问题

4)后端响应消息,数据错误--后端问题

5)前端没有正确显示--前端问题

👉配合数据库数据确认+Linux服务器分析项目日志

请求搜索和过滤

请求过滤

  • Content type: HTML, CSS, Js

  • XHR requests: XMLHttpRequests

  • ws: WebSocket 连接

报文过滤:ctrl+F

  • url:域名或者文件部分包含这个URL

  • status-code:404

  • method:post

  • domain:8.129.91.152:8765remote-ip:124.237.176.160mime-type:image/png

搜索请求

  • 点击搜索按钮打开搜索框

  • 搜素关键字可以是请求和响应消息头和响应消息体

  • 大小写敏感: Aa

  • 关闭搜索框

接口测试和数据篡改

1、右键后点击编辑并重发(火狐浏览器自带)

1)可以修改捕获到的请求的数据(参数)--接口

2)发送接口请求

3)检查响应结果--接口服务器处理结果

2、点击新请求

自己手动添加请求地址、请求头、请求体等信息,进行发送

这里可以修改参数、请求头、请求地址等,对接口的正常数据+异常数据进行测试

使用场景:前端检查了一些异常数据报错,接口层面是否也有检测这种异常数据的能力呢? 所以要对接口进行这些异常数据的测试检查。

导入和导出

复制:

复制网址: api.juejin.cn/user_api/v1…

复制post数据(请求体)︰可以用于jmeter这种工具使用

复制请求头:可以用于Jmeter这种工具的粘贴使用

接口测试:开发给的接口文档不详细主要自己抓包进行接口测试!结合Jmeter

复制为curl命令(linux)可以在postman里粘贴使用导入请求进行接口测试

复制为HAR格式/所有内容保存为HAR模式

可以导入到其他工具使用,比如Metersphere工具。

导入HAR文件:

F12可以导入其他工具导出的HAR文件。

测试:开发HAR文件导出问题的定位!--问题复现修复bug

弱网测试

用途:模拟用户网络不佳的场景(web应用手机模式),保证软件可以正常处理并给出友好的反应和提示信息。

06 Record/录制(chrome 98版本后才有的功能)

录制脚本的用途(导入和导出):

测试的时候一些重复性的工作可以录制下来进行回放;也可以保存后导入进行repaly(重放)。

  1. 录制并进行replay

  2. 导出给开发进行replay复现bug

  3. 导入进行replay

  4. 还可以进入分析性能页面

注意:功能还是试用性功能,还在完善中,大家选择进行使用!

07 Application/应用

存储

用途:主要存储一些cookies和前端本地数据等。

本地存储和会话存储 主要是前端开发人员在前端设置,一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。--提高浏览器访问速度!

本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。

本地存储 保存不受时间限制,用于长期保存网站的数据;除非用户自己删除,否则不会消失;并且站内任何页面都可以访问该数据;主要用来保存访客将来还能看到的数据。

会话存储 用于临时保存针对一个窗口(或标签页)的数据,保存受时间限制,当前窗口一旦关闭,内容就会被浏览器删除。会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。

Cookie

Cookies是下载到您计算机上的小文件。比如访问过的链接,单击的按钮,登录信息或过去访问过的页面,当我们下次访问该网站时,该网站将使用该信息来跟踪我们先前在其网站上的活动。

它还可以记住以前输入到表单字段中的信息,例如姓名,日期,出生详细信息,信用卡号等。

Cookies的组成部分:

  • expires=date:表示cookie的失效时间,--会话默认--session相关

  • path=路径:访问路径,默认为当前文件所在目录(可选);设置了之后只有设置的那个路径文件才可以访问cookies

  • domain=域名:访问域名,限制在该域名下访问(可选)=设置的域名才可以访问cookies 没有设置默认当前域名

  • secure:安全设置,如果设置了则必须使用https协议才可获取cookie(可选)

完整格式为:

  • name=value; [expires=date] ; [path=路径];[domain=域名]; [secure]

08 Console/控制台

用途:开发用的测试

打印控制台的查看,用于测试查看报错内容(前端页面报错),前端开发编写js脚本调试前端代码,或打印分析问题。

1)console里验证xpath表达式:--UI自动化测试

$x(' //input[@name="phone"]')

2)执行JS语句:

3)查看cookies信息:

查看当前网站的Cookie;设置cookies值:document.cookie = "hhhhhhhhhh233333333333"

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

在这里插入图片描述

软件测试面试文档

我们学习必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有字节大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。

在这里插入图片描述

在这里插入图片描述