基本信息

安装命令

包管理器	命令
npm	`npm init playwright@latest`
yarn	`yarn create playwright`
pnpm	`pnpm create playwright`

Playwright MCP

一个模型上下文协议（MCP）服务器，使用 Playwright 提供浏览器自动化能力。该服务器使 LLM（大语言模型）能够通过结构化的无障碍快照与网页交互，无需使用截图或视觉优化的模型。

核心特性

快速且轻量。使用 Playwright 的无障碍树，而非基于像素的输入。
对 LLM 友好。无需视觉模型，纯粹基于结构化数据运行。
确定性的工具应用。避免了基于截图方法中常见的模糊性问题。

系统要求

Node.js 18 或更高版本
VS Code、Cursor、Windsurf、Claude Desktop、Goose 或任何其他 MCP 客户端

快速开始

首先，为你的客户端安装 Playwright MCP 服务器。

标准配置 适用于大多数工具：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Claude Code

使用 Claude Code CLI 添加 Playwright MCP 服务器：

bash

claude mcp add playwright npx @playwright/mcp@latest

Claude Desktop

按照 MCP 安装指南操作，使用上面的标准配置。

Cline

按照配置 MCP 服务器部分中的说明操作

示例：本地设置

将以下内容添加到你的 cline_mcp_settings.json 文件中：

json

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "timeout": 30,
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ],
      "disabled": false
    }
  }
}

Codex

使用 Codex CLI 添加 Playwright MCP 服务器：

bash

codex mcp add playwright npx "@playwright/mcp@latest"

或者，创建或编辑配置文件 ~/.codex/config.toml 并添加：

toml

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

更多信息，请参阅 Codex MCP 文档。

Cursor

点击按钮安装：

在 Cursor 中安装>

或手动安装：

前往 Cursor 设置 -> MCP -> 添加新的 MCP 服务器。名称可以随意选择，使用 command 类型，命令为 npx @playwright/mcp@latest。你也可以通过点击 Edit 来验证配置或添加命令行参数。

Gemini CLI

按照 MCP 安装指南操作，使用上面的标准配置。

配置选项

Playwright MCP 服务器支持以下参数。这些参数可以在上面的 JSON 配置中作为 "args" 列表的一部分提供：

args列表

