同样的文章也发布在领英（LinkedIn）上。
https://www.linkedin.com/posts/activity-7321494077949026305-zDfX?utm_source=share&utm_medium=member_ios&rcm=ACoAAAYK8YEB-m2An-q1ZnwrwBCkgRHENTac7So

模型上下文协议 (MCP) 是一个标准化接口或机制，允许 大型语言模型 (LLMs) 通过传递结构化的上下文和指令与外部工具、APIs 和环境互动。

MCP 帮助使 AI 模型更好地理解和使用工具。你可以将 LLMs 比作说一种语言的个体，而外部工具——比如 Slack、GitHub、Google Meet 等，如这里所述——则说不同的语言。MCP 作为翻译桥梁，使它们之间能够顺畅交流。这使得 LLMs 能够与各种工具无缝对接，从而不仅扩展其能力，还使其能够与各种工具无缝对接。

截至本文撰写之时，MCP 仍然是一个相对较新的主题。不过，已经有一些 MCP 的方法被尝试使用 Selenium 和 Playwright。本文将介绍如何使用 Playwright-mcp，这是由 微软 Playwright 团队 正式发布的 Playwright-mcp。

我们将使用默认设置，即快照模式，该模式依赖于解析DOM树。这与视觉模式不同，后者依赖于截图和坐标，通常不够准确。本文及后续文章的实验目的是探索快照模式并发现以下几点：

• 设置起来简单吗？
• 确定用户需要什么来与测试中的网页应用互动？我们需要步骤、定位符还是只用提示？
• 先提供一个使用MCP和Playwright的AI驱动测试自动化初步评估吧。

1- 从这里下载并安装Claude客户端。

2- 在你的终端运行试试看:

或

2- 在你的终端运行吧:

     npx @playwright/mcp@latest --port 8931
``` 使用 npx 运行 playwright/mcp 的最新版本，并指定端口号为 8931。

**3\. 输出会是这样的：**

{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/sse"
}
}
}

**4\. 将步骤3中的内容复制到**`claude_desktop_config.json`**中（因为我们使用Claude），进入**

* macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` (相当于：`~/文稿/应用支持/Claude/claude_desktop_config.json`)
* Windows: `%APPDATA%\Claude\claude_desktop_config.json` (相当于：`%APPDATA%\Claude\claude_desktop_config.json`，其中 `%APPDATA%` 是用户的应用数据文件夹路径)

**5\. 打开Claude并输入这个提示。**

> 使用Playwright MCP Server导航至https://opensource-demo.orangehrmlive.com/，执行并确认以下登录流程：- 成功登录

**6. 这会打开浏览器，对于第一个场景，情况如下:**

它将按照步骤继续进行，直到登录过程结束。请注意，正确的用户名和密码写在网站首页上，并会自动从DOM中获取。

请注意，它只在一开始请求权限请求，之后就不会再请求了。

场景1 成功登录

**7\. 在场景2中，我们用以下提示无效登录：**

> 设置无效登录的情况

它会注意到自己已登录，于是登出，再尝试用无效的凭据登录。

场景2 无效登录

# **想法和结论**

**设置起来简单吗？**

是的，通过少量指令，我们就能够轻松设置并运行这些场景。完全没有复杂的安装步骤。

**除了配置和提示之外，还需要其他东西吗？比如具体的步骤和定位器？**

传统的方法是手动进行测试，而在实现测试自动化的过程中，还需要花费精力来找到定位元素或编写自动化脚本。

但在这里，只需几个命令，我们就能尝试网站的各种情况，**Claude** 或任何其他大语言模型都会处理重活。我们只需给出一个提示就成。这可以省时省力，让他们可以专注于其他事项。

**这个实验最初的评估结果是怎样的？**

**快照模式的一个重要优点**是它利用了网站的DOM结构，并且可以清晰看到它是如何抓取选择器（定位器）的，以及它是如何获取用户名和密码的全过程。此外，然后在无效登录的测试中成功注销。在这些简单的测试用例中，它表现得非常完美。

然而，我们使用的网站是**结构合理并且选择器定位准确的**。这对于那些**具有良好结构的DOM**或选择器/定位器不佳的其他网站来说可能会比较有挑战性。我们需要尝试一些额外的用例，也许可以试试结构较差的网站和其他场景。我们会在后续的文章中继续探索其他元素和用例。

想象你可以按这些步骤问它，让它生成测试自动化代码给你。所以你可以继续。

**另外，值得一提的是**，人们可能会问及成本问题，这主要取决于你选择的语言模型。对于付费模型，成本直接与使用量相关，并且需要考虑是否值得从免费计划升级到付费版本。然而，即使是开源或本地部署的模型，仍然需要权衡计算资源的需求、安装时间以及持续维护等。

一个恰当的成本分析应该比较采用这种方法与传统测试自动化所涉及的总投入、所花费的时间和资金。在某些情况下，如本文所述的结合传统测试自动化与人工智能增强的自动化的混合方式，可能是最有效的方案。

**主要的问题是**这项技术在未来改进到什么程度会取代测试人员。我认为测试人员仍然会被需要，不会被取代，但他们的职责范围将扩大。这项技术将极大地帮助他们交付更高质量的产品并提高覆盖率。这始终是我们的主要目标。

不过，作为初步尝试，这看起来很有希望。期待未来会有更多类似的文章和试验，加油 :) .

**参考资料:**

## [对于桌面版Claude用户 - 模型上下文协议入门Get started using预设服务器Claude桌面版中的预设服务器.modelcontextprotocol.io](http://modelcontextprotocol.io/quickstart/user?source=post_page-----1545c2aa7d67---------------------------------------)

## [Microsoft Playwright MCP：初学者教程 Lynn Mikami 在 Hugging Face 上发表的一篇博客文章](https://huggingface.co/blog/lynn-mikami/microsoft-playwright-mcp)

## [GitHub - microsoft/playwright-mcp: Playwright MCP 服务器项目。通过在 GitHub 上为 microsoft/playwright-mcp 创建一个帐户来参与代码开发。](https://github.com/microsoft/playwright-mcp)

## [使用Playwright、MCP Server 和 CursorAI 实现AI驱动的测试自动化本文将探讨如何利用Playwright、MCP Server 和 CursorAI 实现AI驱动的测试自动化流程……medium.com](https://medium.com/@sumit.somanchd/ai-driven-test-automation-with-playwright-mcp-server-cursorai-c974f2d6b191?source=post_page-----1545c2aa7d67---------------------------------------)
  *[MCP]: 模型上下文协议
  *[LLM]: 大型语言模型
  *[RAG]: 基于检索的生成
  *[SSE]: 服务器发送事件