Cursor + playwright + MCP 实现UI自动化测试

Source

Cursor简介

Cursor 是一款新兴的代码编辑器，它的开发背景与人工智能的快速发展紧密相关。在当下，开发者对于更智能、高效的代码编写工具需求日益增长，Cursor 应运而生。它由一支专注于将 AI 技术融入开发工具的团队打造，旨在通过人工智能辅助，提升开发者的编码体验和效率。​

在作用方面，Cursor 不仅具备常规代码编辑器的基本功能，如语法高亮、代码补全等，更重要的是它集成了强大的 AI 能力。在 UI 自动化测试中，开发者可以利用它快速生成测试代码框架，根据测试需求智能补全代码片段，还能对已有的测试代码进行优化和重构，大大减少了手动编码的工作量，提高了测试代码的编写质量和效率。

Playwright简介

Playwright 是由微软开发的一款开源自动化测试工具。微软在软件研发和测试领域有着深厚的积累，随着 Web 应用的不断发展和复杂化，传统的自动化测试工具在跨浏览器、跨平台支持以及对现代 Web 特性的兼容上逐渐暴露出不足，Playwright 便是为解决这些问题而被开发出来的。​

其作用十分显著，它支持多种主流浏览器，如 Chrome、Firefox、Safari 等，能够实现跨浏览器的 UI 自动化测试，确保测试结果在不同浏览器环境下的一致性。同时，Playwright 提供了丰富的 API，开发者可以通过编程的方式模拟用户在浏览器中的各种操作，如点击、输入、导航等，精准地复现用户场景。此外，它还支持无头模式运行，提高了测试执行的效率，并且具有强大的调试能力，方便开发者排查测试过程中出现的问题。

MCP

MCP 即 Model-Centered Programming，中文译为 “以模型为中心的编程”，它并非一款具体的工具，而是一种软件开发方法论。其背景源于随着软件系统越来越复杂，传统的以代码为中心的开发方式在系统维护、扩展和复用方面面临诸多挑战。MCP 强调以模型作为软件开发的核心，通过建立清晰、准确的模型来驱动整个开发过程。​

在 UI 自动化测试中，MCP 的作用主要体现在测试框架的设计和构建上。基于 MCP 思想，开发者可以先建立 UI 界面的模型，明确各个元素之间的关系和交互逻辑，然后以该模型为基础设计和生成自动化测试用例。这样一来，测试用例能够更好地与 UI 界面的结构和功能相匹配，当 UI 界面发生变化时，只需对相应的模型进行修改，测试用例便能随之调整，提高了测试用例的可维护性和复用性，使 UI 自动化测试更能适应系统的迭代更新。

创建UI自动化框架

  1. 安装node. js，添加环境变量 https://nodejs.org/en/download/
  2. 创建一个工程目录，输入你的需求（如结合playwright创建一个UI自动化测试框架），会根据提示依次执行：
    npm init -y 作用：创建一个基础的 package.json 文件，添加核心依赖
    npm init playwright@latest 作用：
    创建 Playwright 配置文件 (playwright.config.ts)：
    • 这是整个 Playwright 测试框架的心脏。这个文件里包含了所有的配置选项，比如：
    • 要测试的目标浏览器（Chromium, Firefox, WebKit）。
    • 测试的超时时间。
    • 是否开启截图、录制视频等。
    • 测试报告的格式。
    • 以及很多其他的全局设置。

创建示例测试 (tests/example.spec.ts)：
• 为了让您能立刻上手，它创建了一个 tests 文件夹，并在里面放了一个简单的测试用例文件 example.spec.ts。这个文件向您展示了如何使用 Playwright 的 API 来编写一个基本的测试。
创建 GitHub Actions 工作流文件 (.github/workflows/playwright.yml) (如果您选择了 “yes”)：
• 这是一个用于持续集成 (CI) 的配置文件。当您把代码推送到 GitHub 仓库时，GitHub Actions 会自动根据这个文件的定义，在一个虚拟环境中运行您的所有 Playwright 测试，并生成报告。这对于团队协作和保证代码质量至关重要。

下载浏览器:
• Playwright 并不使用您电脑上已经安装的 Chrome 或 Firefox。它会下载经过特别修补、版本固定的浏览器二进制文件（Chromium, Firefox, WebKit）。这样做是为了确保测试脚本在任何机器上、任何时间运行，其表现都是完全一致和可预测的，避免了因本地浏览器版本更新而导致测试不稳定的问题

  1. 安装一个插件Playwright Test for VS Code，方便运行用例和断点重试
    在这里插入图片描述
    默认在后台执行用例，不打开浏览器，想打开可以在设置中勾选show browser配置
    在这里插入图片描述
  2. 安装MCP
    Playwright MCP官网：https://github.com/microsoft/playwright-mcp
{
    
      
  "mcpServers": {
    
      
    "playwright": {
    
      
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

把json文件中的配置copy到cursor的MCP json文件中
在这里插入图片描述
在这里插入图片描述

  1. 可以描述你的用例步骤，按照它的要求提供数据、步骤、断言方式，选择模型按照提示自动生成自动化脚本，如果定位不对需要稍微调整下。测试报告默认在playright-report文件夹，其他需求也可以让AI完成（比如把登录、关闭浏览器封装成前置和后置函数）
    在这里插入图片描述