> npx @playwright/mcp@latest --help
  --allowed-hosts <hosts...>            逗号分隔的主机列表，服务器
                                        允许从这些主机提供服务。
                                        默认为服务器绑定到的
                                        主机。传递 '*' 可禁用主机检查。
  --allowed-origins <origins>           分号分隔的受信任源
                                        列表，允许浏览器向其发起请求。
                                        默认为允许所有。
                                        重要提示：这*不*作为
                                        安全边界，也*不*影响
                                        重定向。
  --allow-unrestricted-file-access      允许访问工作区根目录之外的
                                        文件。还允许
                                        对 file:// URL 的无限制访问。默
                                        情况下，文件系统访问仅限于
                                        工作区根目录
                                        （如果未配置根目录，则为 cwd），
                                        并且导航到 file:// URL 会
                                        被阻止。
  --blocked-origins <origins>           分号分隔的源列表，用于
                                        阻止浏览器向其发起请求。
                                        阻止列表在允许列表之前评估。
                                        如果在没有允许列表的情况下使用，
                                        不匹配阻止列表的请求仍然
                                        被允许。
                                        重要提示：这*不*作为
                                        安全边界，也*不*影响
                                        重定向。
  --block-service-workers               阻止 Service Workers
  --browser <browser>                   要使用的浏览器或 Chrome
                                        渠道，可能的值：
                                        chrome、firefox、webkit、msedge。
  --caps <caps>                         逗号分隔的额外功能
                                        列表，可能的值：
                                        vision、pdf。
  --cdp-endpoint <endpoint>             要连接的 CDP 端点。
  --cdp-header <headers...>             与连接请求一起发送的
                                        CDP 头，可以指定多个。
  --codegen <lang>                      指定用于代码生成的语言，
                                        可能的值：
                                        "typescript"、"none"。默认为
                                        "typescript"。
  --config <path>                       配置文件的路径。
  --console-level <level>               要返回的控制台消息级别：
                                        "error"、"warning"、"info"、"debug"。
                                        每个级别包含更严重级别的消息。
  --device <device>                     要模拟的设备，例如："iPhone
                                        15"
  --executable-path <path>              浏览器可执行文件的路径。
  --extension                           连接到正在运行的浏览器实例
                                        （仅限 Edge/Chrome）。需要安装
                                        "Playwright MCP Bridge" 浏览器
                                        扩展。
  --grant-permissions <permissions...>  要授予浏览器上下文的权限
                                        列表，例如
                                        "geolocation"、"clipboard-read"、
                                        "clipboard-write"。
  --headless                            以无头模式运行浏览器，默认为有头模式
  --host <host>                         服务器绑定到的主机。默认为
                                        localhost。使用 0.0.0.0 绑定到所有
                                        接口。
  --ignore-https-errors                 忽略 HTTPS 错误
  --init-page <path...>                 要在 Playwright 页面对象上
                                        执行的 TypeScript 文件路径
  --init-script <path...>               要添加为初始化脚本的
                                        JavaScript 文件路径。脚本将
                                        在每个页面的任何页面脚本之前执行
                                        。可以指定
                                        多次。
  --isolated                            将浏览器配置文件保留在内存中，不
                                        保存到磁盘。
  --image-responses <mode>              是否向客户端发送图像响应。
                                        可以是 "allow" 或 "omit"，
                                        默认为 "allow"。
  --no-sandbox                          禁用所有通常被沙箱化的
                                        进程类型的沙箱。
  --output-dir <path>                   输出文件目录的路径。
  --output-mode <mode>                  是否将快照、控制台
                                        消息、网络日志保存到文件或
                                        标准输出。可以是 "file" 或
                                        "stdout"。默认为 "stdout"。
  --port <port>                         要监听的 SSE 传输端口。
  --proxy-bypass <bypass>               绕过代理的逗号分隔域，
                                        例如
                                        ".com,chromium.org,.domain.com"
  --proxy-server <proxy>                指定代理服务器，例如
                                        "http://myproxy:3128" 或
                                        "socks5://myproxy:8080"
  --save-session                        是否将 Playwright MCP
                                        会话保存到输出目录。
  --save-trace                          是否将 Playwright 跟踪
                                        保存到输出目录。
  --save-video <size>                   是否将会话视频
                                        保存到输出目录。例如
                                        "--save-video=800x600"
  --secrets <path>                      包含密钥的文件的路径
                                        ，采用 dotenv 格式
  --shared-browser-context              在所有连接的 HTTP 客户端之间
                                        重用相同的浏览器上下文。
  --snapshot-mode <mode>                当为响应拍摄快照时，
                                        指定要使用的模式。可以是
                                        "incremental"、"full" 或 "none"。
                                        默认为 incremental。
  --storage-state <path>                隔离会话的存储状态文件
                                        路径。
  --test-id-attribute <attribute>       指定用于测试 ID 的
                                        属性，默认为 "data-testid"
  --timeout-action <timeout>            指定操作超时（毫秒），
                                        默认为 5000ms
  --timeout-navigation <timeout>        指定导航超时（毫秒）
                                        ，默认为 60000ms
  --user-agent <ua string>              指定用户代理字符串
  --user-data-dir <path>                用户数据目录的路径。如果未
                                        指定，将创建一个临时目录。
  --viewport-size <size>                指定浏览器视口大小（像素）
                                        ，例如 "1280x720"

用户配置文件

你可以像普通浏览器一样使用持久化配置文件运行 Playwright MCP（默认方式），或者在隔离的上下文中运行测试会话，或者使用浏览器扩展连接到现有的浏览器。

持久化配置文件

所有登录信息都会存储在持久化配置文件中，如果你想在会话之间清除离线状态，可以删除它。持久化配置文件位于以下位置，你可以使用 --user-data-dir 参数覆盖它。

bash

# Windows
%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile

# macOS
- ~/Library/Caches/ms-playwright/mcp-{channel}-profile

# Linux
- ~/.cache/ms-playwright/mcp-{channel}-profile

隔离模式

在隔离模式下，每个会话都在独立的配置文件中启动。每次你要求 MCP 关闭浏览器时，会话就会关闭，该会话的所有存储状态都会丢失。你可以通过配置的 contextOptions 或 --storage-state 参数为浏览器提供初始存储状态。了解更多关于存储状态的信息请点击这里。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state={path/to/storage.json}"
      ]
    }
  }
}

浏览器扩展

