如何使用 Cursor AI Browser Control (2026)

如何使用 Cursor AI 浏览器控制功能 (2026)

Cursor AI 已经从单纯的代码编辑工具进化为一个全功能的开发环境，能够直接与网页浏览器进行交互。借助浏览器控制能力，Cursor 可以导航网站、点击元素、填写表单、捕获屏幕截图、读取控制台输出并验证应用程序是否运行正常——这一切只需通过自然语言指令即可完成。

本指南将介绍如何设置和使用 Cursor 的浏览器控制功能，用于开发、测试和调试工作流。

Cursor 浏览器控制的功能

Cursor 的浏览器控制通过与浏览器自动化工具集成，使 AI Agent（智能体）能够直接访问网页浏览器。这开启了几种强大的工作流：

功能	描述
页面导航	打开 URL、点击链接、后退/前进
元素交互	点击按钮、填写输入框、选择下拉菜单
捕获截图	捕获当前页面状态以便进行视觉验证
读取页面内容	提取文本、HTML 和元素属性
监控控制台	读取 JavaScript 控制台日志和错误
运行 JavaScript	在浏览器上下文中执行任意脚本
测试应用程序	在代码更改后验证 UI 行为

在 Cursor 中设置浏览器控制

方法 1：使用内置浏览器工具 (Cursor Agent)

Cursor 的 Agent 模式包含一个开箱即用的浏览器工具，适用于 Cursor 0.45 及以上版本。使用方法如下：

打开 Cursor 并进入你的项目。
打开 AI 聊天面板 (Cmd+L / Ctrl+L)。
通过点击模式选择器或按下 Cmd+. (Windows 为 Ctrl+.) 切换到 Agent 模式。
要求 Cursor 与浏览器交互：

在浏览器中打开 http://localhost:3000，检查登录页面是否加载正确

Cursor 将启动一个无头浏览器（headless browser），导航至该 URL，并汇报所见内容。它可以截图并解析视觉内容来验证你的应用程序。

方法 2：使用 Playwright MCP 服务器

对于更高级的浏览器控制，你可以将 Cursor 连接到 Playwright MCP (Model Context Protocol) 服务器。这赋予 AI Agent 完整的 Playwright 自动化能力。

第 1 步：安装 Playwright MCP 服务器

npm install -g @anthropic-ai/mcp-playwright

第 2 步：配置 Cursor 使用 MCP 服务器

打开 Cursor 设置并导航到 MCP 配置。添加 Playwright 服务器：

// 项目根目录下的 .cursor/mcp.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-playwright"]
    }
  }
}

第 3 步：重启 Cursor 并验证

添加配置后，重启 Cursor。你应该能在 Agent 的工具列表中看到 Playwright 工具。MCP 服务器让 Cursor 能够访问以下工具：

browser_navigate -- 跳转至 URL
browser_click -- 通过选择器或文本点击元素
browser_type -- 在输入框中输入文本
browser_screenshot -- 捕获截图
browser_evaluate -- 在页面中运行 JavaScript

方法 3：使用 Puppeteer MCP

Playwright 的另一种替代方案是基于 Puppeteer 的 MCP 服务器：

// .cursor/mcp.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

实际应用示例

示例 1：测试登录流程

在修改身份验证代码后，让 Cursor 验证其是否工作：

导航到 http://localhost:3000/login，在邮箱字段输入 "test@example.com"，
在密码字段输入 "password123"，点击提交按钮，并验证
我们是否被重定向到了仪表盘（dashboard）。

Cursor 将按顺序执行每个步骤，在每个阶段截图，并报告流程是否符合预期。如果失败，它可以读取控制台错误并建议代码修复方案。

示例 2：调试视觉 Bug

当你注意到样式问题时，使用浏览器控制进行排查：

在浏览器中打开 http://localhost:3000/pricing。截取价格卡片部分的屏幕。
检查卡片在 1280px 宽的视口下是否排列整齐。

Cursor 会捕获截图，分析视觉布局，并告诉你哪里看起来不对。然后你可以要求它修复 CSS：

价格卡片在移动端溢出了。修复 CSS 使它们在 768px 以下垂直堆叠。
然后以 375px 宽度打开页面并截图确认。

示例 3：为开发抓取数据

在开发过程中，你可能需要了解其他网站如何组织其 API 或 HTML：

导航到 https://example.com/api/docs，从页面中提取所有 API 端点 URL 及其 HTTP 方法。

