请教一个“基于内部组件库页面代码 + 运行时表格数据 + AI 生成 E2E 测试”怎么落地的问题 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
thevenin1416
V2EX    程序员

请教一个“基于内部组件库页面代码 + 运行表格数据 + AI 生成 E2E 测试”怎么落地的问题

  •  
  •   thevenin1416 6 天前 596 次点击
  •   查看本主题需要登录

    我现在在做一套中后台页面的测试代码生成 agent 。这个场景是前端的代码与测试代码都是二次封装的内部库(已经建了内部库的 skills )

    • 前端页面基于内部二次封装组件库开发
    • 页面规律比较固定,很多开发本质上是在配置字段、组件、规则、联动
    • 测试代码也不是直接写 Playwright ,而是基于 Playwright 又封装了一层内部测试库
    • 所以最终想生成的,也不是原始 Playwright ,而是基于内部测试库的测试代码

    也就是说,这不是一个“面对任意前端页面自由发挥”的问题,而是一个:

    前端代码有固定规律、测试代码也有固定框架的场景里,怎么借助 AI 做测试生成。

    典型前端字段表单配置代码(已脱敏)

    { component: 'CustomInput', fieldName: 'fieldCode', label: '字段 A', rules: z .string({ message: t('请输入字段 A') }) .min(1, t('请输入字段 A')) .max(20, t('最多输入 20 个字符')) .regex(/^[A-Za-z0-9\\-. *+\\/%$]+$/, t('格式不符合要求')), rulesBlur: z.string().superRefine(async (value, ctx) => { const checkResult = await verifyFieldUniqueness('fieldCode', value) if (!checkResult?.passed && checkResult?.msg) { return ctx.addIssue({ code: 'custom', message: t(checkResult?.msg), }) } }), } 

    这类页面里,很多逻辑不是散落在各处,而是通过字段配置表达:

    • 用什么组件
    • 字段名和标签是什么
    • 主校验规则是什么
    • 失焦时是否做异步校验
    • 是否存在后端重复校验/业务校验

    典型测试代码(已脱敏)

    test('列表查询', async ({ page, tableLocator, searchLocator, formActions, selectActions, datePickerActions, }) => { const search = searchLocator.createSearchArea(TABLE_ID) const table = tableLocator.createTable(TABLE_ID) await formActions.fillInput(search.getInput('keyword'), '示例关键字') await datePickerActions.setDate(search.getField('period', 'custom-period'), '202601') await selectActions.selectFromTableByIndex(search.getSelect('category'), 1) await search.getQueryButton().click() const row = await table.getRowData(0, ['displayName']) expect(row.displayName).not.toBeUndefined() }) 

    也就是说,测试代码本身用的是内部封装的测试库,不是直接裸写 Playwright 。

    我现在最关心的点

    我最想解决的,不是“怎么生成一份测试代码”,而是:

    测试数据不希望写死,而是尽量基于页面当前运行时的表格数据,再借助 AI 去推断。

    也就是:

    • 查询值不要硬编码
    • 新增值不要硬编码
    • 编辑值不要硬编码

    而是尽量来自:

    1. 页面当前表格里的真实数据
    2. 页面代码里的字段 / 规则 / 联动 / 数据流
    3. 最后才是 AI 推断

    因为在很多中后台页面里:

    • 表格里已经有现成的业务数据
    • 新增和编辑的数据其实应该参考这些真实数据来生成
    • 如果测试数据写死,后面会比较脆,也不够通用

    我现在卡的几个问题

    1. 查询 / 新增 / 编辑的数据推断边界怎么设计更合理?

    我更希望是:

    • 先拿页面当前表格里的真实数据
    • 再结合页面代码
    • 最后才让 AI 推断

    而不是让生成器或 LLM 一开始就直接猜测试值。

    2. 复杂校验该怎么交给 AI ?

    比如:

    • A 字段必须大于 B 字段
    • 如果 A 有值,B 必填
    • 字段重复校验
    • 多字段组合校验

    这种场景下,是给 AI 更多源码片段更好,还是给:

    • 结构化规则
    • 局部源码证据
    • 运行时表格数据

    这种“证据包”更合理?

    3. 这种场景里,AI 的边界怎么放更稳?

    我现在倾向于:

    • 规则代码负责提取事实
    • 运行时负责提供真实数据
    • AI 只负责高语义推断
    • 最终生成的代码仍严格落在内部测试库能力范围内

    但不确定这种拆法是不是更稳。

    想请教大家的点

    如果有做过类似:

    • 内部组件库驱动页面
    • AI 辅助测试生成
    • 代码理解 agent
    • 基于运行时数据生成测试数据
    • 基于既有测试框架生成测试代码

    很想听听大家的经验,尤其是这种:

    前端代码和测试代码都有固定规律,而且测试数据尽量不写死,而是依赖页面当前运行时表格数据 + AI 推断

    的场景下,怎么划分:

    • 哪些必须规则化
    • 哪些交给 AI
    • 哪些一定要依赖运行时数据

    由于才刚接触 agent 开发,熟悉一点 langchain 系列知识,不知道如何落地,如果大家有类似的开源项目,好的建议都可以推给我!

    Jgege
        1
    Jgege  
       6 天前
    看到你提到的『包』方案,你的拆法(代事,AI 推),我方向是的,但在落地我建引入一 Intermediate Representation (IR) :

    Schema 而非代:既然你是二次封的件,那建不要直接 AI 原始,而是前端配置成的 JSON Schema 。AI 理化的定性高於理混的源。

    劫持( Data Injection ):你心的死,我建在 Playwright 面封一 context.inject(tableData) 的 Hook 。AI 生成的代只需用 Hook 指定字段名,具的真值由 Runtime 在行注入。

    AI 的界在於『作序列』而非『值』: AI 定『哪』、『哪字段』。至於校(如 A > B ),在件的 Metadata 定好名,AI 只需要出哪。

    你目前卡的校,本是 Constraint Solving 。如果想更,我可以考用 LangChain 的 Structured Output 制 AI 出固定格式的指令,而不是完整的本。
    licoded
        2
    licoded  
       6 天前
    做起来才能发现具体问题吧 在实践中去学习探索
    看起来你这个场景属于人工经验已经积累得非常充分了,且没有太多需要 ai 的地方 或者说 工作流程设计划分已经比较清楚,需要 ai 去完成地方也比较清楚
    所以,干就完了!
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3324 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 24ms UTC 13:00 PVG 21:00 LAX 06:00 JFK 09:00
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86