news 2026/8/17 20:29:09

前后端分离项目还在手工联调?我用 JUnit + Playwright 跑完 30 项自动化测试

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前后端分离项目还在手工联调?我用 JUnit + Playwright 跑完 30 项自动化测试

技术栈:Spring Boot 2.7 + React 18 + JWT
测试栈:JUnit 5(API 集成)+ Playwright(全链路 E2E)
适用场景:企业知识库 / 管理后台 / AI 问答类 B 端系统
项目仓库:company-knowledge-devlop


摘要

企业知识库项目实测:JUnit 21 项 + Playwright 19 项全绿,并挖出聊天会话 500、删除状态码等 2 个上线前 Bug。附完整目录结构与命令。

开篇:为什么 2026 年还在「Postman 点一点、浏览器刷一刷」?

很多团队的真实联调流程是这样的:

  1. 后端改了个接口,前端不知道字段变了

  2. 前端页面能打开,但 401 / 403 权限没人测

  3. 上线前临时测登录 + 列表,核心业务一条都没覆盖

  4. 出了 Bug 才发现:聊天会话删除 500、文档删除状态码不一致……

这些问题不是「人不够细心」,而是缺少分层自动化

我们最近在一个Spring Boot + React 企业知识库项目里落地了完整方案,结果很直观:

测试层

工具

用例数

结果

后端 API 集成

JUnit 5 + Spring Boot Test

21

全绿

前后端 API 联调

Playwright Request

11

全绿

前端页面 UI

Playwright Browser

8

本机装浏览器即可跑

合计 30+ 自动化用例,覆盖认证、文档、搜索、问答、权限、管理后台页面。


一、当前项目的测试方案确认

是的,本项目采用JUnit 5 + Playwright双层组合:

层级

技术栈

代码位置

后端 API 集成

JUnit 5 + Spring Boot Test +TestRestTemplate

backend/src/test/java/.../integration/

前后端 E2E

Playwright(TypeScript,API + UI 双模式)

e2e/tests/

一句话:JUnit 负责「接口对不对」,Playwright 负责「用户用起来对不对」。


二、2026 推荐测试金字塔

为什么不只用一个工具?

工具

擅长

不擅长

JUnit + Spring Boot Test

启动真实 Spring 容器、测鉴权与事务、速度快

测不了浏览器渲染、测不了前端路由

Playwright

真实浏览器 + HTTP Request、自动起前后端、截图录屏

不适合替代细粒度单元测试


三、JUnit 5 后端集成:21 项用例怎么设计?

3.1 测试 Profile 隔离外部依赖

# backend/src/test/resources/application-test.properties spring.datasource.url=jdbc:h2:mem:kbtest embeddings.enabled=false milvus.enabled=false wechat.mp.enabled=false deepseek.api.key=

用 H2 内存库 + 关闭 AI/向量/微信,测试不依赖外网 Key,CI 也能稳定跑。

3.2 测试类拆分(推荐)

backend/src/test/java/.../integration/ ├── AuthIntegrationTest.java # 登录、JWT、401 ├── FeatureApiIntegrationTest.java # 文档/搜索/问答/权限(主战场) ├── ApiSmokeIntegrationTest.java # 部门/审计/公众号历史 └── IntegrationTestSupport.java # 登录与 Bearer 工具

3.3 典型用例:会话隔离(安全类必测)

