Playwright 组件测试入门

随着 Web 框架和库（如 React 和 Vue）的广泛采用，Web 应用程序的开发已经从每页只有一个 HTML 文件转变为使用小型可重用组件来呈现应用程序的特定部分。

同样，测试实践也从仅对页面进行端到端 (E2E) 测试扩展到具有多个单元测试，同时单独测试前端组件。

如果您一直在使用 Playwright 为您的应用程序实现 E2E 测试，您可能知道 Playwright 现在提供了单独测试您的前端组件的能力。

本教程将引导您完成使用 Playwright 最近发布的当前实验性组件测试功能为您的 Svelte、Vue 和 React 组件编写单元测试的过程。 我们将涵盖：

• 什么是剧作家？

• Playwright的组件测试功能介绍

• 使用 Playwright 测试你的组件

  • 为 React 组件设置 Playwright 组件测试

  • 为 React 编写 Playwright 组件测试

  • 为 Vue 组件设置 Playwright 组件测试

  • 为 Vue 编写 Playwright 组件测试

  • 为 Svelte 组件设置 Playwright 组件测试

  • 为 Svelte 编写 Playwright 组件测试

• 关于 Playwright 组件测试的最终想法

如果你想直接跳到完成的测试用例，代码在 playwright-ct的分支 playwright-frontend-e2e-testsGitHub 上的存储库 。

先决条件

本教程包含动手步骤，将指导您完成使用 Playwright 测试使用 React、Vue 和 Svelte 构建的组件的过程。 您将在单个 Yarn 工作区中克隆一个包含 React、Vue 和 Svelte 组件的样板项目。

要遵循这些步骤，您将需要以下内容：

• Node.js v16 安装在您的计算机上

• 安装在您计算机上的 Git CLI

• 基本熟悉 React、Vue 或 Svelte 框架

什么是剧作家？

Playwright 是一个开源测试工具 ，主要支持 Web 应用程序，并为移动应用程序提供额外的实验性支持。

Playwright 无需手动测试应用程序的界面，而是让您能够使用以 JavaScript 或 TypeScript、Java、.NET 和 Python 编写的可执行脚本来自动化测试。

Introduction to Playwright’s component testing feature

The experimental Playwright Test component testing feature allows you to create test cases within which to import and test your frontend components rather than having to programmatically navigate to the entire page.

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

以前，已经使用 Playwright 进行 E2E 测试的开发人员可能仍然需要单元测试。 这些开发人员必须采用 其他测试库（例如 Jest ）来直接测试他们的组件。

消除了这一限制。 Playwright在 2022 年 5 月发布 v1.22.0 后， 通过组件测试功能

目前，组件测试功能仅支持 React、Vue 和 Svelte。 Playwright 提供了一个额外的包，该包将 @playwright/test包提供其他方法，例如 mount用于安装单个组件。

当您考虑使用 Playwright 进行前端单元测试时，请记住，组件测试功能仍处于实验阶段。 因此，API 可能会在未来发生变化。

使用 Playwright 测试你的组件

为了使您能够专注于使用 Playwright，本教程使用了一个现有的 monorepo 项目，其中包含较小的 React、Vue 和 Svelte 应用程序。

monorepo 使用 Yarn 工作区 进行管理，React、Vue 和 Svelte 应用程序将呈现相同的页面，显示从 Rick and Morty API 获取的 JSON 数据，其中包含来自电视节目 Rick and Morty 的信息。

首先，启动终端并使用 Git CLI 从 GitHub 存储库克隆预构建的前端项目：

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 使用 React 的 useEffect