Chrome浏览器自动化测试工具使用攻略
一、安装与配置基础环境
1. 启用开发者工具：在Chrome右上角点击三个点→选择“更多工具”→点击“开发者工具”→或按`Ctrl+Shift+I`直接打开。
2. 进入自动化测试面板：在开发者工具中点击“Sources”→找到“Automation”选项→加载测试脚本或录制新操作。
二、使用Puppeteer进行脚本编写
1. 创建基础脚本：在“控制台”输入`const puppeteer = require('puppeteer');`→定义`async function`函数→通过`page.goto()`访问目标网页。
2. 模拟用户操作：调用`page.click('submit')`点击按钮→使用`page.type('input', 'text')`输入内容→支持组合键（如`page.keyboard.press('Enter')`）。
3. 截取测试结果：通过`await page.screenshot({path: 'result.png'})`保存页面快照→或调用`page.pdf()`生成PDF报告。
三、录制与回放测试用例
1. 启动录制模式：在“自动化”面板点击“开始录制”→操作浏览器页面→系统自动生成对应脚本代码。
2. 编辑录制脚本：修改生成的`trace`文件→添加条件判断（如`if(page.url() === 'https://example.com')`）→优化重复操作步骤。
3. 执行回放测试：点击“运行脚本”→观察控制台输出日志→检查是否有元素定位失败或网络超时错误。
四、调试与优化测试流程
1. 设置断点调试：在脚本中插入`debugger;`语句→运行时自动暂停→逐步执行代码（按`F10`）排查问题。
2. 捕获异常信息：使用`try-catch`包裹关键代码→在`catch`块打印错误详情（如`console.error(err)`）→快速定位失败原因。
3. 参数化测试数据：将固定值（如用户名、密码）替换为变量→通过`.env`文件或命令行参数传递→实现多场景覆盖。
五、集成持续集成系统
1. 配置CI/CD流程：在Jenkins或GitHub Actions中添加步骤→运行`puppeteer`脚本→将测试结果上传至报表平台。
2. 定时触发测试：设置Cron表达式（如`0 0 * * *`）→每天凌晨自动执行测试→发送邮件通知测试结果。
3. 生成测试报告：使用`puppeteer-extra`插件→导出JSON格式日志→结合`mocha`生成可读性报告。
六、处理常见问题
1. 解决元素定位失败：检查CSS选择器是否唯一→使用`page.waitForSelector()`等待元素加载→增加超时时间（如`timeout: 5000`）。
2. 绕过验证码或登录态：在脚本中注入Cookie（`page.setCookie()`）→或通过接口获取Token→避免频繁手动登录。
3. 优化测试速度：禁用图片加载（`page.setRequestInterception(true).then(int => int.proceed())`）→限制并发请求数（如`page.setExtraHTTPHeaders({'Connection': 'close'})`）。
