讲师中心 微信公众号
AI工具推荐 视频效率加速

谷歌浏览器如何使用“记录”面板录制和重放用户操作 F12 Recorder功能【自动化测试】

冬浩君_9871

冬浩君_9871

发布时间:2026-02-15 17:12:10

|

938人浏览过

|

来源于php中文网

原创

需启用F12 Recorder功能:一、通过Settings→Experiments启用Enable Recorder并重启;二、点击Recorder标签→New recording命名后启动;三、Stop后可编辑步骤并Save为JSON;四、选录制项后Play重放或Step over单步调试;五、Export为Puppeteer脚本用于CI集成。

谷歌浏览器如何使用“记录”面板录制和重放用户操作 f12 recorder功能【自动化测试】

如果您希望在谷歌浏览器中通过开发者工具的“记录”面板自动捕获并回放用户交互行为,以支持手动验证或轻量级自动化测试场景,则需启用并操作F12 Recorder功能。以下是具体操作步骤:

一、启用Recorder面板

Recorder功能默认未在开发者工具侧边栏显示,需先通过设置开启实验性功能入口。该步骤确保Recorder面板可被访问和使用。

1、在谷歌浏览器中按 F12 打开开发者工具。

2、点击右上角三个点图标,选择 Settings(设置)。

3、在左侧菜单中选择 Experiments(实验性功能)。

4、在搜索框中输入 recorder,勾选 Enable Recorder 选项。

5、关闭设置页,重启开发者工具(关闭再按F12重新打开)。

二、创建并启动新录制

启用后,Recorder面板将出现在开发者工具顶部标签栏,用于定义录制范围、命名任务并开始捕获用户操作序列。

1、点击开发者工具顶部的 Recorder 标签。

2、点击左上角 + New recording 按钮。

3、在弹出窗口中为录制命名,例如 Login Flow,并可选择是否包含鼠标移动事件(建议取消勾选以减少冗余)。

4、点击 Start recording 按钮。

5、在页面中执行目标操作,如点击按钮、填写表单、跳转链接等。

三、停止并保存录制脚本

停止录制后,系统会生成结构化操作列表,支持查看、编辑与导出,为后续重放提供基础数据。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

1、点击Recorder面板右上角的 Stop 按钮(红色方块图标)。

2、录制的操作将按时间顺序显示在主区域,每条记录含动作类型、目标元素、触发方式(如click、input)。

3、可点击任意步骤左侧的三点图标,选择 Edit step 修改选择器或延时参数。

4、点击右上角 Save 图标,将录制保存至本地JSON文件。

四、重放已录制的操作流程

重放功能可完整复现用户交互路径,适用于回归验证或快速演示,支持单步执行与全量运行两种模式。

1、在Recorder面板中,从左侧录制列表选择已保存的录制项。

2、点击面板顶部的 Play 按钮(绿色三角形)启动全量重放。

3、如需调试,点击 Step over(单步执行)按钮,逐条触发操作并观察页面响应。

4、重放过程中,当前执行步骤会在列表中高亮显示,失败步骤将标红并提示原因(如元素不可见、超时)。

五、导出为Puppeteer脚本

Recorder支持将操作序列转换为可执行的Node.js代码,便于集成至CI流程或扩展为完整自动化测试用例。

1、在Recorder面板中选中目标录制项。

2、点击右上角 Export 图标(向下箭头)。

3、选择导出格式为 Puppeteer script (.js)。

4、保存生成的JS文件,该文件已内置浏览器启动、页面导航、等待策略及操作调用逻辑。

相关文章

谷歌浏览器
谷歌浏览器

谷歌浏览器Google Chrome是一款可让您更快速、轻松且安全地使用网络的浏览器。Google Chrome的设计超级简洁,使用起来得心应手。这里提供了谷歌浏览器纯净安装包,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2115

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3202

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1076

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3639

2025.09.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4276

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1315

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1718

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

9823

2023.08.17

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpMyAdmin 常见问题
phpMyAdmin 常见问题

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn