Playwright Browser Automation

Playwright Browser Automation 是一个轻量级的浏览器自动化工具，基于 Playwright 提供对网页的结构化访问。它通过无障碍树（Accessibility Tree）进行操作，而非传统的截图方式，从而实现更精确、高效的网页交互。该工具适用于自动化测试、数据抓取、智能助手集成等多种场景。

核心功能

Playwright Browser Automation 提供了多种核心功能，支持结构化数据交互和浏览器自动化操作，包括：

• 快照模式：使用无障碍树捕获页面快照，提高性能和可靠性。
• 视觉模式：通过截图实现基于视觉的交互，适合需要精确定位的操作。
• 标签页管理：支持创建、切换和关闭浏览器标签页。
• 文件上传：允许上传单个或多个文件到网页。
• PDF 导出：将当前页面保存为 PDF 文件。

安装方法

Playwright Browser Automation 的安装非常简单，可以通过以下命令快速安装：

npx @playwright/mcp@latest

此外，也可以通过全局安装 Playwright 工具，以便进行更复杂的测试和自动化任务：

npm install -g playwright

安装完成后，可以创建一个新的项目目录并初始化 Playwright 项目：

mkdir my-playwright-project

cd my-playwright-project

playwright init --ts

使用方法

Playwright Browser Automation 提供了丰富的 API 接口，支持多种浏览器引擎，包括 Chrome、Firefox、WebKit 和 Edge。以下是一个基础的使用示例：

import { test, expect } from '@playwright/test';

test('搜索关键字', async ({ page }) => {
  // 打开浏览器
  await page.goto('https://www.baidu.com');
  // 输入搜索关键字
  await page.type('.kw', 'Playwright');
  // 点击搜索按钮
  await page.click('#su');
});

此外，还可以通过配置文件 `playwright.config.ts` 来设置浏览器参数，例如：

module.exports = {
  testDir: './tests',
  forbidOnly: !!process.env.CI,
  requireOrder: ['playwright/test/fetch'],
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    browser: 'chromium',
    chromium: {
      // 设置为无头模式
      headless: true,
      // 设置 viewport 大小
      viewport: { width: 1920, height: 1080 }
    },
    // 配置 firefox 或者 webkit 的参数
  },
};

使用场景

Playwright Browser Automation 适用于多种自动化场景，包括：

• 网页导航：自动点击链接、跳转页面。
• 表单填写：自动填写和提交表单。
• 数据抓取：从网页中提取结构化数据。
• 智能助手集成：与 AI 模型结合，实现自动化交互。

使用示例

以下是两个典型的使用示例：

• 表单填写示例：自动填写登录表单并提交。
• 数据抓取示例：从电商网站抓取商品价格。

通过调用 API 方法，如 `browser_click()`、`browser_type()` 等，可以实现对网页元素的精确操作。

配置说明

在客户端配置文件中，可以添加服务器地址以连接 Playwright MCP 服务器，例如：

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

该配置允许客户端与服务器进行通信，执行自动化任务。

注意事项

在使用 Playwright Browser Automation 时，需要注意以下几点：

• 首次运行时需要下载必要的浏览器组件。
• 某些高级功能需要特定的浏览器版本支持。
• 对高度依赖视觉反馈的任务可能表现不佳。

Playwright Browser Automation 通过结构化数据实现浏览器自动化，避免了传统截图方式的模糊性，提高了交互的准确性和效率。