Playwright MCP Chrome 扩展允许你连接到现有的浏览器标签页，并利用你已登录的会话和浏览器状态。请参阅 extension/README.md 了解安装和设置说明。

初始状态

有多种方法可以为浏览器上下文或页面提供初始状态。

对于存储状态，你可以：

使用 --user-data-dir 参数从用户数据目录启动。这将在会话之间持久化所有浏览器数据。
使用 --storage-state 参数从存储状态文件启动。这会将文件中的 cookies 和本地存储加载到隔离的浏览器上下文中。

对于页面状态，你可以使用：

--init-page 指向一个将在 Playwright 页面对象上执行的 TypeScript 文件。这允许你运行任意代码来设置页面。

// init-page.ts
export default async ({ page }) => {
  await page.context().grantPermissions(['geolocation']);
  await page.context().setGeolocation({ latitude: 37.7749, longitude: -122.4194 });
  await page.setViewportSize({ width: 1280, height: 720 });
};

--init-script 指向一个将被添加为初始化脚本的 JavaScript 文件。该脚本将在每个页面的任何页面脚本之前执行。这对于覆盖浏览器 API 或设置环境非常有用。

// init-script.js
window.isPlaywrightMCP = true;

配置文件

Playwright MCP 服务器可以使用 JSON 配置文件进行配置。你可以使用 --config 命令行选项指定配置文件：

bash

npx @playwright/mcp@latest --config path/to/config.json

Configuration file schema

typescript

{
  /**
   * The browser to use.
   */
  browser?: {
    /**
     * The type of browser to use.
     */
    browserName?: 'chromium' | 'firefox' | 'webkit';

    /**
     * Keep the browser profile in memory, do not save it to disk.
     */
    isolated?: boolean;

    /**
     * Path to a user data directory for browser profile persistence.
     * Temporary directory is created by default.
     */
    userDataDir?: string;

    /**
     * Launch options passed to
     * @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context
     *
     * This is useful for settings options like `channel`, `headless`, `executablePath`, etc.
     */
    launchOptions?: playwright.LaunchOptions;

    /**
     * Context options for the browser context.
     *
     * This is useful for settings options like `viewport`.
     */
    contextOptions?: playwright.BrowserContextOptions;

    /**
     * Chrome DevTools Protocol endpoint to connect to an existing browser instance in case of Chromium family browsers.
     */
    cdpEndpoint?: string;

    /**
     * CDP headers to send with the connect request.
     */
    cdpHeaders?: Record<string, string>;

    /**
     * Timeout in milliseconds for connecting to CDP endpoint. Defaults to 30000 (30 seconds). Pass 0 to disable timeout.
     */
    cdpTimeout?: number;

    /**
     * Remote endpoint to connect to an existing Playwright server.
     */
    remoteEndpoint?: string;

    /**
     * Paths to TypeScript files to add as initialization scripts for Playwright page.
     */
    initPage?: string[];

    /**
     * Paths to JavaScript files to add as initialization scripts.
     * The scripts will be evaluated in every page before any of the page's scripts.
     */
    initScript?: string[];
  },

  server?: {
    /**
     * The port to listen on for SSE or MCP transport.
     */
    port?: number;

    /**
     * The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
     */
    host?: string;

    /**
     * The hosts this server is allowed to serve from. Defaults to the host server is bound to.
     * This is not for CORS, but rather for the DNS rebinding protection.
     */
    allowedHosts?: string[];
  },

  /**
   * List of enabled tool capabilities. Possible values:
   *   - 'core': Core browser automation features.
   *   - 'pdf': PDF generation and manipulation.
   *   - 'vision': Coordinate-based interactions.
   */
  capabilities?: ToolCapability[];

  /**
   * Whether to save the Playwright session into the output directory.
   */
  saveSession?: boolean;

  /**
   * Whether to save the Playwright trace of the session into the output directory.
   */
  saveTrace?: boolean;

  /**
   * If specified, saves the Playwright video of the session into the output directory.
   */
  saveVideo?: {
    width: number;
    height: number;
  };

  /**
   * Reuse the same browser context between all connected HTTP clients.
   */
  sharedBrowserContext?: boolean;

  /**
   * Secrets are used to prevent LLM from getting sensitive data while
   * automating scenarios such as authentication.
   * Prefer the browser.contextOptions.storageState over secrets file as a more secure alternative.
   */
  secrets?: Record<string, string>;

  /**
   * The directory to save output files.
   */
  outputDir?: string;

  /**
   * Whether to save snapshots, console messages, network logs and other session logs to a file or to the standard output. Defaults to "stdout".
   */
  outputMode?: 'file' | 'stdout';

  console?: {
    /**
     * The level of console messages to return. Each level includes the messages of more severe levels. Defaults to "info".
     */
    level?: 'error' | 'warning' | 'info' | 'debug';
  },

  network?: {
    /**
     * List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
     */
    allowedOrigins?: string[];

    /**
     * List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
     */
    blockedOrigins?: string[];
  };

  /**
   * Specify the attribute to use for test ids, defaults to "data-testid".
   */
  testIdAttribute?: string;

  timeouts?: {
    /*
     * Configures default action timeout: https://playwright.dev/docs/api/class-page#page-set-default-timeout. Defaults to 5000ms.
     */
    action?: number;

    /*
     * Configures default navigation timeout: https://playwright.dev/docs/api/class-page#page-set-default-navigation-timeout. Defaults to 60000ms.
     */
    navigation?: number;
  };

  /**
   * Whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them.
   */
  imageResponses?: 'allow' | 'omit';

  snapshot?: {
    /**
     * When taking snapshots for responses, specifies the mode to use.
     */
    mode?: 'incremental' | 'full' | 'none';
  };

  /**
   * Whether to allow file uploads from anywhere on the file system.
   * By default (false), file uploads are restricted to paths within the MCP roots only.
   */
  allowUnrestrictedFileAccess?: boolean;

  /**
   * Specify the language to use for code generation.
   */
  codegen?: 'typescript' | 'none';
}

