前端浏览器自动化

前端浏览器自动化（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，当前前端岗位里越来越常见。