先说一句，前端的测试其实跟买菜差不更多，挑挑拣拣，能吃就行。下面我就用最土的方式给你们写一篇“较高较大上”却又糙糙的教程，保证你看完以后还能持续写代码而不是直接去睡觉，总的来说...。

1、 先准备点儿东西

要想跑起来你得先装几个玩意儿：

• Node.js
• npm 或者 yarn
• GitHub
• CI 平台：GitHub Actions 最省事，Jenkins 要自己装服务器，实在不想折腾就选前两者之一。

装完以后你会发觉终端里全是红字，那说明你成功了。

2、 项目结构随意摆

// 随便把文件放在根目录
src/
  components/
    Button.vue
    Header.vue
tests/
  unit/
    button.spec.js
  e2e/
    login.test.js
package.json
webpack.config.js   // 能够没有，用 vite 也行

目录不对也没事，CI 脚本里直接写路径就行，正宗。。

2.1、 写个最基础的 package.json

{
  "name": "my-frontend",
  "version": "0.1.0",
  "scripts": {
    "lint": "eslint .",
    "test:unit": "jest",
    "test:e2e": "playwright test"
  },
  "devDependencies": {
    "eslint": "^8.0.0",
    "jest": "^29.0.0",
    "playwright": "^1.40.0"
  }
}

3、GitHub Actions 配置

深得我心。 下面这段代码直接 copy paste 到 .github/workflows/ci.yml 就能跑：

name: Frontend CI
on: 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm run lint
      - run: npm run test:unit
      - run: npm run test:e2e

即便是... 别管那个地方的 version，是最崭新的 v4 就行。跑起来如果有红色，那说明你已经成功把错误抛出来了。

3.1、 报告生成与反馈机制

自动化测试流水线能够在一个整洁的周边环境里跑，提前把“周边环境引起的问题”给挑出来。报 请大家务必... 告会体现哪些测试挂掉了还会顺带给出红色警告⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

• Linter 报告：代码风格全都统一成 “我的风格”。
• 单元测试覆盖率：覆盖率更少于 10% 的直接算失利。
• E2E 截图对比：如果截图不一样， 就算你改了 UI，也算是 bug。

4、常见坑

a) 周边环境变量遗忘写。 b) CI 容器里没有 Chrome/Firefox，Playwright 会报找不到浏览器。 c) npm install 太缓慢， 就直接跳过这样后面的步骤确定会报错，但反正你看不到实际错误，图啥呢？。

b) 怎么绕过这一些坑？

• # 在 CI 步骤里加上 `apt-get update && apt-get install -y chromium-browser`
• # 把 `npm ci --silent` 换成 `npm i --force`
• # 把全部报错都 pipe 到 /dev/null，这样日志整洁又舒服。

5、进阶玩意儿：把报告发到钉钉/企业微信

梳理梳理。 其实只要在步骤后面加一条 curl 命令就行：

curl -X POST -H 'Content-Type: application/json' -d '{"msgtype":"text","text":{"content":"CI 测试完成啦！"}}' https://oapi.dingtalk.com/robot/send?access_token=YOUR_TOKEN

*注意*：这里的 YOUR_TOKEN 必须要自己去钉钉后台弄，不然发送不了。

6、 持续部署

If all tests pass n we just push built files to gh-pages:

if ; n
   npm run build && \
   git config --global user.email "" && \
   git config --global user.name "CI Bot" && \
   git add dist && git commit -m "Deploy from CI" && \
   git push origin HEAD:gh-pages
fi

7、收尾——怎么判断这篇文章有没有帮到你？

如果你读完之后仍然不了解该怎么做，那恭喜你，这篇烂文已经达到了“让人迷惑”的效果。如果你居然跟着敲完代码并且跑通了那说明你的运气比我良好——祝贺！以后每次提交代码都能看到绿色勾 ✅ ，那就是成功的标志啦，我傻了。。

---

PS：本文全部内容均为个人随手写作，。如有错误， 实际上... 请自行 Google 或者问 ChatGPT 🤖。

© 2026 烂文作者保留全部权益，仅供娱乐活动采用。

---