00:00:00我们团队构建应用的方式有了显著改进
00:00:03原因是什么呢?
00:00:03Claude Code最近推出了Chrome扩展程序
00:00:06你可能认为用Playwright或Puppeteer MCP早就能做到了
00:00:09但那些工具存在严重问题，比如上下文窗口臃肿不必要、项目文件夹充斥着随机截图，而且大多数时候它们甚至完成不了应用上的操作
00:00:20这就是为什么我从不特别看好用AI进行自动化测试
00:00:24但这也是为什么我对这个新的Claude扩展程序感到真正兴奋
00:00:28如果你一直关注我们的频道，你可能知道我们很早就制作过一个关于它的视频
00:00:32有趣的是它本来不是为Claude Code设计的，但我们明确指出这个扩展如果集成到Claude Code中会有更大的潜力
00:00:39现在事实如此
00:00:39现在它终于作为集成的MCP发布了，为Claude Code提供了所有必需的自定义工具
00:00:45现在开箱即用，它有一些很大的问题我们应该修复
00:00:48但在我们深入这些问题之前，让我们先花点时间聊一下Automata
00:00:52在教导数百万人如何用AI构建产品后，我们开始自己实施这些工作流
00:00:57我们发现我们可以比以往任何时候都更快地构建更好的产品
00:01:01无论是应用还是网站，我们帮助将你的想法变成现实
00:01:04也许你看过我们的视频，想着"我有个很棒的想法，但我没有技术团队来实现它"。那正是我们的用武之地
00:01:11把我们看作你的技术副驾驶
00:01:13我们将教授数百万人的相同工作流直接应用到你的项目，将概念转化为真实、可运行的解决方案，无需经历聘请或管理开发团队的麻烦
00:01:23准备好把你的想法加速转化为现实吗?
00:01:25联系我们hello@automata.dev。现在回到那些问题
00:01:29我遇到的最大问题是仅仅为了测试一个简单的东西就需要太多连续步骤
00:01:34你可能已经注意到，当你要求Claude直观地测试网站的登陆页面时，它会为每个部分执行滚动操作并在每一步捕捉截图
00:01:43然后它将所有截图拼接在一起，逐个分析UI部分
00:01:47你可能认为这是个好方法，但实际上不是
00:01:49我们可以改为取整页截图，这样就能省掉那些代币
00:01:53为了解决这个问题，我使用了一个利用不同网络工具来获取完整页面截图的脚本
00:01:57我还在我的项目中添加了在自定义斜杠命令中使用该脚本的说明
00:02:02现在，当我使用该命令来测试登陆页面时，它会根据我包含的说明识别这是一个全页测试，并直接使用脚本，而不是通常的逐部分方法
00:02:13正因为如此，测试速度明显加快，准确性保持不变
00:02:17我遇到的第二个问题是这些MCP工具试图一次性加载大量内容来完成简单任务
00:02:24它不是加载特定的div，而是经常加载主标签内的所有HTML，即使不必要的情况下也包含大量代币
00:02:32这最终会消耗上下文窗口的大部分，甚至你最简单的任务也可能严重消耗它
00:02:37为了解决这个问题，我在Claude.md文件中添加了关于使用Claude Chrome扩展时如何正确管理上下文的说明
00:02:44这样，任何提取都被精确限制，不会用不必要的信息膨胀上下文
00:02:50另一个问题是Claude在遇到包含不需要的弹出窗口（如Cookie通知和类似提示）的网站时浪费了很多时间
00:02:58为了消除它们，Claude使用相同的截图和滚动序列
00:03:01但这是错误的
00:03:02与其让Claude消耗不必要的代币和时间，我们可以用其他变通方法来处理这些弹出窗口
00:03:08作为替代方案，我创建了一个脚本，包含最常见的"关闭"按钮选择器和关闭Cookie横幅的模式
00:03:15它在代码中找到这些选择器并执行函数自动关闭弹出窗口
00:03:19我还在Claude.md文件中添加了说明，使其在进行主要内容之前首先运行此脚本
00:03:25现在，每当我要求Claude访问一个网站时，它首先按照Claude.md中的说明操作并执行此JavaScript
00:03:32这会自动关闭Cookie横幅，使Claude能够继续处理主要内容，无需浪费任何代币或执行不必要的步骤
00:03:40出于安全考虑，Claude被限制进行截屏或代表你完成身份验证
00:03:46所以如果你遇到包含身份验证的网站，Claude无法为你完成这个过程
00:03:51这是你必须自己处理的
00:03:53无论何时在需要登录或验证码验证的网站上工作，确保你在给Claude任务前已经完成身份验证
00:04:00这样它就不会被阻挡或浪费任何时间
00:04:02这些就是我能解决的主要问题
00:04:05但要正确地用它进行测试，你实际上需要一个适当的工作流来测试任何应用程序
00:04:10但在我们进行之前，我想多说一点为什么我更喜欢Claude Chrome集成而不是Puppeteer
00:04:16这主要是因为它是由Claude Code开发者自己构建的原生工具，提供更好的集成和改进的控制与功能
00:04:23这些MCP专注于在不保持会话的独立专用环境中进行测试
00:04:29它们通常很难安装，并且会用所有截图把你的项目文件夹搞得一团糟
00:04:33另一方面，有了这个新的Chrome集成，Claude能够与你已登录的账户互动
00:04:38它可以与Google Docs和Google Sheets等服务互动
00:04:42它甚至可以保留所有会话信息并用它来更好地执行任务
00:04:46在我们进行工作流之前，我想提一下浏览器集成确实会消耗大量上下文，因为它们比常规工具调用的计算强度更大
00:04:54他们甚至在其中一篇博客中提到过
00:04:56所以使用Claude Code时你确实需要留意自动压缩
00:05:00另外，由于这是Chrome集成，它只适用于Chrome
00:05:04我原以为它可以在任何基于Chromium的浏览器上工作，但实际上不能
00:05:07而且我们真的无法解决这个问题
00:05:08对于那些使用多个Chrome配置文件的人来说，这会更令人沮丧，因为它不断打开错误的配置文件
00:05:15我真的希望他们能很快解决这个bug
00:05:17有了我之前提到的所有修复和Claude与Chrome的集成，我的开发工作流有了显著改进
00:05:24不过，Chrome扩展在Manifest V3中有限制
00:05:27如果运行时间过长，它们会被阻止
00:05:29许多人都在要求Claude Code的开发者在他们的仓库中修复这个问题
00:05:33如果你从头到尾进行web应用的端到端测试，这可能会导致会话被Chrome阻止，Claude会意外停止
00:05:41之后你就必须重新提示它以重启执行
00:05:44如果你给Claude分配一个长时间运行的任务后离开电脑，只有当你回来时才发现任务只完成了一部分，这会特别令人困扰
00:05:53正因为如此，与其进行端到端测试，我创建了多个测试文件，涵盖应用的所有不同方面
00:06:00每个文件都包含关于优先级、前置条件、测试步骤和预期结果的详细信息
00:06:06还有一份关于如何进行这些测试的测试指南，以及测试文档的readme文件
00:06:11如你所知，Claude的上下文窗口有限制，当达到该限制时，说明和进度可能会丢失
00:06:16正因为如此，我在Claude.md文件中添加了说明，告诉Claude在测试每个文件后创建一份综合测试报告文档
00:06:24这样，即使你因为浏览器工具消耗大量上下文而不得不压缩，Claude也可以通过参考这些进度文件来保持对已测试和仍需测试内容的认识
00:06:34现在，在进行任何测试之前，最佳做法是运行一次压缩，因为用Chrome测试你的应用程序会消耗大量的上下文窗口。
00:06:42为了简化我的测试流程，我创建了另一个自定义斜杠命令。
00:06:46这个命令的作用是以引导式的方式进行测试，并在测试后按照Claude.md的说明以适当的结构创建文档。
00:06:54我还添加了在开始任何任务前监控上下文的指令，这样测试开始时就不会在中途丢失上下文，并且在工作中也能进行压缩。
00:07:02这样的话，当你开始测试流程时，只需使用斜杠命令并提供想要开始测试的文件，Claude就会按照确切的指令开始测试。
00:07:11它能自动识别问题，并使用浏览器和所有必要的工具进行测试。
00:07:16它能自动与元素交互，并且能够发现那些通常看不见但可以通过读取控制台输出来检测到的错误。
00:07:23最后，它还会按照指令生成测试文档。
00:07:26通过这种方式，整个测试流程得到了显著改进，因为Claude可以访问控制台日志，能够比以往更有效地在浏览器中执行自动化测试。
00:07:35这就是本视频的结尾。
00:07:37如果你想支持这个频道，帮助我们继续制作这样的视频，可以使用下方的超级感谢按钮。
00:07:43一如既往，感谢你的观看，下一个视频见。