软件测试——F12开发者工具
F12常用标签页
观察者（elements）：确定页面组件的位置，在UI自动化中应用。
日志框（console）记录并显示运行时信息。
工具与代码部分（source）分别负责排查网页bug和设置暂停点。
抓包与分析用于网络故障定位。
评估网页运行效率及响应速度。
缓存机制(memory)管理网站数据，在提升用户体验的同时优化资源使用。
一、elements查看器
用途 ：用于分析页面结构、自动化脚本中元素定位以及对页面元素的分析（包括大小和布局等）。1、执行操作 （对选中的元素执行操作-ctrl+shift+c）
2、查看元素的属性
3、修改元素的代码与属性
在软件测试环境中进行UI自动化元素定位是一项关键任务，在本案例中将详细展示这一过程的操作方法与实现技巧。通过使用Selenium工具，在页面中定位并获取用户名和密码输入字段，并通过点击登录按钮完成用户的登录操作。具体来说，在实际操作中可以按照以下步骤进行：首先打开目标网页并启动Selenium浏览器；其次在页面源代码中精准识别并提取出所有用户相关的信息；最后根据获取到的用户名和密码信息模拟完整的一次登录流程以验证系统功能是否正常运行。
绝对路径：/html/body/div[1]/div[1]/div[5]/div/div/form(span)[1]/input 起始位置 通过父节点间接确定位置 无法直接确定元素定位
相对路径：//[@id=kw] 或 //[@name=wd] 常用的定位方式包括 id、name 和 xpath 等等
Xpath 验证 输入字段（即搜索框）：使用 ctrl + f
二、network网络
用途
HTTP响应相关信息
报文分析细节
日志保留策略
缓存禁用策略
案例解析流程
过滤策略说明
搜索功能配置
三、Memory存储/应用
用途 ：主要存储一些cookies和前端本地数据等，提高浏览器访问速度。
本地存储和会话存储主要是前端开发人员在前端设置，一旦数据保存在本地后就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器之间不必要地来回传递。
本地存储和会话存储的操作代码完全相同，区别在于数据的寿命。
本地存储 ：保存不受时间限制，用于长期保存网站的数据，除非用户自己删除，否则不会消失，并且在站内任何网页都可以访问该数据；主要用于保存方可将来还能看到的数据
会话存储 ：用于临时保存针对一个窗口/标签页的数据，保存有时间限制，当前窗口一旦关闭内容就会被浏览器删除；主要用于保存需要从一个页面传递给下一个页面的数据
如：页面上输入一些内容信息（注册信息），中途页面中断、关闭，再重新打开时能保留上次输入的内容。
cookies ：是下载到计算机上的小文件，比如访问过的链接、单击按钮、登陆信息或者过去访问过的页面等，当我们下次访问该网站时，该网站将使用这些信息来跟踪我们之前在网站上的活动，还可以记住以前输入到表单字段中的信息，如姓名、日期、出生信息、卡号等。
cookies的组成部分 ：
expires=date ：表示cookie的失效时间，默认是浏览器关闭时失效（可选）——会话 默认
path=路径 ：访问路径，默认为当前文件所在目录（可选），设置了之后只有设置的访问路径才可以访问cookies
domain=域名 ：访问域名，限制在该域名下访问（可选），设置的域名才可以访问cookies，没有设置的话默认当前域名
secure ：安全设置，如果设置了则必须使用https协议才可获取cookies（可选）
完整格式为 ：
name=value;[expires=date];[path=路径];[domain=域名];[secure]
cookies用户鉴权和session配套使用：用户信息以session（会话）格式保存到服务器里，具有一定时效性，session id set cookies字段发送给客户端，客户端保存到浏览器（cookies）
四、console控制台
用途：在控制台输出结果中查看是否有错误信息；该工具可用于检查网页端出现错误时的状态；同时支持前端开发者在编写JavaScript脚本时用于调试前端代码，在出现问题时也可用于分析问题
功能说明：解析XPath表达式是否正确——在UI自动化测试场景中使用此功能
示例使用场景与输出结果：输出至控制台的内容为：$x(‘ xpath地址 ’)
2、执行js语句
第三步：浏览并管理cookies信息
五、performance性能测试
用途 ：监控该网页的性能各项指标信息
场景 ：在进行大并发的直播互动类似此场景下，对浏览器的负荷是比较大的，performance对网页进行分析就可以评估实时网页性能移机相关数据
案例：点击开始录制后会记录用户的交互移机这些教会对页面性能数据的影响，当交互完成后，点击stop来停止record，performance面板会展示刚才录制的页面性能数据
火焰图 ：显示性能报告，根据性能报告来分析页面的性能，从而找到性能瓶颈
FPS（帧率） ：主要和动画性能相关，代表每秒钟帧数。图表中绿色的长条越高，说明FPS越高，用户体验越好；如果其中有红色的长条，代表这个部分帧数有卡顿，需要优化。
NET ：主要展示了网络请求的先后顺序移机各自的请求耗时 可以被Network面板完美替代，建议直接查看Network
summary（摘要） ：cpu图表的各种颜色表示在这个时间段内，CPU在处理各种事件上面花费的时间，如果看到某段颜色占据大量的比重，就说明这个地方可以优化提升
main ：主要用来分析页面性能的部分，展现了主线程在Record过程中做的所有事情，包括：Lodging、Scripting、Rendering等；横轴代表时间，纵轴代表调用堆栈；每个长条代表执行了一个事件或函数，长条的长度反映耗时长短；如果某个长条右上角是红色的则表示该函数可能存在性能问题，需要重点关注。
导入 &导出火焰图：可以导出发送给开发进行分析/问题复现
![[Pasted image 20250409175203.png]]
