2025.09.30

yabo亚博集团官方网站 将剧作家 mcp 纳入您的 AI 驱动开发流程中以进行端到端测试

简介

你好。我是集团研发总部下一代系统实验室的 HO。

上一篇文章这是我所属的项目平衡人工智能中,我们介绍了一个案例研究,其中引入了开发人工智能代理并开始运行。这一举措导致该项目向人工智能驱动开发发生重大转变。 AI 自动化从编码和审查开始,现在它可以从一个想法到生成规范、分解任务以及在 github 上创建问题。这人工智能驱动的开发工作流程的技术细节稍后会单独写一篇文章,但是这次我在做的时候,相对来说比较困难E2E自动化尝试

结论第一

  • Local 的 E2E 测试使用 Cursor + Playwright MCP 很舒服。
  • 为了在内部临时环境中运行自动化 E2E 测试,EC2 上的 n8n 工作流程如何添加 Playwright MCP 服务器并直接从 n8n 调用它

议程

  1. 前提
  2. 什么是剧作家 mcp
  3. 确认
    1. 光标 + 剧作家 MCP
    2. 德文 + 剧作家 MCP
    3. n8n + 剧作家 MCP
  4. 结论
  5. 最后

 

1。前提

我们的团队正在构建一个名为“人工智能驱动的开发工作流程”的系统。
它在 AWS 上准备的临时环境中运行,并且使用 Docker Compose 在一个 EC2 实例上设置以下组件。

  • n8n:工作流程自动化工具
  • 多个 MCP 服务器:提供各种代理功能的模块

2。什么是剧作家mcp

Playwright MCP 是一个服务器组件,允许 AI 代理和工作流程协调器轻松调用自动化 E2E(端到端)测试的机制。通常,Playwright 使用 Nodejs 或 Python 代码直接编写浏览器操作,但通过将其作为 MCP 服务器运行,它可以像 API 一样“接收来自外部服务的请求,执行测试并返回结果”。

具体来说,它具有以下特点。

  • 浏览器操作自动化
    您可以在无头模式下启动 Chromium、Firefox 和 WebKit 等浏览器来模拟用户交互。您可以登录、切换屏幕、填写表格、截图等。

  • 符合 MCP 协议
    它支持模型上下文协议,可以通过 SSE(服务器发送事件)接收来自 MCP 客户端(例如 n8n 和 AI 代理)的命令。这允许您将“运行测试并返回结果”的过程合并为单个节点或操作。

  • 与工作流程集成
    通过将其合并到 CI/CD 或内部暂存环境中,您可以轻松实现部署后自动运行 UI 测试以及在出现任何异常时发送 Slack 通知等流程。

简而言之,Playwright MCP 是一个“通过标准 MCP 接口公开浏览器操作的服务器”,其特点是可以灵活使用,并作为 AI 驱动的开发工作流程和自动化测试平台中的插件。

3。确认

现在,我考虑了如何实际合并这些。我们决定了第一点,即在哪里合并它,以及第二点,即测试什么。总之,我们设置了在本地和分阶段构建的自动化 E2E 测试,并主要运行以检查回归情况。

首先,项目分为三种类型:本地、临时和生产环境。自动化 E2E 测试应该包含在哪里?首先,您可以在本地使用它来检查您已实现和修改的代码的运行情况。另外,在staging中,在向业务方请求UAT之前,需要检查预实现的功能是否清晰,是否出现回归。另一方面,对于生产环境,考虑到以下两个风险,我们决定不采用自动化E2E。

·由于在执行自动化E2E测试时可能会创建、更新或删除数据库中的记录,因此存在可能执行意外处理以及可能对生产数据库进行不必要或致命更改的风险。
·由于需要向工作流程提供测试帐户的登录信息,因此存在泄露的风险。

第二点,关于测试任务。我敏锐地意识到回归问题,随着应用程序变得更加复杂,我经常遇到这个问题。其中包括新注册、登录等功能,这些功能直接关系到用户的涌入,绝不能出现任何问题。随着越来越多的人工智能实现的代码被批准并合并到临时环境中,我们假设自动化 E2E 测试可以帮助减少这种回归问题。通过为此目的进行操作,人类无需每次都尽职尽责地重复相同的测试。通过正确管理提示,每次将新功能合并到 STG 时自动运行相同的测试,并确保不会发生回归,我们认为可以在不花费大量人力的情况下提高操作确认的质量。

我们将进行技术验证。作为一个任务的例子,我们来“检查服务登录的操作”。

提前创建一个专门用于自动端到端测试的帐户。

给出的提示如下。

使用 playwright mcp,访问 [登台环境 URL] 并测试下面的登录流程。

 

・剧作家MCP + 光标

我通常使用 Cursor,但我决定先尝试在那里安装 Playwright MCP,看看效果如何。总之,设置非常简单,可用性也很好。

选择“光标设置”窗口左侧的 MCP 项目。 (图片已经添加)

单击此屏幕上的“新建 MCP 服务器”,然后在显示的 mcpjson 中设置以下内容。

