剧作家测试框架简介

最近一段时间，在前端生态中，出现了一个新的e2e工具，开始走红；它的名字是剧作家。在这个简短的系列中，我想为您提供一些相关信息和入门技巧。

它是什么？

让我们从剧作家是什么开始。 Playwright 是一个处理端到端测试的测试框架。使用 Playwright，我们可以编写 e2e 测试并在不同的浏览器（如 Chrome、Firefox 和 Webkit）中运行它们。我们可以在 Windows、Mac、Linux 或 CI 等许多平台上运行我们的测试，我们可以用 Typescript、Javascript、Java、Phyton 或 .Net 编写测试。

如果打开官网，可以发现这些特点：

• 任何浏览器 任何平台 一个 API
• 弹性 没有片状测试
• 没有权衡没有限制
• 完全隔离 快速执行
• 强大的工具

在我看来，该工具反映了所有这些特征。

井字应用

我想在这个系列中使用一个用 vite + react 构建的 TicTacToe 应用程序。你可以在这里找到它。

如您所见，该应用程序非常简单，但有了它，我们就可以开始使用 Playwright 的第一步了。

安装剧作家

使用 Playwright 的第一步是安装它，这很简单。打开您的终端并输入npm init playwright@latest （我使用 npm，但如果您想使用 yarn 或 pnpm，请阅读文档）。好的，现在安装会问你一些问题：

1. 将端到端测试放在哪里？默认选项是tests但我更喜欢使用文件夹e2e 。
2. 添加 GitHub Actions 工作流程？默认选项是false ；在此演示中，我暂时将此选项保留为 false。
3. 安装 Playwright 浏览器（可以通过“npx playwright install”手动完成）？默认选项是true ，我使用了这个值

4. 
   

现在你必须等到安装结束。安装完成后...恭喜，您已准备好开始使用 Playwright！

第一眼

安装在您的存储库中创建了 3 个新文件：

• 剧作家.config.ts

• e2e/example.spec.ts

• 测试示例/演示-todo-app.spec.ts

  
  

让我们从最后一个开始，最简单的😊这个文件包含一个示例列表，说明如何使用 Playwright 编写测试。它使用由编剧团队创建的应用程序（一个简单的待办应用程序）并说明了如何与您的页面进行交互。

继续第二个。该文件是 playwright 网站上一些测试的快速示例，但它在这里仅用作测试的占位符。

现在，第一个，最重要的。 Playwright 使用playwright.config.ts文件来了解其配置。在其中，您可以找到有关测试文件夹的配置、expect 函数使用的超时时间、Playwright 用于运行测试的浏览器的配置等等。

运行你的第一个测试

是时候看看 Playwright 的实际操作了，所以再次打开您的终端并运行以下命令npx playwright test 。结果是这样的

本报告中的编剧向您展示其执行结果，您可以检查是否一切正常。该报告显示配置中指示的每个浏览器的结果，在本例中为：Chromium、Firefox 和 Webkit。

编写你的第一个测试

好的，很酷，但现在是您使用 Playwright 编写第一个测试的时候了。在执行此操作之前，您必须配置 Playwright 以便能够在开始测试之前运行您的应用程序。为此，您必须打开playwright.config.ts并添加以下配置

const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... };

注意检查您运行命令npm run dev端口，您必须使用 vite 公开的相同端口。

现在是您进行第一次测试的时候了。打开文件e2e/example.spec.ts并将其重命名为e2e/tit-tac-toe.spec.ts 。然后清理文件中的所有内容，只保留导入行import { expect, test } from "@playwright/test"; .

现在添加您的第一个测试

test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); });

ok，一起来看看这个测试吧。首先，您可以使用test功能向 Playwright 表明这是一个测试。与每个测试框架一样，测试函数的第一个参数是测试的名称。第二个参数是测试我们应用程序的函数。使用 Playwright，此函数始终是异步函数，因为您在这些情况下的测试始终是异步的。此示例中的第一个命令是告诉 Playwright 导航到我们应用程序的主页的命令。如您所见，此命令已经是异步的。现在，如果测试可以导航到该页面，您想要测试该页面的标题是否为“Tic Tac Toe”。是的，它很基础，但却是迈出第一步的绝佳范例。

现在，是时候检查测试是否在 Playwright 中运行了，但在此之前，您可以通过在 package.json 中添加一个新脚本来简化与 Playwright 的交互，如下所示

 .... "scripts": { ... "e2e": "playwright test" },

现在在您的终端中，您可以输入npm run e2e瞧，您的测试已经完成了 ✅

在 package.json 中添加另一个脚本，您可以在浏览器中打开报告结果

 .... "scripts": { ... "e2e": "playwright test", "e2e:report": "playwright show-report" },

现在，如果您在浏览器中运行命令npm run e2e:report ，您可以看到第一次测试的结果。

好的，我想现在就这些了。在这篇文章中，您了解到：

• 如何安装剧作家
• 如何运行测试
• 如何使用 Playwright 编写您的第一个测试

在下一篇文章中，我们将继续我们在 Playwright 世界中的旅程，但就目前而言，仅此而已！伙计们，很快再见。

再见

ps 你可以在这个链接找到这篇文章的结果