--- area: tech-engineering category: ai-ml companies_orgs: - Google - X date: '2025-12-19' draft: true guest: '' insight: '' layout: post.njk products_models: - Claude Code - Chrome - React - Express project: [] series: '' source: https://www.youtube.com/watch?v=wVS-J7lRLlg speaker: AI超元域 status: evergreen summary: 本视频演示了最新版**Claude Code**如何原生支持调用**Chrome**浏览器，实现全自动开发**React**组件、调试、修复Bug及自动化测试**API**接口。此集成极大地增强了**Claude Code**的实用性和强大性，通过利用现有浏览器环境提升开发效率。 tags: - automation - developer-tool - history title: "\U0001F680丢掉playwright吧！Claude Code原生支持Chrome浏览器！全自动调用Chrome开发React组件、自动发现Bug、自动修复，自动化测试API接口！全自动化开发流程实测！#ai" --- ### 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** 浏览器的加持，就变得越来越实用，越来越强大了。好，本期视频就做到这里。欢迎大家点赞、关注和转发。谢谢大家观看。