E2E工具-＜剧作家＞-让我们开始吧

最近一段时间，在前端生态中，出现了一个新的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，我用的是这个值

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

第一眼
安装在您的存储库中创建了 3 个新文件：
剧作家.config.ts

e2e/example.spec.ts

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

让我们从最后一个开始，最简单的😊这个文件包含一个示例列表，说明如何使用 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，一起来看看这个测试吧。首先，您可以向 Playwright 表明这是使用该test功能的测试。与每个测试框架一样，测试函数的第一个参数是测试的名称。第二个参数是测试我们应用程序的函数。使用 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 世界中的旅程

如果你喜欢我的文章，记得关注获取更多的信息。感谢您的阅读，祝您有美好的一天！