Playwright for JavaScript (Node.js): 完整指南及示例

\n\n

Playwright 是一个由微软开发的现代开源浏览器自动化库。它通过 DevTools 协议提供了一个统一的 API 来控制 Chromium、Firefox 和 WebKit（Safari 引擎）。与 Selenium 不同，Playwright 从设计之初就针对现代 Web 应用程序，并支持诸如拦截网络请求、模拟移动设备、处理多页面和多标签页以及自动等待元素等场景。

\n\n

Playwright 的主要用途是 Web 应用程序的端到端（E2E）测试。然而，其功能远不止于测试：该库可用于解析动态网站（SPA）、自动化日常任务（例如填写表单）、生成截图和 PDF 报告，以及监控网页性能。由于支持所有三种主流浏览器引擎，您可以确信您的应用程序在任何环境中都能正常运行。

\n\n

Playwright 相对于竞争对手的关键优势在于其速度和可靠性。该库采用基于 Promise 的异步架构，自动等待元素出现（无需编写 sleep()），并且能够处理 iframe、弹出窗口以及拦截浏览器控制台消息。Playwright 还提供了一个内置的测试生成器（codegen），它可以记录您在浏览器中的操作并将其转换为现成的代码。

\n\n

安装 Playwright

\n\n

要在 Node.js 项目中安装 Playwright，请在终端中执行以下命令：

\n\n

npm init -y\nnpm install playwright\nnpx playwright install

\n\n

第一个命令创建 package.json 文件，第二个命令安装库本身，第三个命令下载浏览器（Chromium、Firefox 和 WebKit）。如果您只想安装一个浏览器，请使用 npx playwright install chromium。

\n\n

对于 TypeScript，请额外安装类型定义：

\n\n

npm install -D @playwright/test

\n\n

如果您将 Playwright 用作测试框架，建议安装 @playwright/test，它包含了测试运行器、fixtures 和配置。

\n\n

快速入门：最小工作示例

\n\n

创建一个 example.js 文件并粘贴以下代码：

\n\n

const { chromium } = require('playwright');\n\n(async () => {\n  // 启动浏览器 (headless: true — 无图形界面)\n  const browser = await chromium.launch({ headless: true });\n  // 创建一个新页面（标签页）\n  const page = await browser.newPage();\n  \n  // 导航到网站\n  await page.goto('https://example.com');\n  \n  // 获取页面标题\n  const title = await page.title();\n  console.log('页面标题:', title);\n  \n  // 截图\n  await page.screenshot({ path: 'example.png' });\n  \n  // 关闭浏览器\n  await browser.close();\n})();

\n\n

使用命令 node example.js 运行脚本。结果，您将在控制台中看到页面标题，并且文件夹中会出现一个名为 example.png 的截图文件。

\n\n

这个示例演示了 Playwright 的基本工作流程：启动浏览器、创建页面、导航、与 DOM 交互以及关闭。

\n\n