最近在研究前端页面自动化测试，前端页面自动化测试可以大大提高工作效率，减少重复性工作，提高工作质量。首选方案就是无头浏览器，无头浏览器可以模拟用户操作，进行自动化测试。
几种主流的无头浏览器器框架对比
| 特性 | Puppeteer | Playwright | Cypress |
|---|---|---|---|
| 语言 | JS/TS | JS/TS/Python/Java/C# | JS/TS |
| 浏览器 | Chrome/Chromium | 多浏览器 (Chrome/Firefox/Safari) | Chrome |
| 录制 | 支持基于 Puppeteer Recorder | 支持基于 playwright codegen | 支持Cypress Studio （实验性功能） |
| 学习 | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
| 应用 | 页面截图/PDF 爬虫 性能分析 | 跨浏览器测试 移动端测试 | 组件测试 CI/CD集成 前端应用E2E测试 |
| 社区 | 文档比较全， GitHub 89.3K Star | 文档比较齐全 比较新Github 68.1K Star | Github 47.6K Star |
代码比较
- Puppeteer
// 简单直接
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
//截图
await page.screenshot({ path: 'example.png' });
await browser.close();
})();
-
优点
- Chrome官方维护
- API设计友好
- 文档完善
- 调试工具强大
-
缺点
- 仅支持Chrome/Chromium
- 资源占用较大
- Playwright
// 多浏览器支持
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
//截图
await page.screenshot({ path: 'example.png' });
await browser.close();
})();
-
优点
- 支持多浏览器(Chrome/Firefox/Safari)
- 自动等待功能强大
- 现代化API设计
- 支持移动端模拟
-
缺点
- 学习曲线相对较陡
- 社区相对较新
- Cypress
// 链式API
describe('My First Test', () => {
it('visits the app', () => {
cy.visit('https://example.com')
cy.get('.button').click()
cy.contains('Welcome').should('be.visible')
})
})
-
优点
- 实时重载
- 调试体验极佳
- 内置断言库
- 时间旅行功能
-
缺点
- 不支持多标签页
- 仅支持Chrome
- 异步处理方式特殊
选型建议
-
选择Puppeteer如果：
- 只需要Chrome/Chromium
- 主要做爬虫或截图
- 需要深度操作Chrome
-
选择Playwright如果：
- 需要跨浏览器测试
- 开发现代Web应用
- 重视测试稳定性
-
选择Cypress如果：
- 前端团队为主
- 重视开发体验
- 需要强大的调试功能
总结
通过多个方面的对比，简单易用支持脚本录制以及对只需Chrome支持，且需要可配置是否有头浏览器，后面会基于puppeteer做一个简单的自动页面巡检工具，实现页面性能测试、UI测试、死链检测、日志记录功能。
