前端浏览器自动化

前端浏览器自动化（Browser Automation）通常指通过代码控制浏览器执行操作，例如：打开网页、点击按钮、填写表单、登录系统、抓取数据、自动测试等。

前端开发里常见用途：

• 自动化测试（E2E 测试）

• 自动登录、批量操作后台

• 数据采集（爬虫）

• 性能测试

• 截图、生成 PDF

• 模拟用户行为

• 自动化部署检查

常见工具：

1. Playwright 官方网站（推荐，现代前端最常用）

支持：

• Chromium

• Chrome

• Firefox

• Safari(WebKit)

安装：

npm init playwright@latest

示例：打开百度并搜索

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: false // 显示浏览器 }); const page = await browser.newPage(); await page.goto('https://www.baidu.com'); await page.fill('#kw', 'React'); await page.click('#su'); await page.waitForTimeout(3000); await browser.close(); })();

运行：

node index.js

特点：

✓ 快
✓ 支持多浏览器
✓ 自动等待元素加载
✓ 适合测试 + 自动化

2. Puppeteer 官方网站（经典）

Google 出品，仅偏向 Chrome。

安装：

npm install puppeteer

示例：

const puppeteer = require('puppeteer'); (async()=>{ const browser = await puppeteer.launch({ headless:false }); const page = await browser.newPage(); await page.goto('https://github.com'); await page.screenshot({ path:'github.png' }); await browser.close(); })();

用途：

• 自动截图

• PDF 导出

• 爬虫

• 模拟登录

3. Cypress 官方网站（前端测试）

适合：

React / Vue / Angular 项目测试

安装：

npm install cypress --save-dev

测试：

describe('login',()=>{ it('success',()=>{ cy.visit('/login') cy.get('#user') .type('admin') cy.get('#pwd') .type('123') cy.get('button') .click() }) })

主要做：

E2E 自动测试

4. Selenium（老牌方案）

Selenium 官方网站

支持：

Java、Python、JS、Go

适合：

企业级自动化测试

缺点：

配置复杂，速度慢。

推荐学习路线（结合你的 React/性能平台经验）

你做过：

• React

• 后台管理系统

• 性能平台

• PDF / Excel

• 自动下载

比较适合直接学：

Playwright ↓ 自动登录 ↓ 文件下载(PDF/Excel) ↓ 接口拦截 ↓ 性能测试 ↓ CI/CD 自动测试

可以做的项目例子：

① 自动登录云平台 → 下载性能报告
② 自动跑接口 → 校验数据
③ 自动截图 → 生成日报
④ 自动检测页面性能指标

如果想从实战入门，建议先学 Playwright，当前前端岗位里越来越常见。