微软自动化神器 Playwright ：零基础轻松玩转 Web 自动化测试与爬虫

一、Playwright 是什么？为什么选择它？

1.1 工具简介

Playwright 是由微软开发的开源自动化测试工具，支持 Chromium（Chrome、Edge）、Firefox 和 WebKit（Safari）三大浏览器引擎。它通过统一的 API 实现跨浏览器、跨平台（Windows、macOS、Linux）的自动化操作，适用于 Web 自动化测试、数据采集、表单提交、截图录制等多种场景。

1.2 核心优势

跨浏览器兼容性：支持主流浏览器，无需为不同浏览器编写多套代码。
自动等待机制：智能等待页面元素加载完成，减少因网络延迟导致的测试失败。
录制与调试工具：内置 Codegen 录制脚本生成功能，支持实时调试和元素定位验证。
异步与同步模式：支持 Python、JavaScript 等语言的同步/异步编程，提升执行效率。
多语言支持：提供 Python、Java、C#、Node.js 等多种语言绑定。

二、环境安装与配置

2.1 安装 Node.js 和 Python

Node.js：访问 Node.js 官网下载并安装（需 12+ 版本)。
Python：推荐 Python 3.8+，通过 Python 官网安装并配置环境变量。

2.2 安装 Playwright

Python 环境

# 安装 Playwright 库
pip install playwright

# 安装浏览器驱动（Chromium、Firefox、WebKit）
playwright install

Node.js 环境

# 初始化项目
npm init -y

# 安装 Playwright
npm install playwright

三、快速上手：第一个自动化脚本

3.1 Python 同步模式示例

以下代码打开浏览器访问网页并截图保存：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动 Chromium 浏览器（无头模式默认开启）
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://playwright.dev")
    page.screenshot(path="example.png")
    browser.close()

3.2 Node.js 异步模式示例

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://playwright.dev');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

运行结果：脚本执行后会在当前目录生成 example.png 文件，展示页面截图。

四、核心功能详解

4.1 元素定位与操作

Playwright 支持多种元素定位方式，包括 CSS、XPath、文本匹配等：

# 通过 CSS 选择器定位
page.locator("button#submit").click()

# 通过文本匹配定位
page.locator("text='登录'").click()

# 通过 XPath 定位
page.locator("//div[@class='header']").hover()

高级技巧：

可见性过滤：button:visible 仅操作可见元素。
链式选择器：div.dialog >> text=”确定” 实现层级定位。

4.2 表单操作与文件上传

解释

# 填写表单 page.fill(“input[name='username']”, “test_user”) page.select_option(“select#country”, “China”) # 文件上传 page.set_input_files(“input[type='file']”, “path/to/file.txt”)

4.3 录制脚本生成

通过 Codegen 工具自动生成操作脚本：

# 启动录制（Python 示例）
playwright codegen https://example.com

执行命令后，操作浏览器界面即可实时生成代码47。

五、高级功能与实战案例

5.1 追踪测试执行（Trace Viewer）

记录测试过程的详细日志，便于排查问题：

context = browser.new_context()
context.tracing.start(screenshots=True, snapshots=True)
# 执行操作...
context.tracing.stop(path="trace.zip")

通过 npx playwright show-trace trace.zip 查看日志。

5.2 多浏览器并行测试

在配置文件中指定多浏览器项目（playwright.config.ts）：

// 示例：同时测试 Edge 和 Firefox
const config = {
  projects: [
    { name: 'Edge', use: { channel: 'msedge' } },
    { name: 'Firefox', use: { browserName: 'firefox' } }
  ]
};

5.3 实战案例：爬取网页数据

async def scrape_data():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto("https://example.com/books")
        titles = await page.eval_on_selector_all(".book-title", "elements => elements.map(e => e.textContent)")
        print(titles)
        await browser.close()

六、同步与异步模式选择

同步模式：代码顺序执行，适合简单场景（如 Python 的 sync_api）。
异步模式：通过 async/await 提升并发效率，适合复杂任务（如批量请求）。

Python 异步示例：

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto("https://example.com")
        await page.screenshot(path="async_example.png")
        await browser.close()

asyncio.run(main())

七、总结与学习提议

7.1 Playwright 的核心价值

高效稳定：自动等待和智能重试机制减少脚本失败率。
功能全面：覆盖测试、爬虫、监控等多种场景。
生态丰富：活跃的社区和详细的文档支持。

7.2 学习资源推荐

官方文档：https://playwright.dev/
GitHub 仓库：https://github.com/microsoft/playwright
实战项目：尝试从录制脚本开始，逐步过渡到复杂场景。

MCP 的核心要义在于使 AI 模型不单能够生成文本，更能够直接调用外部工具来达成任务。Playwright 所具备的浏览器自动化功能（诸如页面导航、表单填写、截图等等）能够充当 MCP 的关键执行层级，助力 AI 完成诸如自动提交工单、爬取数据之类的网页操作任务，进而将 AI 的“思考”转化为切实的行动。Playwright 凭借其提供的稳定且高效的浏览器自动化能力，成为 MCP 达成“AI 驱动行动”的重大技术支撑，推动 AI 由被动应答的范式朝着主动执行的范式进阶。

感谢点赞关注收藏：）

微软自动化神器 Playwright ：零基础轻松玩转 Web 自动化测试与爬虫