1. 从“一句话”到“可执行”一个LLM驱动的Web GUI Bug复现代理在Web前端开发和测试的日常工作中最让人头疼的场景之一莫过于收到一份来自用户或测试同事的Bug报告上面写着“点击那个按钮后页面好像卡住了再点就没反应了。” 或者更经典的“在某个特定操作后界面显示不正常。” 作为开发者你看着这寥寥数语的描述脑子里可能一片空白——是哪个按钮在什么页面操作路径是什么浏览器版本呢没有截图、没有录屏、没有控制台日志复现这个Bug的第一步就变成了与报告者漫长的“拉锯式”沟通。这个过程不仅低效而且严重依赖报告者的表达能力和耐心很多时候Bug就在这种模糊的沟通中成了“悬案”。这正是我们团队在过去一年中试图用技术手段系统性解决的问题。我们构建了一个名为“ReproAgent”的内部工具其核心目标非常明确将一段自然语言描述的Bug报告自动转化为一系列可在浏览器中真实、可重复执行的交互步骤。简单来说就是让AI读懂人话并替人去操作浏览器把Bug“演”出来。这背后依赖的核心技术正是当前如火如荼的大语言模型LLM与智能体Agent框架。这不是一个天马行空的学术构想而是一个已经在我们多个中大型Web项目中投入使用的工程实践。本文将彻底拆解这个Agent的设计思路、核心架构、实现中的关键挑战以及我们踩过的那些“坑”希望能为同样被模糊Bug报告困扰的团队提供一条可行的自动化路径。2. 问题本质为什么Web GUI Bug复现如此困难在深入技术细节之前我们必须先厘清我们要解决的究竟是一个什么样的问题。Web GUI图形用户界面的Bug复现之所以成为一个顽固的痛点源于其固有的几个复杂性维度。2.1 信息的极度不对称与模糊性Bug报告的本质是将一次多维度的、动态的、带有状态的用户交互体验压缩成一段线性的、静态的、高度主观的自然语言文本。在这个过程中海量信息丢失了。报告者可能记得点击了“提交”按钮但完全忽略了当时表单里某个字段的值是“测试数据”他可能感觉到“页面卡顿”但无法提供当时的网络状况、浏览器内存占用或JavaScript线程阻塞的堆栈信息。这种信息压缩带来的模糊性是复现困难的首要根源。2.2 环境与状态的不可控性Web应用运行在一个极度复杂和异构的环境中。浏览器的类型和版本Chrome 120 vs. Safari 17、视口大小、设备像素比、登录的用户会话、本地存储的数据、甚至是某个特定的URL查询参数都可能成为触发Bug的关键条件。一句“在管理后台列表页”可能对应着十几种不同的数据筛选状态。手动复现意味着测试人员需要像侦探一样根据片言只语去重建这个精确的“案发现场”成功率可想而知。2.3 交互序列的时序敏感性很多GUI Bug不是由单一操作触发而是一系列操作在特定时序下的结果。例如“先快速点击A按钮在弹窗加载出来之前立刻点击B区域会导致页面崩溃”。这种对操作间精确时序的要求即便是最有经验的测试人员手动模拟也极具挑战性更不用说用文字准确描述了。我们的目标就是构建一个智能体它能够像一位经验丰富的测试工程师一样阅读模糊的报告结合对应用程序的理解进行合理的推理和假设最终规划并执行一套具体的浏览器操作序列从而稳定地复现Bug。这远不止是“录制与回放”而是一个“理解、规划、执行、验证”的完整认知闭环。3. 核心架构ReproAgent的四层系统设计基于上述问题分析我们为ReproAgent设计了一个分层架构将复杂的“从文本到操作”任务分解为四个相对独立、层层递进的阶段。这个架构的核心思想是让LLM专注于它擅长的推理与规划让传统程序精准地负责执行与验证。3.1 第一层语义解析与意图理解层这是整个流程的起点。输入是一段原始Bug描述文本。这一层的任务不是直接去操作浏览器而是将非结构化的自然语言转化为结构化的、机器可理解的“意图”。我们定义了一个核心的中间表示数据结构称之为“交互意图单元”Interaction Intent Unit, IIU。一个IIU包含以下字段action: 操作类型如click,fill,scroll,navigate,wait,assert。target: 操作目标描述。这里非常关键它不是一个CSS选择器而是一个基于语义的描述例如“页面顶部的蓝色提交按钮”、“用户名输入框”、“显示‘加载中’的弹窗”。value: 可选值对于fill操作是输入的文本对于assert操作是预期结果。context: 可选上下文用于进一步限定目标如“在名为‘用户管理’的模态框内”。这一层的实现我们微调了一个轻量级的开源LLM例如Llama 3 8B或Qwen 7B专门用于做这种文本到结构化数据的转换。提示词工程Prompt Engineering在这里至关重要。我们的提示词模板会明确要求模型以JSON格式输出并给出大量IIU的正面和反面示例特别是针对模糊指代如“那个按钮”的消歧示例。注意我们最初尝试使用通用大模型如GPT-4的零样本或小样本学习发现在复杂页面元素描述上输出不稳定。微调一个专用小模型虽然增加了前期成本但在稳定性、速度和数据隐私方面带来了巨大收益。3.2 第二层元素定位与策略规划层拿到结构化的IIU序列后我们面临下一个核心挑战如何将语义化的target描述映射到真实浏览器DOM树中一个具体的、可操作的元素这是整个系统中最具工程挑战性的一环。我们采用了“多策略融合定位”的机制。Agent不会只依赖一种方式去找元素而是按顺序尝试以下策略直到成功语义属性优先现代Web组件库如Ant Design, Element UI, MUI或遵循ARIA标准的应用会在元素上添加>
