Cloud Code 原生支持 Chrome

Cloud Code 最新版，现在已经原生支持调用 Chrome (浏览器: Google Chrome: Google 开发的网页浏览器) 浏览器了。我们只需要将 Cloud Code (AI 编程助手: 一个用于代码生成、调试和自动化任务的 AI 工具) 升级到最新版本，然后在 Cloud Code 中使用斜杠命令，加上 chrome 就可以进入 Chrome 浏览器的设置。在是否默认启用这里，我这里设为了启用，而且这里还可以管理权限。

Chrome 集成优势

点击之后这里就会自动打开浏览器，并且在这个扩展这里，我们就可以设置权限。如果大家没有安装扩展的话，到这一步应该会提示安装扩展，大家只需要按照它的提示安装扩展就可以。当这些设置好之后，大家就可以在 Cloud Code 中原生调用 Chrome 浏览器。

自动化能力提升

在之前的视频中，我为大家演示过 Playwright (浏览器自动化库: Playwright: 用于端到端 Web 测试的自动化库) 在 Cloud Code 中以及在 CodeX 中的使用，用来实现浏览器自动化以及 UI 调试。但是 Playwright 为了安全，它打开的浏览器是一个新的实例。当我们需要执行浏览器自动化任务的时候，我们就需要重新登录所有的账号，这样的话就非常麻烦，而且非常浪费时间。

保存用户状态

但 Cloud Code 它原生支持的 Chrome 浏览器调用，它打开的浏览器就保存了我们日常使用的一切信息，包括账号登录状态以及浏览记录，还有 Chrome 的扩展插件等功能。

广泛的应用场景

所以我们在 Cloud Code 中直接调用 Chrome，既适合 UI 验证，也适合端到端的自动化。而且它支持多种交互操作，包括点击输入、表单填写，还有多标签管理，还可以对标签进行分组管理。而且它可以读取 logs、还有 network requests，并且可以结合 DOM 状态来定位 UI 以及逻辑问题。

自动化测试：博客发布

好，本期视频将为大家深度测试 Cloud Code, 调用 Chrome 浏览器，完成自动化任务、UI 调试任务，以及 API 接口自动化测试等任务。下面我们可以先用一个最简单的任务进行测试。我这里直接输入任务，让它打开我的博客，点击进入第一篇博客，并将它改写为一篇 X post (社交媒体帖子: X 平台上的帖子)，然后发布到我的 X (社交媒体平台: 社交媒体平台 X) 账号。我们直接运行，先测试一下它最简单的浏览器自动化能力。

博客发布实测流程

好，可以看到这里，它自动打开了我的博客。然后它自动点击了我博客的第一篇文章，然后我们回到终端就可以看到这里，他正在执行这个任务。现在已经阅读完了博客文章，正在改写帖子。然后这里他需要申请权限，我们直接给他权限，然后他就自动打开了 X 平台。好，可以看到，它自动输入了它改写后的这个文章。好，可以看到，它自动点击了发布，这样的话这篇 X post 就发布成功，整个过程不需要我们重新登录 X 账号，因为它会自动调用我们日常使用的 Chrome 浏览器的配置。

数据填充：股票信息搜索

我们再测试一下 Cloud Code, 调用 Chrome 浏览器，实现信息搜索，并且将搜索到的信息填写到 Google (公司: Google: 科技公司，提供搜索引擎、云服务等) 的表格中。我们看一下它能否准确操作 Google 表格。这里我们输入提示词，使用 chrome 搜索特斯拉近 7 天的股票信息，并且打开 Google 表格，将内容填入到表格中。我们直接运行。

股票数据入表实测

自动打开了 Google 浏览器，然后这里需要我们授权给他。好，可以看到他打开了 Google，并且搜索了特斯拉的股价相关的内容。好，这里，他进入了 Yahoo Finance (财经媒体: Yahoo Finance: 雅虎旗下的财经新闻和数据网站)。好，可以看到，他能准确点击，并且复制相关内容。好，可以看到他提取了特斯拉 7 天的股票数据。现在他打开了 Google 表格。我们看一下他能否将这些数据准确的填入 Google 表格中。

表格精细化操作

好，可以看到他在第一个单元格中输入了日期，然后定位到了第二个单元格。好，现在又在输入日期。现在这个表格的表头已经输入好了，然后这里提示他开始点击第二个单元格，开始输入数据。好，这里他填完了 12 月 18 号的数据，现在在填 17 号的数据。好，这里提示所有数据已经输出完成。这里我们就看到了它填入的特斯拉股价相关的信息，而且整个过程都是由它自动化完成。这样看来这个效果还是非常不错的，因为它能对这些非常复杂的表格进行精细化操作。通过测试可以发现它的浏览器自动化能力还是非常强大的。

UI调试：React组件开发

好，刚才我们测试的是浏览器自动化任务。下面我们还可以测试一下，让 Cloud Code 调用 Chrome, 实现 UI 调试。我们可以先在 Cloud Code 中，让它为我们开发一个 React (JavaScript 库: React: 用于构建用户界面的 JavaScript 库) 组件。我们可以先看一下这个提示词，让它使用 checker UI 创建一个语言学习的 React 组件。这里是技术栈，这里是页面结构，还有核心功能，还有设计要求，包括主题字体等，还有响应要求，以及数据结构、还有交互细节、还有性能。

React组件自动测试