独立 MCP 服务器

当在没有显示器的系统上运行有头浏览器，或从 IDE 的工作进程中运行时，请在具有 DISPLAY 环境的环境中运行 MCP 服务器，并传递 --port 标志以启用 HTTP 传输。

bash

npx @playwright/mcp@latest --port 8931

然后在 MCP 客户端配置中，将 url 设置为 HTTP 端点：

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

Docker

注意： Docker 实现目前仅支持无头模式的 Chromium。

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
    }
  }
}

或者，如果你更喜欢将容器作为长期运行的服务运行，而不是让 MCP 客户端生成它，请使用：

docker run -d -i --rm --init --pull=always \
  --entrypoint node \
  --name playwright \
  -p 8931:8931 \
  mcr.microsoft.com/playwright/mcp \
  cli.js --headless --browser chromium --no-sandbox --port 8931

服务器将监听主机端口 8931，可被任何 MCP 客户端访问。

你可以自己构建 Docker 镜像。

docker build -t mcr.microsoft.com/playwright/mcp .

编程方式使用

import http from 'http';

import { createConnection } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

http.createServer(async (req, res) => {
  // ...

  // 创建一个使用 SSE 传输的无头 Playwright MCP 服务器
  const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
  const transport = new SSEServerTransport('/messages', res);
  await connection.connect(transport);

  // ...
});

工具

核心自动化

browser_click
- 标题：点击
- 描述：在网页上执行点击操作
- 参数：
  - element (string, 可选)：用于获取与元素交互权限的人类可读元素描述
  - ref (string)：页面快照中精确的目标元素引用
  - doubleClick (boolean, 可选)：是否执行双击而不是单击
  - button (string, 可选)：要点击的按钮，默认为左键
  - modifiers (array, 可选)：要按下的修饰键
- 只读：false

browser_close
- 标题：关闭浏览器
- 描述：关闭页面
- 参数：无
- 只读：false

browser_console_messages
- 标题：获取控制台消息
- 描述：返回所有控制台消息
- 参数：
  - level (string)：要返回的控制台消息级别。每个级别包含更严重级别的消息。默认为 "info"。
  - filename (string, 可选)：将控制台消息保存到的文件名。如果未提供，消息将以文本形式返回。
- 只读：true

browser_drag
- 标题：拖动鼠标
- 描述：在两个元素之间执行拖放操作
- 参数：
  - startElement (string)：用于获取与元素交互权限的人类可读源元素描述
  - startRef (string)：页面快照中精确的源元素引用
  - endElement (string)：用于获取与元素交互权限的人类可读目标元素描述
  - endRef (string)：页面快照中精确的目标元素引用
