webapp-testing：让 AI 真打开网页帮你验一遍

大家好，我是墨鱼，今天给大家带来的是：webapp-testing，让 AI 真打开网页帮你验一遍。

很多人用 AI 写网页，会有一个很微妙的错觉：代码生成了，等于页面做好了。结果真打开一看，按钮歪了、图片没了、手机端文字挤成地铁早高峰。

所以我越来越喜欢让 Agent 多做一步：别只看代码，打开网页验一遍。这个动作看起来朴素，但能救很多“发布后才发现”的小尴尬。

它解决的不是高级问题

webapp-testing 这类玩法，重点不是证明 AI 有多聪明，而是让它像一个不会嫌烦的测试同事，帮你把基础流程点一遍。

页面能不能打开，按钮能不能点，表单能不能提交，图片有没有加载，移动端有没有乱掉。这些问题技术含量不一定高，但出现在用户眼前就很扎心。

尤其是现在很多网页都是 AI 帮忙写的。代码看起来整齐，不代表浏览器里就体面。浏览器是照妖镜，页面一开，谁在裸泳都很清楚。

第一，打开本地或线上页面，确认不是白屏、报错、加载失败。

第二，按你的要求点按钮、切页面、填表单，看看基础流程能不能走通。

第三，截图检查页面状态。很多布局问题光看代码不明显，截图一出来，哪里歪了很诚实。

第四，做移动端检查。桌面看着很优雅，手机上一秒变压缩饼干，这种事太常见了。

第五，帮你生成问题列表。不是一句“已完成”，而是列出哪里有问题、怎么复现、建议怎么改。

适合独立开发者。一个人写代码、改样式、发版本，最容易漏掉最后这一步检查。

适合做官网、落地页、工具站的人。你不一定是专业前端，但你至少要知道用户打开页面时是不是顺眼。

也适合经常让 AI 写页面的人。你可以把它变成固定要求：每次改完页面，都必须打开预览，桌面和手机各看一遍，再告诉我发现了什么。

第一，能不能打开。别笑，白屏永远是最朴素也最致命的问题。

第二，核心按钮能不能点。比如提交、保存、下载、登录、下一步。按钮长得像按钮，不代表它真的上班。

第三，文字有没有溢出。中文标题、长按钮文案、卡片说明，都是移动端翻车重灾区。

第四，图片有没有加载。封面、头像、插图、二维码，如果路径错了，页面气质会瞬间从专业变成半成品。

第五，手机端是否正常。现在很多内容都在手机上看，桌面漂亮只能算半场领先，手机不崩才算稳。

你可以这样给 Agent 派活：

请打开这个网页进行真实检查，不要只看代码。请分别用桌面视口和手机视口检查：1. 页面是否能正常加载；2. 主要按钮是否能点击；3. 关键流程是否能走通；4. 图片是否正常显示；5. 是否有文字溢出、遮挡、布局错位。检查后请给我问题列表、复现步骤和建议修改方式。

这段话的重点是“不要只看代码”。AI 很容易在代码层面自信满满，但页面体验必须交给浏览器审一遍。

它不能替代真实用户测试。复杂支付、验证码、真实账号权限、风控策略，这些还是要人来把关。

它也不适合在没有明确检查目标的时候乱点。你得告诉它看什么、点什么、什么算通过。否则它可能很努力地巡视一圈，然后交给你一句“整体看起来不错”。这句话很礼貌，但没啥用。

另外，涉及线上真实数据的操作要小心。能用测试环境就用测试环境，能 dry-run 就 dry-run。别让 Agent 第一次练手就坐上生产环境主驾驶。

以后你让 AI 写网页、改后台、做落地页，不要只问“写完了吗”。更好的问题是：你打开验过了吗？桌面和手机都看了吗？按钮点过了吗？

这个习惯比某个具体工具更重要。只要你开始要求 Agent 给出截图、问题列表和复现步骤，交付质量会立刻稳很多。

如果你想看下一期，我可以继续整理“普通人也能用的 AI Agent 工具箱”。下一篇可以聊聊：让 AI 整理一堆资料时，为什么最该先写清楚边界。