Cursor 将解析页面内容并返回可用于开发的结构化数据。

示例 4：端到端 (E2E) 测试生成

要求 Cursor 既进行测试又编写测试代码：

打开 http://localhost:3000 并手动测试注册流程。然后编写一个
Playwright 测试文件来自动执行此流程。

Cursor 会与你的应用交互，观察行为，并生成测试文件：

// tests/signup.spec.ts (由 Cursor 生成)
import { test, expect } from '@playwright/test';

test('用户可以成功注册', async ({ page }) => {
  await page.goto('http://localhost:3000/signup');

  await page.fill('[data-testid="email-input"]', 'newuser@example.com');
  await page.fill('[data-testid="password-input"]', 'SecurePass123!');
  await page.fill('[data-testid="confirm-password-input"]', 'SecurePass123!');

  await page.click('[data-testid="signup-button"]');

  await expect(page).toHaveURL('/dashboard');
  await expect(page.locator('[data-testid="welcome-message"]')).toContainText(
    'Welcome'
  );
});

在 Cursor Rules 中使用浏览器控制

创建一个 .cursorrules 文件，为 Cursor 提供有关浏览器控制偏好的上下文：

# 浏览器控制规则

在浏览器中测试应用程序时：
- 始终使用 http://localhost:3000 作为基础 URL
- 在每次重要交互后进行截图
- 每次页面导航后检查浏览器控制台是否有错误
- 如果可用，优先使用 data-testid 属性进行元素选择
- 在 1280px（桌面）和 375px（移动）视口下进行测试
- 报告你遇到的任何控制台警告或错误

常见问题排查

浏览器无法启动

# 确保已安装 Playwright 浏览器
npx playwright install chromium

# 或安装所有浏览器
npx playwright install

MCP 服务器未连接

检查 .cursor/mcp.json 中的 MCP 配置是否为有效的 JSON 格式。
修改 MCP 配置后重启 Cursor。
验证 MCP 服务器二进制文件是否可访问：

# 手动测试 Playwright MCP 服务器
npx @anthropic-ai/mcp-playwright --help

截图为空白

这通常意味着页面尚未加载完成。要求 Cursor 等待：

导航到 http://localhost:3000 并等待页面完全加载
（等待网络空闲），然后截图。

无法与 Shadow DOM 元素交互

对于使用 Shadow DOM 的 Web Components：

使用 browser_evaluate 访问 shadow root：
document.querySelector('my-component').shadowRoot.querySelector('button').click()

高效浏览器控制技巧

技巧	原因
使用 `data-testid` 属性	比 CSS 选择器或文本内容更可靠
先启动开发服务器	浏览器控制需要运行中的应用程序
明确说明视口大小	为响应式测试指定精确宽度
链式关联动作	在一个提示词中结合导航 + 交互 + 验证
使用截图进行调试	要求 Cursor 在操作前后进行截图

需注意的局限性

无持久化会话：浏览器状态在 Cursor 会话之间会重置。Cookie 和 localStorage 不会持久保存。
默认无头模式：浏览器在后台运行。除非在 MCP 服务器中配置有头模式，否则你无法实时看到它。
交互频率：复杂的多步流程可能会较慢，因为每个动作都需要与 AI 模型进行往返通信。
身份验证：需要 OAuth 或验证码（CAPTCHA）的网站需要手动干预或使用模拟/测试凭据。

总结

Cursor 的浏览器控制功能将 AI 代码编辑器转型为全方位的开发助手，它可以编写代码、在真实浏览器中测试，并根据视觉和功能反馈进行迭代。无论你是使用内置浏览器工具还是连接 Playwright/Puppeteer MCP 服务器，这种视觉化和交互式验证更改的能力都能显著节省手动测试时间。

如果你正在构建集成 AI 生成媒体（如图像、视频或数字人）的 Web 应用程序，免费试用 Hypereal AI —— 包含 35 个积分，无需信用卡。我们的 API 让你可以轻松地将 AI 媒体生成添加到任何 Web 应用中，而 Cursor 的浏览器控制则是测试这种集成的绝佳方式。

如何使用 Cursor AI 浏览器控制功能 (2026)

本指南将介绍如何设置和使用 Cursor 的浏览器控制功能，用于开发、测试和调试工作流。

Cursor 浏览器控制的功能

Cursor 的浏览器控制通过与浏览器自动化工具集成，使 AI Agent（智能体）能够直接访问网页浏览器。这开启了几种强大的工作流：