“剧作家”:

在光标的聊天字段中输入提示并发送。浏览器启动并运行测试。
屏幕转换很快,我能够毫无问题地确认操作。此外,如果发生错误,它会列出要检查的事项并建议纠正方法。它还会截取屏幕截图并保存它们。

发生错误时的输出示例

错误消息

 

 ・剧作家MCP+德文

德文的项目团队计划有合同并经常将开发和审核任务分配给 Devin。有没有可能让Devin不仅实现它,而且还完整到E2E?我想。在进行 E2E 测试时,我们不仅关注日志,还关注实际的浏览器转换。与前面提到的 Cursor 结合使用时,还可以在本地计算机上启动浏览器。 Devin的优势在于它有自己的虚拟环境,允许你在Devin内部启动一个浏览器,要求它操作它,并检查它的行为和执行日志。

Devin 过去无法与 MCP 建立联系,但在 8 月份MCP 市场剧作家 MCP 是其中之一,所以我决定将其纳入其中。

 

如果您在此处访问 MCP Marketplace,您将找到 Playwright MCP 选项,因此您可以通过选择此选项轻松安装它。无需设置任何认证信息。

我尝试从Devin的输入栏中输入E2E进行登录测试,看看是否可以执行。但是,登台环境具有访问控制,仅允许从公司网络内部访问它,因此即使您告诉 Devin 正常查看登台环境的 URL,它也会陷入访问控制中。

在这种情况下,您可以选择在 Devin 和您的内部环境之间设置 VPN 连接,或者使用 Devin 在与您的应用相同的基础架构中自行托管 Devin,后者仅在企业版中可用并且可自行托管。 Devin 本身是公开的,因为它是一个 Teams 计划。即使您连接了 VPN,Teams 计划 Devin 也是公开的,因此我认为您需要小心输入的信息。另外,企业版价格昂贵,因此决定实施起来不切实际。

另一方面,我想到了如何与Devin同时进行实现和E2E测试。我认为最好在Devin的本地环境中启动应用程序,实现它,然后发出检查操作的指令,让他们像在本地一样执行操作检查。然而,Devin's Marketplace 上提供的 Playwright MCP 是构建在自己的 docker 容器中的,存在无法从那里访问项目容器、导致无法通信的问题。

作业

·我们无法消除有关提示中包含的数据是否可以安全使用的安全问题。 Devin的自托管企业版非常昂贵且难以实施。

·处理时间极长,并且在剧作家MCP中,行为不稳定,例如尝试使用工具代替进行浏览器测试,结果发生了消耗大量ACU的事件。

 ・剧作家 MCP + n8n

根据上述与 Devin 的讨论,我们决定在部署现有 n8n 工作流程的暂存环境中自托管 Playwright MCP 服务器,然后从工作流程访问自托管 Playwright MCP 服务器。通过这样做,使用 Playwright MCP 的交互在 EC2 内完成,访问受到保护,并且可以安全地使用。

此工作流程是我创建的工作流程中与 Playwright MCP 相关的部分。

我不会详细介绍用n8n创建的工作流程,但流程是在工作流程中处理Slack通道中输入的内容和命令,并处理每个人的任务。作为其中的一部分,我们将添加一个请求 E2E 的案例。在这种情况下,会向 AI 代理发送一条提示,并以 When Executed by Another Workflow 作为输入。此处连接 OpenAI 模型和 MCP 客户端节点。当您点击MCP客户端时,有一个地方可以设置Endpoint等。您可以通过输入自托管的Playwright MCP服务器的端点来连接。

 

我将一个可以在n8n上启动的表单节点连接到AI Agent并创建了一个用于验证的入口。我从这里输入提示。登录成功并显示输出,以便您可以继续下一步。处理时间也非常快,只有几秒钟的时间。

通过将其链接到现有工作流程,我们正在考虑能够从 Slack 通道以文本形式发送 E2E 测试请求,并向 Slack 返回测试成功或失败。

作业

·使用此方法,您无法监视启动浏览器后的行为。如果您期望类似的输出,则需要在内部打开屏幕截图和视频。

最后请注意,在使用 AI 实现端到端自动化时,请务必创建专用帐户进行测试,并避免使用其他帐户运行测试。

结论

  • 对于本地 E2E 测试,Cursor + Playwright MCP 易于安装且运行速度非常快。
  • 只能从公司内部访问的暂存环境中的 E2E 测试可以通过在已经自托管 n8n 工作流程的 EC2 暂存环境上自托管 Playwright MCP 服务器并让工作流访问 Playwright MCP 服务器来安全地使用。

我们专注于招聘。目前正在招募

GMO互联网集团集团研发部下一代系统实验室正在招募工程师和架构师,开发互联网上的高级应用程序,同时研究和验证最新技术。职位空缺列表

  • 推特
  • 脸书
  • 添加到 Hatena 书签

集团研发总部的最新信息正在 Twitter 上发布。请关注我们。

 
  • 人工智能研发办公室
  • 大阪研究开发集团

相关文章