1. 项目概述为什么是Playwright如果你最近在搞Web自动化测试或者网页数据抓取还在用Selenium或者Puppeteer那今天这个内容可能会让你换个思路。我最近把团队里几个老项目的自动化框架从Selenium迁移到了Playwright踩了不少坑也收获了不少惊喜。简单来说Playwright是一个由微软开源的现代化浏览器自动化库它支持Chromium、Firefox和WebKit三大浏览器引擎并且为它们提供了统一、强大且可靠的API。你可能听过Selenium它历史悠久生态庞大但稳定性问题、复杂的驱动管理和跨浏览器测试的“玄学”报错常常让人头疼。Puppeteer则专注于Chrome速度快API现代但跨浏览器支持是短板。Playwright的出现像是吸取了两者的优点它拥有Puppeteer般的现代API和性能又提供了Selenium梦寐以求的真正可靠的跨浏览器支持。更重要的是它在设计之初就考虑到了现代Web应用的特点——单页应用SPA、动态加载、Shadow DOM、网络拦截等处理起来得心应手。对于前端开发者、测试工程师、甚至是需要做大规模网页数据处理的同学Playwright都是一个值得投入时间学习的工具。它能帮你做自动化测试、生成网页截图或PDF、爬取动态渲染的数据甚至模拟复杂的用户交互流程。接下来我会带你从零开始搞定Playwright的安装并深入聊聊那些官方文档里不会细说的“坑”和技巧。2. 核心需求解析我们到底需要安装什么在动手敲命令之前我们先得搞清楚安装Playwright这个动作到底包含了哪些组件。很多人第一次安装时看到命令行里开始下载几百兆的浏览器会感到困惑甚至恐慌。别急我们拆开来看。2.1 Playwright的核心构成Playwright的安装包主要包含两部分Playwright库本身这是核心的Node.js包或者Python包、.NET包等取决于你使用的语言绑定。它提供了我们编写脚本时调用的所有API比如page.goto(),page.click(),page.waitForSelector()等。这个部分很小通常几兆就搞定了。浏览器二进制文件这是真正的大头。Playwright为了确保测试的稳定性和可重复性不依赖你系统上安装的Chrome或Firefox。相反它会下载自己管理的、经过特定版本匹配和优化的浏览器版本。这包括chromium Chrome的开源核心版本。firefox Mozilla Firefox。webkit Safari浏览器背后的引擎。当你执行playwright install或类似命令时它就会去下载这些浏览器。每个浏览器大约在150MB到300MB之间所以三个都下完磁盘空间占用可能在700MB到1GB左右。这是Playwright实现“开箱即用”和“一致性”的代价但在我看来这个代价非常值得。2.2 不同场景下的安装策略根据你的使用场景安装策略可以灵活调整只想试试水可以先只安装Playwright库然后在代码中指定使用已安装的、系统自带的Chrome通过channel参数。但这种方式不推荐用于正式项目因为环境不一致可能导致诡异的问题。主要做Chrome自动化这是最常见的情况。你可以只安装Chromium节省下载时间和磁盘空间。在90%的场景下Chromium已经足够。必须做跨浏览器兼容性测试那就需要安装全部三个浏览器。通常会在CI/CD持续集成/持续部署环境中这样配置确保每次构建都能在完全一致的环境下运行所有浏览器的测试套件。理解了这个构成我们再去看那些安装命令就不会觉得它是在“瞎搞”了。它是在为你搭建一个坚固、可靠的自动化地基。3. 环境准备与工具选型工欲善其事必先利其器。在安装Playwright之前我们需要确保基础环境是OK的。这里我以最流行的Node.js/Python两种环境为例.NETC#的流程也类似。3.1 Node.js 环境准备如果你主要使用JavaScript/TypeScript那么Node.js是必须的。检查Node.js版本打开终端命令行输入node -v。Playwright要求Node.js版本在14以上但我强烈建议使用最新的LTS长期支持版本比如18.x或20.x。新版本在性能和稳定性上通常更好。如果你的版本太旧去Node.js官网下载安装包覆盖安装即可。包管理器的选择npm是Node.js自带的但速度可能较慢。yarn或pnpm是更快的替代品。我个人目前更倾向于pnpm因为它采用硬链接节省磁盘空间安装速度也快。你可以根据团队习惯选择。确保你的包管理器能正常访问网络特别是能访问npm官方仓库或你配置的镜像源。项目初始化建议为你的Playwright项目创建一个独立的目录。进入目录后运行npm init -y或pnpm init来生成一个package.json文件这有助于管理依赖。3.2 Python 环境准备Python生态下Playwright同样强大特别受测试工程师和数据分析师的喜爱。检查Python版本终端输入python --version或python3 --version。Playwright for Python 要求 Python 3.7。同样建议使用3.8或3.10等稳定版本。使用虚拟环境强烈推荐这是Python开发的最佳实践可以避免不同项目间的依赖冲突。常用的工具有venvPython内置或conda。使用venv:# 在当前目录创建名为 venv 的虚拟环境 python3 -m venv venv # 激活虚拟环境 (Linux/macOS) source venv/bin/activate # 激活虚拟环境 (Windows) venv\Scripts\activate激活后你的命令行提示符前通常会显示(venv)表示你正在虚拟环境中操作。包管理工具使用pip进行安装。可以考虑使用pip install -U pip先升级pip到最新版。3.3 代码编辑器推荐虽然任何编辑器都能写Playwright脚本但一个好的IDE能极大提升效率。Visual Studio Code (VS Code)这是目前对Playwright支持最好的编辑器没有之一。微软官方提供了强大的Playwright Test扩展可以实现代码智能补全、测试用例管理、调试、甚至录制脚本等功能。如果你还没用VS Code强烈建议尝试。PyCharm (Python)JetBrains家的IDE对Python支持一流。安装Playwright插件后也能获得不错的支持。WebStorm (JavaScript/TypeScript)同样是JetBrains产品专注于前端开发对Playwright的支持也很好。选一个你顺手的就行但VS Code的Playwright生态是目前最完善的。4. 安装流程全解析从命令到原理好了基础打牢我们进入正题。安装Playwright本身非常简单但背后的细节值得深究。我会分语言详细说明并解释每个命令在做什么。4.1 Node.js / TypeScript 安装指南在准备好的项目目录下确保有package.json我们开始安装。第一步安装Playwright核心库打开终端执行以下命令之一# 使用 npm npm init playwrightlatest # 使用 yarn yarn create playwright # 使用 pnpm pnpm create playwright这个create命令是一个“脚手架”命令。它会做几件事询问你是否要安装Playwright当然选Yes。询问你使用哪种编程语言TypeScript还是JavaScript。我强烈推荐选择TypeScript即使你不熟悉TS。Playwright的API和类型提示在TS下体验极佳能避免很多低级错误VS Code的补全也会更强大。询问你是否要在项目根目录创建测试目录和示例文件建议选Yes方便学习。询问你是否要安装GitHub Actions工作流文件如果你用GitHub做CI可以选Yes。最关键的一步它会询问你是否要下载浏览器。这里通常选Yes。如果你网络不好可以先选No稍后再手动安装。执行完毕后你的package.json里会新增playwright/test依赖并且项目目录下会生成一些配置文件如playwright.config.ts和示例测试文件。第二步安装浏览器二进制文件如果上一步跳过了如果你在上一步跳过了浏览器下载或者后续想添加其他浏览器需要手动安装。# 安装所有支持的浏览器Chromium, Firefox, WebKit npx playwright install # 只安装Chromium npx playwright install chromium # 安装特定版本的Chromium npx playwright install chromiumstable # 安装稳定版 npx playwright install chromiumcanary # 安装金丝雀版这个npx playwright install命令就是去Playwright的专用服务器下载对应平台的浏览器二进制文件默认会存放在~/.cache/ms-playwrightLinux/macOS或%USERPROFILE%\AppData\Local\ms-playwrightWindows目录下。注意这里就是很多人遇到的“安装慢”或“失败”的环节。因为服务器可能在国外下载几百兆文件对某些网络环境是个挑战。别急后面有专门的“换源”和“离线安装”技巧。第三步验证安装创建一个简单的测试文件比如test-demo.jsconst { chromium } require(playwright); (async () { const browser await chromium.launch({ headless: false }); // 非无头模式让我们看到浏览器 const page await browser.newPage(); await page.goto(https://example.com); console.log(await page.title()); // 应该输出 Example Domain await page.screenshot({ path: example.png }); await browser.close(); })();然后运行node test-demo.js。如果一切正常你会看到一个浏览器窗口打开访问 example.com然后在控制台打印标题并在当前目录生成一张截图example.png。4.2 Python 安装指南在激活的Python虚拟环境中安装更加直接。第一步安装Playwright Python包pip install playwright这条命令会从PyPI下载并安装playwright这个Python包。第二步安装浏览器二进制文件playwright install和Node.js版本一样这个命令会下载浏览器。你也可以指定浏览器playwright install chromium第三步验证安装创建一个Python脚本demo.pyfrom playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch(headlessFalse) page browser.new_page() page.goto(https://example.com) print(page.title()) # 输出: Example Domain page.screenshot(pathexample.png) browser.close()运行python demo.py效果应该和Node.js版本一致。4.3 .NET (C#) 安装指南简要对于C#开发者可以通过NuGet包管理器安装。在Visual Studio中右键点击项目 - “管理NuGet程序包”。搜索Microsoft.Playwright并安装。安装后需要在项目目录下打开“程序包管理器控制台”Package Manager Console执行命令pwsh bin\Debug\net8.0\playwright.ps1 install或者直接在项目根目录的终端执行dotnet tool install --global Microsoft.Playwright.CLI playwright install同样这会下载浏览器二进制文件。5. 疑难杂症与深度优化安装过程很少一帆风顺尤其是在网络环境复杂的情况下。下面是我在实践中总结的常见问题及其解决方案。5.1 浏览器下载慢或失败试试换源这是国内开发者遇到最多的问题。Playwright默认从Google的存储服务器下载浏览器速度可能很不理想。幸运的是Playwright支持通过环境变量来配置下载镜像源。方法一通过环境变量临时设置推荐在运行playwright install命令前先设置环境变量。Linux/macOS:# 使用淘宝镜像源 export PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ # 然后运行安装命令 playwright installWindows (PowerShell):$env:PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ playwright installWindows (CMD):set PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ playwright install方法二修改Playwright的NPM包配置Node.js项目对于Node.js项目你可以在playwright.config.ts配置文件中或者在安装命令中直接指定。# 在安装时通过npm_config变量指定 npm_config_playwright_download_hosthttps://npmmirror.com/mirrors/playwright/ npx playwright install方法三使用离线包终极解决方案如果网络条件极差或者需要在无外网的生产服务器上部署离线安装是唯一选择。在有网的机器上准备离线包# 1. 正常安装Playwright和浏览器 npm init playwrightlatest # 或 pip install playwright playwright install # 2. 找到浏览器缓存目录 # Linux/macOS: ~/.cache/ms-playwright # Windows: %USERPROFILE%\AppData\Local\ms-playwright # 3. 将这个目录完整打包例如打包成 ms-playwright.tar.gz在无网机器上部署安装Playwright库可以通过离线pip包或npm包。将打包好的ms-playwright目录解压到目标机器对应的缓存目录路径。确保目录结构和权限正确。运行playwright install命令Playwright会检查本地缓存如果发现已有浏览器文件就会跳过下载。实操心得淘宝镜像源npmmirror.com的速度非常快基本能跑满带宽是解决下载问题的首选。如果镜像源也失效可以尝试搜索“Playwright CDN”寻找其他可用镜像。5.2 安装后运行报错“Executable doesn‘t exist at...”这个错误通常意味着Playwright没有找到浏览器可执行文件。可能的原因和解决步骤检查安装是否真正完成运行playwright install --dry-run可以查看哪些浏览器已安装。如果没安装就重新运行playwright install。检查缓存目录权限确保当前用户对~/.cache/ms-playwright目录有读写权限。环境变量冲突检查是否有PLAYWRIGHT_BROWSERS_PATH环境变量被设置它指向了错误的路径。可以echo $PLAYWRIGHT_BROWSERS_PATH查看如果不需要可以取消设置。手动指定浏览器路径在代码中启动浏览器时可以显式指定可执行文件路径。// Node.js const browser await chromium.launch({ executablePath: /path/to/your/chromium });# Python browser p.chromium.launch(executable_path/path/to/your/chromium)5.3 与现有浏览器驱动如ChromeDriver冲突Playwright管理自己的浏览器与系统已安装的Chrome或Selenium使用的ChromeDriver完全独立通常不会冲突。但如果你在同一个Python环境或Node.js项目中混用了Selenium和Playwright需要注意依赖包版本可能存在的兼容性问题。最佳实践是使用虚拟环境或不同的项目来隔离不同的自动化工具。5.4 在Docker中安装Playwright在Docker容器中运行Playwright是CI/CD的常见场景。你需要一个包含必要系统依赖的镜像。使用官方镜像最简单 Playwright提供了预装所有依赖的Docker镜像非常方便。FROM mcr.microsoft.com/playwright:v1.40.0-focal # 拷贝你的代码和安装依赖 COPY . . RUN npm ci # 或 pip install -r requirements.txt CMD [npm, test]在自定义镜像中安装 如果你需要基于其他镜像如node:18则需要手动安装系统依赖和浏览器。FROM node:18-bullseye-slim # 1. 安装Playwright所需的系统库这些是运行Chromium等所必需的 RUN apt-get update apt-get install -y \ wget \ gnupg \ ca-certificates \ fonts-liberation \ libasound2 \ libatk-bridge2.0-0 \ libatk1.0-0 \ libc6 \ libcairo2 \ libcups2 \ libdbus-1-3 \ libexpat1 \ libfontconfig1 \ libgbm1 \ libgcc1 \ libglib2.0-0 \ libgtk-3-0 \ libnspr4 \ libnss3 \ libpango-1.0-0 \ libpangocairo-1.0-0 \ libstdc6 \ libx11-6 \ libx11-xcb1 \ libxcb1 \ libxcomposite1 \ libxcursor1 \ libxdamage1 \ libxext6 \ libxfixes3 \ libxi6 \ libxrandr2 \ libxrender1 \ libxss1 \ libxtst6 \ lsb-release \ xdg-utils \ --no-install-recommends \ rm -rf /var/lib/apt/lists/* # 2. 安装Playwright npm包 WORKDIR /app COPY package*.json ./ RUN npm ci # 3. 安装Playwright浏览器使用镜像源加速 ENV PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ RUN npx playwright install --with-deps chromium # 4. 拷贝应用代码 COPY . . CMD [npm, test]关键点是--with-deps参数它会确保安装所有必要的系统依赖虽然我们在前面已经手动安装了一部分但加上更保险。6. 进阶配置与最佳实践安装只是第一步要让Playwright在项目中发挥最大威力还需要一些配置和技巧。6.1 配置文件playwright.config.ts详解使用npm init playwrightlatest创建的项目会生成一个配置文件。这个文件是Playwright Test运行器的核心它允许你集中管理所有配置。import { defineConfig, devices } from playwright/test; export default defineConfig({ // 测试文件的位置 testDir: ./tests, // 并行运行测试的最大工作进程数 workers: process.env.CI ? 1 : undefined, // 每个测试的最大超时时间 timeout: 30 * 1000, // 全局的expect断言超时 expect: { timeout: 5000 }, // 报告器配置 reporter: html, // 项目配置可以定义多个浏览器/设备项目 projects: [ { name: chromium, use: { ...devices[Desktop Chrome] }, }, { name: firefox, use: { ...devices[Desktop Firefox] }, }, { name: webkit, use: { ...devices[Desktop Safari] }, }, // 模拟移动端 { name: Mobile Chrome, use: { ...devices[Pixel 5] }, }, ], // 全局启动/结束的钩子 // webServer: { // command: npm run start, // url: http://127.0.0.1:3000, // reuseExistingServer: !process.env.CI, // }, });通过这个配置文件你可以轻松实现多浏览器并行测试、移动端模拟、测试服务器自动启动、自定义超时、生成HTML报告等高级功能。6.2 使用Playwright Test vs 独立脚本Playwright提供了两种使用模式Playwright Test一个基于测试运行器的全功能框架类似Jest、Mocha。它提供了测试夹具Fixtures、钩子函数、并行执行、自动重试、内置报告等特性。对于编写自动化测试套件这是官方推荐且最强大的方式。上面提到的配置文件就是给Playwright Test用的。独立脚本Library Mode直接导入playwright库像使用一个普通Node.js/Python库一样编写脚本。这种方式更灵活适合一次性任务、爬虫、截图工具等非测试场景。我们前面验证安装的示例就是这种模式。如何选择如果你要做的是严格的、可重复的、需要报告和CI集成的自动化测试毫不犹豫选择Playwright Test。如果你只是写个简单的数据抓取脚本、页面监控工具或者一次性任务用独立脚本模式更轻量快捷。6.3 与AI和MCP结合的新趋势从你提供的热词里能看到playwright ai和playwright mcp。这代表了两个有趣的方向Playwright AI你可以利用Playwright自动操作浏览器将网页内容文本、截图喂给大语言模型如通过OpenAI API让AI帮你分析页面、总结内容、甚至基于页面状态做出决策。这打开了RPA机器人流程自动化和智能助理的新可能。Playwright MCP (Model Context Protocol)MCP是Anthropic提出的一种让AI模型更安全、可控地使用工具的协议。虽然还在早期但可以想象未来你可以通过自然语言指令如“帮我检查一下购物车页面有没有错误”AI代理就能自动编写或调用Playwright脚本来完成任务。要开始尝试Playwright AI一个简单的起点是用Playwright导航到目标页面用page.content()获取HTML或者用page.screenshot()截图然后将这些信息发送给ChatGPT等模型的API请求其进行分析或问答。7. 从安装到第一个实战脚本理论说了这么多我们动手写一个有点用的脚本巩固一下安装成果。假设我们要自动检查某个网站首页的标题和关键链接是否正常。目标用Playwright打开百度首页搜索“Playwright”检查搜索结果页是否包含Playwright官网链接。Node.js版本脚本 (check-baidu.js):const { chromium } require(playwright); (async () { // 1. 启动浏览器无头模式不显示界面适合后台运行 const browser await chromium.launch({ headless: true }); const context await browser.newContext(); const page await context.newPage(); try { // 2. 导航到百度 await page.goto(https://www.baidu.com); console.log(已访问页面: ${await page.title()}); // 3. 定位搜索框并输入关键词 const searchInput await page.$(#kw); // 百度搜索框的ID if (!searchInput) { throw new Error(未找到搜索框元素); } await searchInput.fill(Playwright); console.log(已输入搜索词); // 4. 点击“百度一下”按钮 const searchButton await page.$(#su); await searchButton.click(); console.log(已点击搜索按钮); // 5. 等待结果页面加载完成等待某个结果元素出现 await page.waitForSelector(#content_left, { timeout: 10000 }); console.log(搜索结果页已加载); // 6. 获取所有搜索结果链接的文本和URL const results await page.$$eval(#content_left h3 a, (links) links.map(link ({ text: link.innerText, href: link.href })) ); console.log(共找到 ${results.length} 条结果); // 7. 检查是否包含Playwright官网 const playwrightOfficialSite https://playwright.dev; const hasOfficialSite results.some(result result.href.includes(playwrightOfficialSite)); if (hasOfficialSite) { console.log(✅ 成功找到Playwright官网链接); } else { console.log(❌ 未找到Playwright官网链接。); // 可以在这里输出前几条结果以供调试 console.log(前5条结果:, results.slice(0, 5)); } // 8. 可选截图保存证据 await page.screenshot({ path: baidu-search-result.png, fullPage: false }); console.log(截图已保存); } catch (error) { console.error(脚本执行出错:, error); // 出错时截图便于排查 await page.screenshot({ path: error.png }); } finally { // 9. 无论如何最后都要关闭浏览器 await browser.close(); console.log(浏览器已关闭); } })();运行这个脚本:node check-baidu.js这个脚本涵盖了Playwright最常用的几个操作启动浏览器、页面导航、元素定位与交互填充、点击、等待、提取数据以及错误处理。你可以在此基础上修改去检查你关心的网站。注意事项网页元素的选择器如#kw,#su可能会随着网站改版而变化。编写稳定的自动化脚本选择器的选取是一门学问。优先使用id、>