- 只读：false

browser_evaluate
- 标题：执行 JavaScript
- 描述：在页面或元素上执行 JavaScript 表达式
- 参数：
  - function (string)：() => { /* code / } 或提供元素时的 (element) => { / code */ }
  - element (string, 可选)：用于获取与元素交互权限的人类可读元素描述
  - ref (string, 可选)：页面快照中精确的目标元素引用
- 只读：false

browser_file_upload
- 标题：上传文件
- 描述：上传一个或多个文件
- 参数：
  - paths (array, 可选)：要上传文件的绝对路径。可以是单个文件或多个文件。如果省略，文件选择器将被取消。
- 只读：false

browser_fill_form
- 标题：填写表单
- 描述：填写多个表单字段
- 参数：
  - fields (array)：要填写的字段
- 只读：false

browser_handle_dialog
- 标题：处理对话框
- 描述：处理对话框
- 参数：
  - accept (boolean)：是否接受对话框。
  - promptText (string, 可选)：提示对话框中的提示文本。
- 只读：false

browser_hover
- 标题：鼠标悬停
- 描述：在页面元素上悬停
- 参数：
  - element (string, 可选)：用于获取与元素交互权限的人类可读元素描述
  - ref (string)：页面快照中精确的目标元素引用
- 只读：false

browser_navigate
- 标题：导航到 URL
- 描述：导航到 URL
- 参数：
  - url (string)：要导航到的 URL
- 只读：false

browser_navigate_back
- 标题：返回
- 描述：返回到历史记录中的上一页
- 参数：无
- 只读：false

browser_network_requests
- 标题：列出网络请求
- 描述：返回自加载页面以来的所有网络请求
- 参数：
  - includeStatic (boolean)：是否包含成功的静态资源，如图像、字体、脚本等。默认为 false。
  - filename (string, 可选)：将网络请求保存到的文件名。如果未提供，请求将以文本形式返回。
- 只读：true

browser_press_key
- 标题：按键
- 描述：在键盘上按键
- 参数：
  - key (string)：要按下的键名称或要生成的字符，例如 ArrowLeft 或 a
- 只读：false

browser_resize
- 标题：调整浏览器窗口大小
- 描述：调整浏览器窗口大小
- 参数：
  - width (number)：浏览器窗口的宽度
  - height (number)：浏览器窗口的高度
- 只读：false

browser_run_code
- 标题：运行 Playwright 代码
- 描述：运行 Playwright 代码片段
- 参数：
  - code (string)：包含要执行的 Playwright 代码的 JavaScript 函数。将使用单个参数 page 调用，你可以将其用于任何页面交互。例如：async (page) => { await page.getByRole('button', { name: 'Submit' }).click(); return await page.title(); }
- 只读：false

browser_select_option
- 标题：选择选项
- 描述：在下拉列表中选择选项
- 参数：
  - element (string, 可选)：用于获取与元素交互权限的人类可读元素描述
  - ref (string)：页面快照中精确的目标元素引用
  - values (array)：在下拉列表中选择的值数组。可以是单个值或多个值。
- 只读：false

browser_snapshot
- 标题：页面快照
- 描述：捕获当前页面的无障碍快照，这比截图更好
- 参数：
  - filename (string, 可选)：将快照保存到 markdown 文件而不是在响应中返回。
- 只读：true

browser_take_screenshot
- 标题：截图
- 描述：截取当前页面的屏幕截图。你不能基于截图执行操作，请使用 browser_snapshot 进行操作。
- 参数：
  - type (string)：截图的图像格式。默认为 png。
  - filename (string, 可选)：保存截图的文件名。如果未指定，默认为 page-{timestamp}.{png|jpeg}。建议使用相对文件名以保持在输出目录内。
  - element (string, 可选)：用于获取截图元素权限的人类可读元素描述。如果未提供，将截取视口的屏幕截图。如果提供了 element，则必须提供 ref。
  - ref (string, 可选)：页面快照中精确的目标元素引用。如果未提供，将截取视口的屏幕截图。如果提供了 ref，则必须提供 element。
  - fullPage (boolean, 可选)：为 true 时，截取整个可滚动页面的屏幕截图，而不是当前可见的视口。不能用于元素屏幕截图。
- 只读：true

