1. 使用Chrome DevTools录制脚本
打开Chrome浏览器→按`F12`进入开发者工具→切换到“Console”面板→点击左上角“录制”按钮→执行页面操作（如点击按钮、输入文本）→停止录制。生成的脚本可直接复制用于自动化测试框架。
2. 编写Puppeteer基础脚本
安装Node.js后，在终端运行`npm install puppeteer`→创建`test.js`文件→写入代码：
javascript
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();

运行脚本后自动生成网页截图，验证页面加载是否正常。
3. 调试移动端视图测试
在开发者工具中点击“Toggle device toolbar”→选择iPhone或Android设备→调整屏幕尺寸→手动检查元素是否错位。也可通过命令`page.setViewport({width: 375, height: 812})`在脚本中固定移动端分辨率。
4. 模拟网络慢速环境
在开发者工具“Network”面板→勾选“Online”→选择“Slow 3G”→刷新页面。观察资源加载顺序和耗时，适合测试懒加载、骨架屏等性能优化逻辑。
5. 捕获并重放用户操作
使用`chrome.debugger`接口监听页面→记录用户点击、输入行为→生成可重复执行的测试用例。例如捕获登录流程后，通过脚本自动填充账号密码并提交表单。
6. 集成Lighthouse生成报告
在开发者工具“Audits”面板→点击“Perform an audit”→选择“Performance”“Accessibility”等指标→生成PDF报告。报告中包含页面速度评分、无障碍问题列表，可直接作为测试结果附件。