在最后这里，我们让它创建一个完整的可交互的应用原型。要求任务完成之后，使用 Chrome 自动测试所有功能是否正常。然后我们完整的粘贴这个提示词发送给 Cloud Code，让它为我们开发这个 React 组件，并且自动调用 Chrome 浏览器进行测试。这是它生成的开发任务。最后一个任务就是在 Chrome 浏览器中进行测试。好，为了节省时间，开发步骤，这里就略过，我们直接跳到它打开 Chrome 浏览器的步骤。

Bug发现与修复

five minutes later. 好，这里，他已经完成了开发，现在正在安装依赖。这里他需要我们授予它权限。现在它就自动打开了浏览器。我们看一下它能否自动点击页面上的这些内容，对页面进行测试。好，可以看到它自动点击了单词卡片。单词卡片翻转之后，这个单词出现了镜像翻转。我们看一下它是否会修复这样的问题。好，这里，他提示他看到卡片翻转，有一些 CSS 效果的问题，他需要修复这个问题。这样的话，他就通过调用浏览器自动点击，发现了这些问题。

自动化调试流程

好，现在他正在测试练习页面。好，他还选择了一个正确的答案。这里点击了进度。好，可以看到这里它输出答题反馈功能，完美。好，这里提示进度页面非常漂亮。它继续测试设置页面。好，这里它提示页面显示空白，它需要检查控制台是否有错误。然后这里他发现了这个错误，他正在修复这个错误。好，这里提示修复完成它刷新页面。可以看到，他现在点击了设置。好，这里他提示设置页面所有功能都正常。

自动修复与验证

他现在需要修复首页单词卡片翻转的问题，他需要创建一个简单可靠的翻转实现，替换当前的 3D 动画。好，现在他又切换到了首页，然后我们看一下这次单词卡片的翻转是否修复。好，可以看到它自动点击了单词卡片，这次单词卡片翻转就正常，就显示了单词的中文翻译。好，这里提示单词卡片翻转效果，现在完美工作，并且提示所有功能都测试通过。然后这里就输出了已经完成的这些功能。

前端开发自动化总结

这样的话，我们没有经过任何干预。 Cloud Code 就调用 Chrome 浏览器，实现了自动开发自动测试，并且发现了单词卡片翻转出现了问题。然后 Cloud Code 进行了自动修复，可以发现整个步骤非常流畅，完全由 Cloud Code 全自动完成。

API测试：后端自动化

刚才我们测试的是在 Cloud Code 中调试前端 UI 项目。下面我们还可以测试一下，用 Cloud Code 调用 Chrome, 对 API 进行测试。我们可以先看一下我准备的这个开发任务的提示词，让它创建一个 Node.js (JavaScript 运行环境: Node.js: 用于在服务器端运行 JavaScript 代码的环境) 加 Express (Web 应用框架: Express: 基于 Node.js 的 Web 应用框架) 的代办事项 API。包含 GET 请求获取所有代办事项，POST 请求创建代办事项，还有 PUT 与 DELETE。

API测试流程与Postman替代

并且集成 Swagger UI (API 文档工具: Swagger UI: 用于可视化和交互式测试 RESTful API 的工具) Express 自动生成 API 文档。启动服务后，在 Chrome 中进行下面的操作，并且将测试结果汇总。如果测试过程发现 bug 直接修复，并且验证。然后我们回到 Cloud Code, 直接粘贴刚才的提示词，直接运行。像这样的话，我们使用 Cloud Code, 调用 Chrome 对 API 进行测试，在一定程度上甚至可以取代 Postman。

API测试执行：GET与POST

这里它生成了开发任务。这里我们要稍等一下。five minutes later. 可以看到这里，他开始对 API 进行测试。然后这里提示 GET 端点已展开，它将点击这个按钮。这里提示点击 Execute 执行 GET 请求，并且提示需要滚动查看响应。这里它又重新点击了 Execute 按钮。好，这里提示 GET 请求测试成功，返回了两个代办事项。现在他需要测试 POST 端点，创建新的代办事项。

API测试执行：PUT与DELETE

这里点击了 POST 进行展开。然后这里提示它需要使用 find 的工具定位 POST 的按钮。好，可以看到，它将 POST 进行了展开。这里提示，它需要点击这个按钮。这里提示 POST 成功，它创建了代办事项。现在他需要继续测试 PUT，还有 DELETE。然后这里提示 PUT 和 DELETE 都创建成功。这里提示它需要在 Swagger UI 中执行一个请求来捕获网络请求。

API测试结果汇总

这个任务执行完成，这里是生成的测试结果汇总报告。包括 API 端点测试结果，这些端点都测试成功，而且这里还有响应时间。这里就是错误处理测试，下面这里就是 network 面板验证。这里给出了总结，所有测试都通过没有 bug 发现，API 功能完整，错误处理正确，响应时间均在毫秒级。

后端API自动化总结

这样的话，就在 Cloud Code 中自动调用 Chrome 浏览器，完成了 API 的测试。而且整个过程全部都是由 Cloud Code 自动完成的，不需要我们进行任何干预。

综合评价与未来展望

通过我们在 Cloud Code 中调用 Chrome 浏览器测试浏览器自动化以及前端 UI 调试，还有后端 API 的测试。可以发现，在 Cloud Code 中调用 Chrome 浏览器，效果非常不错。他们全自动为我们完成各种复杂的任务。Cloud Code 有了 Chrome 浏览器的加持，就变得越来越实用，越来越强大了。好，本期视频就做到这里。欢迎大家点赞、关注和转发。谢谢大家观看。