通过自动化 UI 审计，自信交付
手动测试既缓慢又容易出错，而且会拖慢推进速度。每次我推送改动时，过去总会担心是否有断开的链接，或者生产站点上是否潜藏着肉眼可见却未被发现的控制台错误。每周都要花上好几个小时手动点击，只为了维持一个基础质量水平。
我开始使用 webapp-testing skill，把这项工作交给 Eigent。通过将 Playwright 的自动化能力与 Eigent 的 agentic 工作流结合起来，我现在只需输入一个提示词，就能运行完整的网站审计——包括视觉快照和日志检查。
下面是我为测试 Eigent.ai 网站而搭建工作流的方法。
准备测试脚本
我首先在 Python 脚本中定义测试逻辑。借助 Playwright 的异步 API，我可以在导航过程中跟踪控制台消息和网络失败。这个脚本相当于整个流程的大脑，准确告诉 Eigent 要检查什么——从特定的导航链接到整页截图。
使用 webapp-testing skill 对网站 https://www.eigent.ai/ 进行全面的功能和 UI 测试。
配置错误监听器
这个工作流中最有价值的部分之一，是捕获静默失败。我配置脚本监听浏览器控制台错误和失败的网络请求。这样 Eigent 就能记录技术问题，比如我发现的缺失 PostHog token——这种错误在手动检查时很容易被忽略。
自主导航网站
Eigent 负责导航。它从首页开始，识别出 Environments 和 Enterprise 等主要导航链接。通过点击这些部分并等待网络空闲，它确保每次页面切换都平稳无误，且内容按预期加载。
捕获视觉快照
截图是验证跨页面 UI 一致性的最佳方式。在测试期间，Eigent 会自动截取首页和内部页面的整页快照。我捕获了多个视图，包括：
- 首页： /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
- Environments 页面： /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
- Enterprise 页面： /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png
生成自动化报告
导航完成后，Eigent 会将所有内容整理成一份 Markdown 报告。其中包括发现摘要、控制台错误列表，以及所有已捕获截图的绝对路径。把这些数据集中在一个地方，让审查过程变得即刻完成。
分析发现
我会审查输出，找出任何关键阻塞项。这次运行中，审计捕获到了一个 PostHog 初始化错误，并标记了 task_splitting.mp4 中一个被中止的视频资源。这些不只是 bug——它们是在客户看到之前改进用户体验的机会。
在不增加投入的情况下扩展质量保障
这不只是为了捕获几个控制台错误。这个工作流展示了 Eigent 如何将 Playwright 这样的技术工具转化为自主质量伙伴。与其为每一个细微的 UI 改动都编写和维护复杂的测试套件，不如直接把一个 URL 交给 Eigent，然后拿回一份完整报告。
自动化 QA 中“枯燥”的部分，让开发者能专注于功能构建，同时确保现有站点依然稳如磐石。
接下来可以尝试什么
审计 https://eigent.ai/pricing 的移动端适配，并在 375x812 分辨率下截取截图。 检查网站上所有博客文章中的损坏图片，并列出任何 404 错误。 验证 Enterprise 页面上的 'Book a Demo' 按钮是否能正确打开预约弹窗。
这些操作都利用了同一个 webapp-testing skill——无需额外设置。
提升效果的小技巧
- 使用 networkidle 等待状态。 这可以确保在 Eigent 截图或检查错误之前，异步资源和跟踪脚本都已加载完成。
- 过滤中止请求。 许多浏览器在快速导航或懒加载期间会中止请求。过滤掉这些请求有助于你聚焦真正的 404 和服务器错误。
- 明确角色。 当指示 Eigent 点击按钮时，使用基于角色的选择器，如 link 或 button，可以让测试对 CSS 变化更具弹性。