功能	描述
页面导航	打开 URL、点击链接、后退/前进
元素交互	点击按钮、填写输入框、选择下拉菜单
捕获截图	捕获当前页面状态以便进行视觉验证
读取页面内容	提取文本、HTML 和元素属性
监控控制台	读取 JavaScript 控制台日志和错误
运行 JavaScript	在浏览器上下文中执行任意脚本
测试应用程序	在代码更改后验证 UI 行为

在 Cursor 中设置浏览器控制

方法 1：使用内置浏览器工具 (Cursor Agent)

Cursor 的 Agent 模式包含一个开箱即用的浏览器工具，适用于 Cursor 0.45 及以上版本。使用方法如下：

打开 Cursor 并进入你的项目。
打开 AI 聊天面板 (Cmd+L / Ctrl+L)。
通过点击模式选择器或按下 Cmd+. (Windows 为 Ctrl+.) 切换到 Agent 模式。
要求 Cursor 与浏览器交互：

在浏览器中打开 http://localhost:3000，检查登录页面是否加载正确

Cursor 将启动一个无头浏览器（headless browser），导航至该 URL，并汇报所见内容。它可以截图并解析视觉内容来验证你的应用程序。

方法 2：使用 Playwright MCP 服务器

对于更高级的浏览器控制，你可以将 Cursor 连接到 Playwright MCP (Model Context Protocol) 服务器。这赋予 AI Agent 完整的 Playwright 自动化能力。

第 1 步：安装 Playwright MCP 服务器

npm install -g @anthropic-ai/mcp-playwright

第 2 步：配置 Cursor 使用 MCP 服务器

打开 Cursor 设置并导航到 MCP 配置。添加 Playwright 服务器：

// 项目根目录下的 .cursor/mcp.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-playwright"]
    }
  }
}

第 3 步：重启 Cursor 并验证

添加配置后，重启 Cursor。你应该能在 Agent 的工具列表中看到 Playwright 工具。MCP 服务器让 Cursor 能够访问以下工具：

browser_navigate -- 跳转至 URL
browser_click -- 通过选择器或文本点击元素
browser_type -- 在输入框中输入文本
browser_screenshot -- 捕获截图
browser_evaluate -- 在页面中运行 JavaScript

方法 3：使用 Puppeteer MCP

Playwright 的另一种替代方案是基于 Puppeteer 的 MCP 服务器：

// .cursor/mcp.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

实际应用示例

示例 1：测试登录流程

在修改身份验证代码后，让 Cursor 验证其是否工作：

导航到 http://localhost:3000/login，在邮箱字段输入 "test@example.com"，
在密码字段输入 "password123"，点击提交按钮，并验证
我们是否被重定向到了仪表盘（dashboard）。

Cursor 将按顺序执行每个步骤，在每个阶段截图，并报告流程是否符合预期。如果失败，它可以读取控制台错误并建议代码修复方案。

示例 2：调试视觉 Bug

当你注意到样式问题时，使用浏览器控制进行排查：

在浏览器中打开 http://localhost:3000/pricing。截取价格卡片部分的屏幕。
检查卡片在 1280px 宽的视口下是否排列整齐。

Cursor 会捕获截图，分析视觉布局，并告诉你哪里看起来不对。然后你可以要求它修复 CSS：

价格卡片在移动端溢出了。修复 CSS 使它们在 768px 以下垂直堆叠。
然后以 375px 宽度打开页面并截图确认。

示例 3：为开发抓取数据

在开发过程中，你可能需要了解其他网站如何组织其 API 或 HTML：

导航到 https://example.com/api/docs，从页面中提取所有 API 端点 URL 及其 HTTP 方法。

Cursor 将解析页面内容并返回可用于开发的结构化数据。

示例 4：端到端 (E2E) 测试生成

要求 Cursor 既进行测试又编写测试代码：

打开 http://localhost:3000 并手动测试注册流程。然后编写一个
Playwright 测试文件来自动执行此流程。

Cursor 会与你的应用交互，观察行为，并生成测试文件：

// tests/signup.spec.ts (由 Cursor 生成)
import { test, expect } from '@playwright/test';

test('用户可以成功注册', async ({ page }) => {
  await page.goto('http://localhost:3000/signup');

  await page.fill('[data-testid="email-input"]', 'newuser@example.com');
  await page.fill('[data-testid="password-input"]', 'SecurePass123!');
  await page.fill('[data-testid="confirm-password-input"]', 'SecurePass123!');

  await page.click('[data-testid="signup-button"]');

  await expect(page).toHaveURL('/dashboard');
  await expect(page.locator('[data-testid="welcome-message"]')).toContainText(
    'Welcome'
  );
});

