十六、【前端强化篇】完善 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，使其能够：

1. 支持用户输入和编辑所有新的 API 测试相关字段。
2. 提供用户友好的界面来管理复杂的结构化数据，例如动态的请求头键值对和多条断言规则。
3. 确保前端提交的数据格式与后端 TestCaseSerializer 和测试执行器期望的一致。
4. 在编辑模式下，能够正确地从后端加载并回显这些结构化信息。

一个强大的 API 测试用例编辑器&