Skip to main content

Playwright 库

Playwright 库提供了用于启动和与浏览器交互的统一 API，而 Playwright Test 提供了所有这些加上完全托管的端到端测试运行器和体验。

在大多数情况下，对于端到端测试，您会希望使用 @playwright/test (Playwright Test)，而不是直接使用 playwright (Playwright Library)。要开始使用 Playwright Test，请按照 入门指南 操作。

何时应直接使用 Playwright 库？​

  • 为第三方测试运行器创建集成。例如，此处 列出的第三方运行器插件是基于 Playwright 库构建的。
  • 自动化和抓取。

使用库时的差异​

库示例​

以下是直接使用 Playwright 库启动 Chromium，转到页面并检查其标题的示例：

import { chromium, devices } from 'playwright';
import assert from 'node:assert';

(async () => {
  // 设置
  const browser = await chromium.launch();
  const context = await browser.newContext(devices['iPhone 11']);
  const page = await context.newPage();

  // 实际有趣的部分
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  assert(await page.title() === 'Example Domain'); // 👎 不是 Web First 断言

  // 拆卸
  await context.close();
  await browser.close();
})()

使用 node my-script.js 运行它。

测试示例​

实现类似行为的测试如下所示：

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

test.use(devices['iPhone 11']);

test('should be titled', async ({ page, context }) => {
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  await expect(page).toHaveTitle('Example');
});

使用 npx playwright test 运行它。

主要差异​

需要注意的主要差异如下：

LibraryTest
安装npm install playwrightnpm init playwright@latest - 注意 install 与 init
安装浏览器默认安装 Chromium, Firefox, WebKitnpx playwright install 或 npx playwright install chromium 安装单个浏览器
import/require 名称playwright@playwright/test
初始化显式需要：
  1. 选择要使用的浏览器，例如 chromium
  2. 使用 browserType.launch([options]) 启动浏览器
  3. 使用 browser.newContext([options]) 创建上下文，并 显式传递任何上下文选项，例如 devices['iPhone 11']
  4. 使用 browserContext.newPage() 创建页面
开箱即用地为每个测试提供隔离的 page 和 context，以及其他 内置 fixtures。无需显式创建。如果测试在其参数中引用了它们，测试运行器将为测试创建它们。（即延迟初始化）
断言无内置 Web-First 断言Web-First 断言 如： 它们会自动等待并重试以满足条件。
清理显式需要：
  1. 使用 browserContext.close() 关闭上下文
  2. 使用 browser.close() 关闭浏览器
无需显式关闭 内置 fixtures；测试运行器会处理它。
运行使用库时，您将代码作为 node 脚本运行，可能首先进行一些编译。使用测试运行器时，您使用 npx playwright test 命令。连同您的 配置，测试运行器处理任何编译并选择要运行的内容以及如何运行它。

除了上述内容外，Playwright Test 作为功能齐全的测试运行器，还包括：

用法​

使用 npm 或 Yarn 在您的 Node.js 项目中安装 Playwright 库。请参阅 系统要求。

npm i -D playwright

此单个命令下载 Playwright NPM 包以及 Chromium、Firefox 和 WebKit 的浏览器二进制文件。要修改此行为，请参阅 管理浏览器。

安装后，您可以在 Node.js 脚本中 require Playwright，并启动 3 种浏览器中的任何一种（chromium、firefox 和 webkit）。

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

(async () => {
  const browser = await chromium.launch();
  // 创建页面，与 UI 元素交互，断言值
  await browser.close();
})();

Playwright API 是异步的并返回 Promise 对象。我们的代码示例使用 async/await 模式 来提高可读性。代码包装在一个调用自身的未命名异步箭头函数中。

(async () => { // 异步箭头函数开始
  // 函数代码
  // ...
})(); // 函数结束并使用 () 调用自身

第一个脚本​

在我们的第一个脚本中，我们将导航到 whatsmyuseragent.org 并在 WebKit 中截图。

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

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

默认情况下，Playwright 以无头模式运行浏览器。要查看浏览器 UI，请在启动浏览器时传递 headless: false 标志。您还可以使用 slowMo 减慢执行速度。在调试工具 部分 中了解更多信息。

firefox.launch({ headless: false, slowMo: 50 });

录制脚本​

命令行工具 可用于录制用户交互并生成 JavaScript 代码。

npx playwright codegen wikipedia.org

TypeScript 支持​

Playwright 包含对 TypeScript 的内置支持。类型定义将自动导入。建议使用类型检查来改善 IDE 体验。

在 JavaScript 中​

将以下内容添加到 JavaScript 文件的顶部，以便在 VS Code 或 WebStorm 中获得类型检查。

//@ts-check
// ...

或者，您可以使用 JSDoc 为变量设置类型。

/** @type {import('playwright').Page} */
let page;

在 TypeScript 中​

TypeScript 支持开箱即用。类型也可以显式导入。

let page: import('playwright').Page;