browser_type
- 标题：输入文本
- 描述：在可编辑元素中输入文本
- 参数：
  - element (string, 可选)：用于获取与元素交互权限的人类可读元素描述
  - ref (string)：页面快照中精确的目标元素引用
  - text (string)：要在元素中输入的文本
  - submit (boolean, 可选)：是否提交输入的文本（之后按 Enter）
  - slowly (boolean, 可选)：是否一次输入一个字符。对于触发页面中的键处理器很有用。默认情况下，整个文本将一次性填入。
- 只读：false

browser_wait_for
- 标题：等待
- 描述：等待文本出现或消失或经过指定时间
- 参数：
  - time (number, 可选)：要等待的秒数
  - text (string, 可选)：要等待的文本
  - textGone (string, 可选)：要等待消失的文本
- 只读：false

标签页管理

browser_tabs
- 标题：管理标签页
- 描述：列表、创建、关闭或选择浏览器标签页。
- 参数：
  - action (string)：要执行的操作
  - index (number, 可选)：标签页索引，用于关闭/选择。如果关闭时省略，将关闭当前标签页。
- 只读：false

浏览器安装

browser_install
- 标题：安装配置中指定的浏览器
- 描述：安装配置中指定的浏览器。如果收到浏览器未安装的错误，请调用此方法。
- 参数：无
- 只读：false

基于坐标的交互（通过 --caps=vision 可选启用）

browser_mouse_click_xy
- 标题：点击
- 描述：在给定位置点击鼠标左键
- 参数：
  - x (number)：X 坐标
  - y (number)：Y 坐标
- 只读：false

browser_mouse_down
- 标题：按下鼠标
- 描述：按下鼠标
- 参数：
  - button (string, 可选)：要按下的按钮，默认为左键
- 只读：false

browser_mouse_drag_xy
- 标题：拖动鼠标
- 描述：将鼠标左键拖动到给定位置
- 参数：
  - startX (number)：起始 X 坐标
  - startY (number)：起始 Y 坐标
  - endX (number)：结束 X 坐标
  - endY (number)：结束 Y 坐标
- 只读：false

browser_mouse_move_xy
- 标题：移动鼠标
- 描述：将鼠标移动到给定位置
- 参数：
  - x (number)：X 坐标
  - y (number)：Y 坐标
- 只读：false

browser_mouse_up
- 标题：释放鼠标
- 描述：释放鼠标
- 参数：
  - button (string, 可选)：要按下的按钮，默认为左键
- 只读：false

browser_mouse_wheel
- 标题：滚动鼠标滚轮
- 描述：滚动鼠标滚轮
- 参数：
  - deltaX (number)：X 增量
  - deltaY (number)：Y 增量
- 只读：false

PDF 生成（通过 --caps=pdf 可选启用）

browser_pdf_save
- 标题：保存为 PDF
- 描述：将页面保存为 PDF
- 参数：
  - filename (string, 可选)：保存 pdf 的文件名。如果未指定，默认为 page-{timestamp}.pdf。建议使用相对文件名以保持在输出目录内。
- 只读：true

测试断言（通过 --caps=testing 可选启用）

browser_generate_locator
- 标题：为元素创建定位器
- 描述：为给定元素生成用于测试的定位器
- 参数：
  - element (string, 可选)：用于获取与元素交互权限的人类可读元素描述
  - ref (string)：页面快照中精确的目标元素引用
- 只读：true

browser_verify_element_visible
- 标题：验证元素可见
- 描述：验证元素在页面上可见
- 参数：
  - role (string)：元素的角色。可以在快照中找到，格式为：- {ROLE} "Accessible Name":
  - accessibleName (string)：元素的无障碍名称。可以在快照中找到，格式为：- role "{ACCESSIBLE_NAME}"
- 只读：false

browser_verify_list_visible
- 标题：验证列表可见
- 描述：验证列表在页面上可见
- 参数：
  - element (string)：人类可读的列表描述
  - ref (string)：指向列表的精确目标元素引用
  - items (array)：要验证的项目
- 只读：false

browser_verify_text_visible
- 标题：验证文本可见
- 描述：验证文本在页面上可见。如果可能，请优先使用 browser_verify_element_visible。
- 参数：
  - text (string)：要验证的文本。可以在快照中找到，格式为：- role "Accessible Name": {TEXT} 或：- text: {TEXT}
- 只读：false

