十六、【前端强化篇】完善 TestCase 编辑器：支持 API 结构化定义与断言配置
【前端强化篇】完善 TestCase 编辑器：支持 API 结构化定义与断言配置
- 前言
- 准备工作
- 第一步：更新前端 `TestCase` 类型定义
- 第二步：改造 `TestCaseEditView.vue` 表单
- 第三步：修改后端代码中的TestCase模型和序列化器
- 第四步：测试强化后的用例编辑器
- 总结
前言
在之前的后端文章《【测试执行】让测试跑起来：API 接口测试执行器设计与实现》中，我们对 TestCase 模型进行了重大升级，添加了用于定义 API 测试的结构化字段，如 request_method, request_url, request_headers, request_body 和 assertions。但是，我们的前端测试用例编辑页面 (TestCaseEditView.vue) 仍是基于早期手动测试用例设计的，主要依赖 steps_text 来描述步骤。
这篇文章的目标是彻底改造 TestCaseEditView.vue，使其能够：
- 支持用户输入和编辑所有新的 API 测试相关字段。
- 提供用户友好的界面来管理复杂的结构化数据，例如动态的请求头键值对和多条断言规则。
- 确保前端提交的数据格式与后端
TestCaseSerializer和测试执行器期望的一致。 - 在编辑模式下，能够正确地从后端加载并回显这些结构化数据。
一个强大的 API 测试用例编辑器&