Skip to main content

安装

介绍​

¥Introduction

Playwright Test 是专门为了满足端到端测试的需求而创建的。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上进行本地或 CI 测试，无头测试或使用适用于 Android 和 Mobile Safari 的 Google Chrome 的原生移动模拟进行测试。

¥Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.

你将学习

¥You will learn

安装 Playwright​

¥Installing Playwright

首先使用以下方法之一安装 Playwright。

¥Get started by installing Playwright using one of the following methods.

使用 npm、yarn 或 pnpm​

¥Using npm, yarn or pnpm

以下命令可以使用 Playwright 初始化一个新项目，或将 Playwright 设置添加到你当前的项目中。

¥The command below either initializes a new project with Playwright, or adds Playwright setup to your current project.

npm init playwright@latest

运行安装命令并选择以下内容以开始：

¥Run the install command and select the following to get started:

  • 在 TypeScript 或 JavaScript 之间进行选择（默认为 TypeScript）

    ¥Choose between TypeScript or JavaScript (default is TypeScript)

  • 测试文件夹的名称（默认为 tests，如果项目中已有 tests 文件夹，则默认为 e2e）

    ¥Name of your Tests folder (default is tests, or e2e if you already have a tests folder in your project)

  • 添加 GitHub Actions 工作流程以轻松在 CI 上运行测试

    ¥Add a GitHub Actions workflow to easily run tests on CI

  • 安装 Playwright 浏览器（默认为 true）

    ¥Install Playwright browsers (default is true)

使用 VS Code 扩展程序​

¥Using the VS Code Extension

或者，你也可以使用 VS Code 扩展 开始并运行测试。

¥Alternatively you can also get started and run your tests using the VS Code Extension.

安装了什么​

¥What's Installed

Playwright 将下载所需的浏览器并创建以下文件。

¥Playwright will download the browsers needed as well as create the following files.

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

你可以在 playwright.config 中添加 Playwright 的配置，包括修改你想要运行 Playwright 的浏览器。如果你在现有项目中运行测试，那么依赖将直接添加到你的 package.json。

¥The playwright.config is where you can add configuration for Playwright including modifying which browsers you would like to run Playwright on. If you are running tests inside an already existing project then dependencies will be added directly to your package.json.

tests 文件夹包含一个基本示例测试，可帮助你开始测试。有关更详细的示例，请查看 tests-examples 文件夹，其中包含为测试待办事项应用而编写的测试。

¥The tests folder contains a basic example test to help you get started with testing. For a more detailed example check out the tests-examples folder which contains tests written to test a todo app.

运行示例测试​

¥Running the Example Test

默认情况下，测试将使用多个工作进程在所有 3 个浏览器（Chromium、Firefox 和 WebKit）上运行。这可以在 playwright.config 文件 中配置。测试在无头模式下运行，这意味着运行测试时不会打开浏览器。测试结果和测试日志将显示在终端中。

¥By default tests will be run on all 3 browsers, Chromium, Firefox and WebKit using several workers. This can be configured in the playwright.config file. Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal.

npx playwright test

tests running in command line

请参阅我们的 运行测试 文档，了解有关在 head 模式下运行测试、运行多个测试、运行特定测试等的更多信息。

¥See our doc on Running Tests to learn more about running tests in headed mode, running multiple tests, running specific tests etc.

HTML 测试报告​

¥HTML Test Reports

测试完成后，将生成 HTML 报告器，其中显示完整的测试报告，允许你按浏览器、通过的测试、失败的测试、跳过的测试和不稳定测试来过滤报告。你可以单击每个测试并探索测试的错误以及测试的每个步骤。默认情况下，如果某些测试失败，将自动打开 HTML 报告。

¥After your test completes, an HTML Reporter will be generated, which shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. You can click on each test and explore the test's errors as well as each step of the test. By default, the HTML report is opened automatically if some of the tests failed.

npx playwright show-report

HTML Report

在 UI 模式下运行示例测试​

¥Running the Example Test in UI Mode

使用 用户界面模式 运行测试，以获得更好的开发者体验，包括时间旅行调试、监视模式等。

¥Run your tests with UI Mode for a better developer experience with time travel debugging, watch mode and more.

npx playwright test --ui

UI Mode

查看 或 UI 模式详细指南 以了解有关其功能的更多信息。

¥Check out or detailed guide on UI Mode to learn more about its features.

更新 Playwright​

¥Updating Playwright

要将 Playwright 更新到最新版本，请运行以下命令：

¥To update Playwright to the latest version run the following command:

npm install -D @playwright/test@latest
# Also download new browser binaries and their dependencies:
npx playwright install --with-deps

你始终可以通过运行以下命令来检查你拥有的 Playwright 版本：

¥You can always check which version of Playwright you have by running the following command:

npx playwright --version

系统要求​

¥System requirements

  • Node.js 20、22 或 24 的最新版本。

    ¥Latest version of Node.js 20, 22 or 24.

  • Windows 10+、Windows Server 2016+ 或适用于 Linux 的 Windows 子系统 (WSL)。

    ¥Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL).

  • macOS 14 Ventura 或更高版本。

    ¥macOS 14 Ventura, or later.

  • Debian 12、Ubuntu 22.04、Ubuntu 24.04，基于 x86-64 和 arm64 架构。

    ¥Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture.

下一步是什么​

¥What's next