browser_verify_value
- 标题：验证值
- 描述：验证元素值
- 参数：
  - type (string)：元素类型
  - element (string)：人类可读的元素描述
  - ref (string)：指向元素的精确目标元素引用
  - value (string)：要验证的值。对于复选框，使用 "true" 或 "false"。
- 只读：false

跟踪（通过 --caps=tracing 可选启用）

browser_start_tracing
- 标题：开始跟踪
- 描述：开始跟踪记录
- 参数：无
- 只读：true

browser_stop_tracing
- 标题：停止跟踪
- 描述：停止跟踪记录
- 参数：无
- 只读：true

使用示例1

在修复过程中，playwright需要打开博主管理->点击更多操作->点击历史合同->弹出对话框，这个过程虽然可以实现，但每次需要很长时间且时间长短不一。经验的办法是，中间遇到问题可以适当提醒，一旦playwright操作正确，就让它写一个skill，保存起来方便它下次调用。这样每次大模型修复完代码，再次验证时，就可以马上打开页面并弹出历史合同对话框,验证控制台有没有报错信息、页面是否正常加载和显示了。

需求对话

### All User Messages

"用playwright验证"
"已经打开了页面http://localhost:5666/Creator/CreatorBusiness"
"检查控制台的报错和报警"
"停止检查这个错误，跟这个页面没有关系"
"停止检查这个错误"
"操作列一共两个按钮，点击后面一个。"
"将这个查看历史合同的过程，写成一个skill文件。每次用playwright时调取这个skill"
"利用skill打开历史合同弹窗，修复控制台警告和显示加载问题，直至修复完成。"

上下文压缩-摘要

此会话是从因上下文耗尽而终止的先前对话中继续的。对话摘要如下： **分析**：让我按时间顺序分析这个对话：

初始上下文：这是从之前会话的延续，之前实现了一个"历史合同"功能，用于在模态框中查看创作者合同历史。
用户请求1："用playwright验证" - 用户希望我使用 Playwright 验证该功能
- 我开始检查环境并尝试导航到创作者业务页面
- 用户已经打开了 http://localhost:5666/Creator/CreatorBusiness
用户请求2："检查控制台的报错和报警" - 检查控制台错误和警告
- 发现了关于 platform_id 的数据库列错误
- 用户阻止我："停止检查这个错误，跟这个页面没有关系"
- 稍后："停止检查这个错误"
用户请求3："操作列一共两个按钮，点击后面一个"
- 这是关于如何与操作列交互的重要反馈
- 第二个按钮打开一个下拉菜单，其中包含多个选项，包括"历史合同"
用户请求4："将这个查看历史合同的过程，写成一个skill文件。每次用playwright时调取这个skill"
- 在 \.claude\skills\view-creator-contract-history.md 创建了 skill 文件
用户请求5 (当前)："利用skill打开历史合同弹窗，修复控制台警告和显示加载问题，直至修复完成"
- 使用 skill 打开模态框
- 修复关于 loading prop 类型的控制台警告
- 修复 loading 显示问题
- 持续直到完全解决

关键错误和修复

- 错误1：`TypeError: this.grid.commitProxy is not a function` - 通过从 gridOptions 中移除 `data: contractList` 并使用手动的 `gridApi.grid.loadData(list)` 修复

错误2：Invalid prop: type check failed for prop "loading". Expected Boolean, got Object/Function
- 第一次尝试：将 loading: loading 改为 loading: () => loading.value - 仍然收到"Expected Boolean, got Function"
- 第二次尝试：创建了 loadingState computed 属性 - 仍然收到"Expected Boolean, got Object"
- 当前修复尝试：完全从 gridOptions 中移除了 loading

修复反馈

- 好的，我先调用 skill 打开历史合同弹窗来查看问题： - 弹窗已打开！我看到警告。让我修复这个问题。

基本信息 ​

安装命令 ​

Playwright MCP ​

核心特性 ​

系统要求 ​

快速开始 ​

点击按钮安装： ​

或手动安装： ​

配置选项 ​

用户配置文件 ​

初始状态 ​

配置文件 ​

独立 MCP 服务器 ​

工具 ​

使用示例1 ​

基本信息

安装命令

Playwright MCP

核心特性

系统要求

快速开始

点击按钮安装：

或手动安装：

配置选项

用户配置文件

初始状态

配置文件

独立 MCP 服务器

工具

使用示例1