在 Cursor Rules 中使用浏览器控制

创建一个 .cursorrules 文件，为 Cursor 提供有关浏览器控制偏好的上下文：

# 浏览器控制规则

在浏览器中测试应用程序时：
- 始终使用 http://localhost:3000 作为基础 URL
- 在每次重要交互后进行截图
- 每次页面导航后检查浏览器控制台是否有错误
- 如果可用，优先使用 data-testid 属性进行元素选择
- 在 1280px（桌面）和 375px（移动）视口下进行测试
- 报告你遇到的任何控制台警告或错误

常见问题排查

浏览器无法启动

# 确保已安装 Playwright 浏览器
npx playwright install chromium

# 或安装所有浏览器
npx playwright install

MCP 服务器未连接

检查 .cursor/mcp.json 中的 MCP 配置是否为有效的 JSON 格式。
修改 MCP 配置后重启 Cursor。
验证 MCP 服务器二进制文件是否可访问：

# 手动测试 Playwright MCP 服务器
npx @anthropic-ai/mcp-playwright --help

截图为空白

这通常意味着页面尚未加载完成。要求 Cursor 等待：

导航到 http://localhost:3000 并等待页面完全加载
（等待网络空闲），然后截图。

无法与 Shadow DOM 元素交互

对于使用 Shadow DOM 的 Web Components：

使用 browser_evaluate 访问 shadow root：
document.querySelector('my-component').shadowRoot.querySelector('button').click()

高效浏览器控制技巧

技巧	原因
使用 `data-testid` 属性	比 CSS 选择器或文本内容更可靠
先启动开发服务器	浏览器控制需要运行中的应用程序
明确说明视口大小	为响应式测试指定精确宽度
链式关联动作	在一个提示词中结合导航 + 交互 + 验证
使用截图进行调试	要求 Cursor 在操作前后进行截图

需注意的局限性

无持久化会话：浏览器状态在 Cursor 会话之间会重置。Cookie 和 localStorage 不会持久保存。
默认无头模式：浏览器在后台运行。除非在 MCP 服务器中配置有头模式，否则你无法实时看到它。
交互频率：复杂的多步流程可能会较慢，因为每个动作都需要与 AI 模型进行往返通信。
身份验证：需要 OAuth 或验证码（CAPTCHA）的网站需要手动干预或使用模拟/测试凭据。

开始使用 Hypereal 构建

如何使用 Cursor AI 浏览器控制功能 (2026)

Cursor 浏览器控制的功能

在 Cursor 中设置浏览器控制

方法 1：使用内置浏览器工具 (Cursor Agent)

方法 2：使用 Playwright MCP 服务器

方法 3：使用 Puppeteer MCP

实际应用示例

示例 1：测试登录流程

示例 2：调试视觉 Bug

示例 3：为开发抓取数据

示例 4：端到端 (E2E) 测试生成

在 Cursor Rules 中使用浏览器控制

常见问题排查

浏览器无法启动

MCP 服务器未连接

截图为空白

无法与 Shadow DOM 元素交互

高效浏览器控制技巧

需注意的局限性

总结

相关文章

如何从零开始构建 MCP Server (2026)

Claude Code 入门指南与最佳实践 (2026)

如何使用 Claude Code 编写更好的代码 (2026)

立即开始构建

开始使用 Hypereal 构建

如何使用 Cursor AI 浏览器控制功能 (2026)

Cursor 浏览器控制的功能

在 Cursor 中设置浏览器控制

方法 1：使用内置浏览器工具 (Cursor Agent)

方法 2：使用 Playwright MCP 服务器

方法 3：使用 Puppeteer MCP

实际应用示例

示例 1：测试登录流程

示例 2：调试视觉 Bug

示例 3：为开发抓取数据

示例 4：端到端 (E2E) 测试生成

在 Cursor Rules 中使用浏览器控制

常见问题排查

浏览器无法启动

MCP 服务器未连接

截图为空白

无法与 Shadow DOM 元素交互

高效浏览器控制技巧

需注意的局限性

总结

相关文章

如何从零开始构建 MCP Server (2026)

Claude Code 入门指南与最佳实践 (2026)

如何使用 Claude Code 编写更好的代码 (2026)

立即开始构建