@Test void chatSessionShouldBeIsolatedBetweenUsers() { // admin 创建会话 restTemplate.exchange("/api/chat", POST, adminRequest, ChatResponse.class); // user 尝试读取 admin 会话 → 必须 403 ResponseEntity<String> hijack = restTemplate.exchange( "/api/chat/history/" + sessionId, GET, userHeaders, String.class); assertThat(hijack.getStatusCode()).isEqualTo(HttpStatus.FORBIDDEN); }

3.4 运行命令

cd backend && mvn test

四、Playwright E2E:11 条 API + 8 个页面

4.1 目录结构

e2e/ ├── playwright.config.ts # 自动拉起 backend + frontend ├── fixtures/auth.ts # 登录复用 ├── tests/ │ ├── api.integration.spec.ts # 纯 API(不启浏览器,快) │ └── ui.integration.spec.ts # 页面联调 └── package.json

4.2 端口冲突怎么破?

很多开发者机器8080 已被其他 Java 服务占用
E2E 默认端口改为8088 / 3008,并通过setupProxy.js动态代理:

// frontend/src/setupProxy.js const target = process.env.REACT_APP_API_PROXY || 'http://localhost:8080'; app.use('/api', createProxyMiddleware({ target, changeOrigin: true }));

Playwright 启动时注入:

REACT_APP_API_PROXY: 'http://127.0.0.1:8088'

4.3 UI 测试:侧边栏全页面巡检

const pages = [ { nav: '文档列表', heading: '文档列表' }, { nav: '知识搜索', heading: '知识搜索' }, { nav: '智能问答', heading: '智能问答' }, { nav: '公众号文章', heading: '公众号文章生成' }, ]; for (const item of pages) { await page.getByRole('button', { name: item.nav }).click(); await expect(page.getByRole('heading', { name: item.heading })).toBeVisible(); }

4.4 运行命令

cd e2e npm install npx playwright install chromium npm test

一键全量:

./scripts/run-integration-tests.sh

默认 E2E 账号:admin/admin123
HTML 报告:e2e/playwright-report/index.html


五、自动化测试挖出的 2 个真 Bug

Bug 1:清除聊天会话返回 500

  • 现象:DELETE /api/chat/history/{sessionId}报错

  • 根因:JPA 删除方法缺事务

  • 修复:ChatService.clearSession()@Transactional

Bug 2:删除文档状态码断言失败

  • 现象:测试期望 200,接口实际 204

  • 结论:接口行为正确(REST 规范),测试断言过严

  • 修复:断言改为isIn(OK, NO_CONTENT)

自动化测试的价值:不只是绿条,而是把隐藏 Bug 在上线前揪出来。


六、30 项测试清单(团队 Checklist)

认证与安全

  • [ ] 健康检查可匿名访问

  • [ ] 正确密码返回 JWT

  • [ ] 错误密码 400

  • [ ] 未登录访问业务接口 401

  • [ ] 普通用户访问审计日志 403

  • [ ] 聊天会话跨用户访问 403

文档与知识

  • [ ] 文档上传 / 搜索 / 详情 / 删除

  • [ ] 未索引文档列表

  • [ ] 知识条目列表

  • [ ] 文本搜索 / 语义搜索

AI 与业务

  • [ ] 智能问答(无外部 Key 时本地兜底)

  • [ ] 聊天历史记录

  • [ ] 清除会话

  • [ ] 公众号文章历史接口

管理后台

  • [ ] 用户列表(SUPER_ADMIN)

  • [ ] 部门列表

  • [ ] 审计日志分页

前端页面(Playwright UI)

  • [ ] 登录页渲染

  • [ ] 仪表盘数据加载

  • [ ] 文档/上传/搜索/问答/公众号页可打开

  • [ ] 用户/部门/审计管理页可打开

  • [ ] 问答可发送消息

  • [ ] 退出登录回登录页


七、给技术负责人的 3 条建议

  1. 先 JUnit 后 Playwright:API 不稳,E2E 全是假红。

  2. 测试必须脱离外网 Key:H2 + test profile,CI 才稳定。

  3. E2E 端口要可配置:8080 冲突是团队联调第一杀手。


八、结语

前后端分离项目最容易失控的,不是代码量,而是联调回归成本

我们用JUnit 5 守住后端契约,Playwright 守住用户路径,把 30 项核心能力变成可重复执行的流水线。

如果你也在做 Spring Boot + React 的 B 端系统(知识库、工单、运营后台),这套JUnit + Playwright双层方案可以直接照搬。


知识库自动化测试演示地址:

https://www.qdzjkf.com/knowledgeWeb/超级管理账号: admin 密码:xlh12345管理员账号:manager 密码: admin123普通账号:user 密码: user123
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/17 20:27:16

C盘又满了?这款免费开源的C盘清理工具一次能清出15GB空间

C盘又满了&#xff1f;这款免费开源的C盘清理工具一次能清出15GB空间 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 如果你是个Windows用户&#xff0c;大概率经…

作者头像 李华
网站建设 2026/8/17 20:20:40

被运营商锁住的光猫,我用 zteOnu 一键打开了工厂模式

被运营商锁住的光猫&#xff0c;我用 zteOnu 一键打开了工厂模式 【免费下载链接】zteOnu A tool that can open ZTE onu device factory mode 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 如果你正在搜「中兴光猫解锁」「光猫 Telnet 开启」这类关键词&#x…

作者头像 李华