## 目录 1. [概述](#概述) 2. [Puppeteer](#puppeteer) 3. [Playwright](#playwright) 4. [Selenium](#selenium) 5. [对比总览](#对比总览) 6. [选型建议](#选型建议) --- ## 概述 | 特性 | Puppeteer | Playwright | Selenium | |------|-----------|------------|----------| | **开发者** | Google | Microsoft | 社区（OpenQA / SeleniumHQ） | | **首次发布** | 2017 | 2020 | 2004 | | **底层协议** | Chrome DevTools Protocol (CDP) | CDP + 自定义协议 | WebDriver (W3C 标准) | | **支持的浏览器** | Chromium（Chrome/Edge） | Chromium + Firefox + WebKit (Safari) | Chrome, Firefox, Safari, Edge, IE 等 | | **主要语言** | JavaScript/TypeScript | JavaScript/TypeScript, Python, Java, .NET | Java, Python, C#, Ruby, JavaScript, Kotlin 等 | | **核心定位** | 浏览器控制库 | 跨浏览器自动化（现代 Web） | 跨浏览器自动化（标准化） | --- ## Puppeteer Puppeteer 是 Google 开发的一个 **Node.js 库**，通过 Chrome DevTools Protocol (CDP) 直接控制 Chromium 浏览器。它的 API 设计简洁直观，在 **Chrome/Chromium 生态**中表现最佳。 ### 特点 - ✅ 专为 Chromium 优化，性能极高 - ✅ 内置截图、PDF 生成功能 - ✅ 支持无头模式与 UI 模式 - ✅ 优秀的网络请求拦截能力 - ✅ 与 Chrome DevTools 深度集成 - ❌ **仅支持 Chromium**（不支持 Firefox / Safari） - ❌ 仅限 JavaScript/TypeScript ### 使用示例 #### Node.js ```javascript const puppeteer = require('puppeteer'); (async () => { // 启动浏览器 const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); // 导航到页面 await page.goto('https://example.com', { waitUntil: 'networkidle2' }); // 截图 await page.screenshot({ path: 'screenshot.png', fullPage: true }); // 获取页面标题 const title = await page.title(); console.log('页面标题:', title); // 点击元素 await page.click('button#submit'); // 在输入框中输入文本 await page.type('input#search', 'Puppeteer'); // 获取元素文本 const text = await page.$eval('h1', el => el.textContent); console.log('h1 文本:', text); // 关闭浏览器 await browser.close(); })(); ``` #### TypeScript ```typescript import puppeteer from 'puppeteer'; async function run(): Promise { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.goto('https://example.com'); await page.setViewport({ width: 1920, height: 1080 }); // 等待元素出现 await page.waitForSelector('.content'); const title = await page.title(); console.log(`Title: ${title}`); // 获取元素属性 const href = await page.$eval('a', el => el.getAttribute('href')); await browser.close(); } run(); ``` #### 高级用法 — 拦截网络请求 ```javascript // 拦截并修改网络请求 await page.setRequestInterception(true); page.on('request', request => { if (request.url().includes('analytics')) { request.abort(); // 阻止分析脚本加载 } else { request.continue(); } }); // 监听响应 page.on('response', response => { console.log(`${response.status()}: ${response.url()}`); }); ``` > **注意**：Puppeteer 没有官方的 Python/Java 版本，社区维护的 `pyppeteer` 是其 Python 移植。 --- ## Playwright Playwright 是 Microsoft 开发的新一代端到端测试框架。它的 API 跨语言高度一致，同时支持 **Chromium、Firefox 和 WebKit**，是目前最活跃的自动化工具之一。 ### 特点 - ✅ **真正的跨浏览器**：一套 API 覆盖 Chrome、Firefox、Safari - ✅ 自动等待元素就绪，减少 `waitFor` 调用 - ✅ 内置浏览器上下文（Context）隔离，适合多用户场景 - ✅ 支持移动端设备模拟 - ✅ 网络拦截与 Mock API - ✅ 官方支持 **JS/TS、Python、Java、.NET** - ✅ 自动追踪（Trace Viewer）用于调试 - ❌ 不支持 IE 等老旧浏览器 ### 使用示例 #### Node.js ```javascript const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: false }); const page = await browser.newPage(); await page.goto('https://example.com'); // 自动等待 —— Playwright 会自动等待元素可操作 await page.click('button#submit'); await page.fill('input#search', 'Playwright'); // 截图 await page.screenshot({ path: 'screenshot.png', fullPage: true }); // 获取页面标题 const title = await page.title(); console.log('页面标题:', title); // 获取文本 const text = await page.textContent('h1'); // 切换浏览器 —— 只需将 chromium 替换为 firefox 或 webkit await browser.close(); })(); ``` #### Python ```python import asyncio from playwright.async_api import async_playwright async def main(): async with async_playwright() as p: # 启动浏览器（可切换 firefox / chromium / webkit） browser = await p.chromium.launch(headless=False) page = await browser.new_page() await page.goto("https://example.com") # 截图 await page.screenshot(path="screenshot.png", full_page=True) # 点击与输入 —— 自动等待 await page.click("button#submit") await page.fill("input#search", "Playwright") # 获取内容 title = await page.title() print(f"页面标题: {title}") h1_text = await page.text_content("h1") print(f"h1 文本: {h1_text}") # 浏览器上下文 —— 模拟移动设备 iphone = p.devices["iPhone 13"] context = await browser.new_context(**iphone) mobile_page = await context.new_page() await mobile_page.goto("https://example.com") await browser.close() asyncio.run(main()) ``` #### Python（同步模式） ```python from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("https://example.com") page.screenshot(path="example.png") page.fill("input#search", "Playwright") page.click("button#submit") print(page.title()) browser.close() ``` #### Java ```java import com.microsoft.playwright.*; import java.util.*; public class PlaywrightExample { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { Browser browser = playwright.chromium().launch( new BrowserType.LaunchOptions().setHeadless(false) ); Page page = browser.newPage(); page.navigate("https://example.com"); page.screenshot(new Page.ScreenshotOptions() .setPath(Paths.get("screenshot.png")) .setFullPage(true)); page.fill("input#search", "Playwright"); page.click("button#submit"); String title = page.title(); System.out.println("页面标题: " + title); String h1 = page.textContent("h1"); System.out.println("h1: " + h1); browser.close(); } } } ``` #### .NET (C#) ```csharp using Microsoft.Playwright; var playwright = await Playwright.CreateAsync(); var browser = await playwright.Chromium.LaunchAsync(new() { Headless = false }); var page = await browser.NewPageAsync(); await page.GotoAsync("https://example.com"); await page.ScreenshotAsync(new() { Path = "screenshot.png", FullPage = true }); await page.FillAsync("input#search", "Playwright"); await page.ClickAsync("button#submit"); var title = await page.TitleAsync(); Console.WriteLine($"页面标题: {title}"); await browser.CloseAsync(); ``` #### 高级用法 — API Mock ```javascript // 拦截 API 并返回 Mock 数据 await page.route('**/api/users', route => { route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([{ id: 1, name: 'Mock User' }]) }); }); // 多浏览器并行测试 const browsers = ['chromium', 'firefox', 'webkit']; for (const browserType of browsers) { const browser = await playwright[browserType].launch(); // ... 测试代码 } ``` --- ## Selenium Selenium 是最老牌、最成熟的浏览器自动化工具。它采用 **WebDriver 协议**（现为 W3C 标准），支持几乎所有浏览器，生态极为丰富。 ### 特点 - ✅ **浏览器支持最广**：Chrome、Firefox、Safari、Edge、IE 等 - ✅ **语言支持最全**：Java、Python、C#、Ruby、JavaScript、Kotlin 等 - ✅ 社区庞大、资料丰富、问题容易找到解答 - ✅ Selenium Grid 支持分布式测试 - ❌ API 相对底层，需要手动等待（显式/隐式等待） - ❌ 速度相对较慢（标准化协议带来额外开销） - ❌ 设置复杂（需要 WebDriver 驱动） ### 使用示例 #### Python ```python from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC # 设置 Chrome 驱动（自动管理） from selenium.webdriver.chrome.service import Service from webdriver_manager.chrome import ChromeDriverManager # 启动浏览器 driver = webdriver.Chrome(service=Service(ChromeDriverManager().install())) try: # 导航 driver.get("https://example.com") # 显式等待 wait = WebDriverWait(driver, 10) element = wait.until(EC.presence_of_element_located((By.TAG_NAME, "h1"))) # 截图 driver.save_screenshot("screenshot.png") # 查找元素 title = driver.title print(f"页面标题: {title}") # 输入文本 search_box = driver.find_element(By.ID, "search") search_box.send_keys("Selenium") search_box.send_keys(Keys.RETURN) # 点击元素 driver.find_element(By.ID, "submit").click() # 获取元素文本 h1 = driver.find_element(By.TAG_NAME, "h1").text print(f"h1: {h1}") finally: driver.quit() ``` #### Java ```java import org.openqa.selenium.*; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.chrome.ChromeOptions; import org.openqa.selenium.support.ui.WebDriverWait; import org.openqa.selenium.support.ui.ExpectedConditions; import org.openqa.selenium.By; import io.github.bonigarcia.wdm.WebDriverManager; import java.time.Duration; public class SeleniumExample { public static void main(String[] args) { // 自动管理 ChromeDriver WebDriverManager.chromedriver().setup(); ChromeOptions options = new ChromeOptions(); // options.addArguments("--headless"); WebDriver driver = new ChromeDriver(options); try { driver.get("https://example.com"); // 显式等待 WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10)); wait.until(ExpectedConditions.presenceOfElementLocated(By.tagName("h1"))); // 截图 File screenshot = ((TakesScreenshot) driver) .getScreenshotAs(OutputType.FILE); // FileUtils.copyFile(screenshot, new File("screenshot.png")); // 获取标题 String title = driver.getTitle(); System.out.println("页面标题: " + title); // 输入文本 WebElement searchBox = driver.findElement(By.id("search")); searchBox.sendKeys("Selenium"); searchBox.sendKeys(Keys.RETURN); // 点击 driver.findElement(By.id("submit")).click(); // 获取文本 String h1 = driver.findElement(By.tagName("h1")).getText(); System.out.println("h1: " + h1); } finally { driver.quit(); } } } ``` #### Node.js ```javascript const { Builder, By, until } = require('selenium-webdriver'); const chrome = require('selenium-webdriver/chrome'); (async () => { const driver = await new Builder() .forBrowser('chrome') .setChromeOptions(new chrome.Options()) // .headless() 可开启无头模式 .build(); try { await driver.get('https://example.com'); // 显式等待 await driver.wait(until.elementLocated(By.tagName('h1')), 10000); // 截图 await driver.takeScreenshot().then(data => { require('fs').writeFileSync('screenshot.png', data, 'base64'); }); // 标题 const title = await driver.getTitle(); console.log('页面标题:', title); // 输入文本 await driver.findElement(By.id('search')).sendKeys('Selenium'); await driver.findElement(By.id('submit')).click(); // 获取文本 const h1 = await driver.findElement(By.tagName('h1')).getText(); console.log('h1:', h1); } finally { await driver.quit(); } })(); ``` #### 高级用法 — Selenium Grid（分布式测试） ```python from selenium import webdriver from selenium.webdriver.common.by import By # 连接到 Selenium Grid Hub chrome_options = webdriver.ChromeOptions() driver = webdriver.Remote( command_executor="http://localhost:4444/wd/hub", options=chrome_options ) driver.get("https://example.com") print(driver.title) driver.quit() ``` --- ## 对比总览 | 维度 | Puppeteer | Playwright | Selenium | |------|-----------|------------|----------| | **浏览器数量** | 1（Chromium） | 3（Chromium + Firefox + WebKit） | 几乎所有（含 IE） | | **语言覆盖** | JS/TS（仅官方） | JS/TS, Python, Java, .NET | Java, Python, C#, Ruby, JS, Kotlin 等 | | **安装复杂度** | 低（npm install） | 低（npm/pip install + 自动下载浏览器） | 中（需安装 WebDriver 驱动） | | **API 现代化程度** | ★★★★★ | ★★★★★ | ★★★☆☆ | | **自动等待机制** | 需手动 waitFor | 内置自动等待 | 需显式/隐式等待 | | **执行速度** | 快 | 快 | 中等 | | **移动端模拟** | 手动设置 | 内置设备列表 | 需手动设置 | | **网络 Mock** | 支持 | 支持（更强大） | 不直接支持 | | **Trace/Debug** | CDP DevTools | Trace Viewer | DevTools 需额外配置 | | **社区生态** | 成熟 | 快速增长 | 最成熟 | | **CI/CD 集成** | 容易 | 容易 | 中等 | --- ## 选型建议 ### 🏆 什么时候选 Puppeteer？ - **你只需要测试 Chrome/Chromium**（大多数 Web 应用如此） - 你需要 **截图、PDF 生成**功能（原生支持） - 你的项目全栈 **JavaScript/TypeScript** - 你需要精细控制网络请求 - 典型案例：Chrome 扩展测试、性能监控、爬虫 ### 🏆 什么时候选 Playwright？ - **你需要跨浏览器测试**（Chrome + Firefox + Safari） - 你在 **Python / Java / .NET / JS** 项目中工作 - 你希望 **测试稳定性更高**（自动等待减少 flaky 测试） - 你刚开始新项目 —— Playwright 是当前最推荐的测试框架 - 你需要 **API Mock** 或 **移动端模拟** - 典型案例：端到端测试、跨浏览器兼容性测试 ### 🏆 什么时候选 Selenium？ - 你需要在 **老旧浏览器（IE）** 上测试 - 你的项目已使用 Selenium，迁移成本高 - 你需要 **Selenium Grid** 大规模分布式测试 - 你的团队对 Selenium 生态最熟悉 - 你需要支持 **多种编程语言**，尤其是 Java - 典型案例：企业级回归测试、多浏览器兼容性矩阵 ### 总结 ```mermaid graph TD A[选择自动化工具] --> B{需要跨浏览器?} B -->|仅 Chrome| C[Puppeteer] B -->|Modern 浏览器| D[Playwright] B -->|含 IE/旧浏览器| E[Selenium] C --> F{语言需求} D --> F E --> F F -->|JS/TS| G[三者均可] F -->|Python| H[Playwright / Selenium] F -->|Java| I[Selenium / Playwright] F -->|.NET| J[Playwright / Selenium] ``` **一句话建议**： - 如果是 **新项目**且面向现代浏览器 → **Playwright** - 如果是 **Chrome-only + JS/TS** 项目 → **Puppeteer** - 如果是 **企业已有项目**或兼容老旧浏览器 → **Selenium** --- ## 安装速查 ### Puppeteer ```bash # npm npm install puppeteer # yarn yarn add puppeteer ``` ### Playwright ```bash # Node.js npm init playwright@latest # 或 npm install playwright npx playwright install # Python pip install playwright playwright install # Java（Maven） # pom.xml 中添加依赖 # # com.microsoft.playwright # playwright # 1.49.0 # # .NET dotnet add package Microsoft.Playwright ``` ### Selenium ```bash # Python pip install selenium pip install webdriver-manager # 自动管理驱动 # Node.js npm install selenium-webdriver # Java（Maven） # # org.seleniumhq.selenium # selenium-java # 4.28.0 # ``` --- ## 参考链接 - [Puppeteer 官方文档](https://pptr.dev/) - [Playwright 官方文档](https://playwright.dev/) - [Selenium 官方文档](https://www.selenium.dev/documentation/) - [Puppeteer GitHub](https://github.com/puppeteer/puppeteer) - [Playwright GitHub](https://github.com/microsoft/playwright) - [Selenium GitHub](https://github.com/SeleniumHQ/selenium)

文章列表

自动化测试工具对比：Puppeteer vs Playwright vs Selenium