最近一段时间，在前端生态中，出现了一个新的e2e工具，开始走红；它的名字是剧作家。在这个简短的系列中，我想为您提供一些相关信息和入门技巧。 它是什么？ 让我们从剧作家是什么开始。 Playwright 是一个处理端到端测试的测试框架。使用 Playwright，我们可以编写 e2e 测试并在不同的浏览器（如 Chrome、Firefox 和 Webkit）中运行它们。我们可以在 Windows、Mac、Linux 或 CI 等许多平台上运行我们的测试，我们可以用 Typescript、Javascript、Java、Phyton 或 .Net 编写测试。 如果打开官 ，可以发现这些特点： 网 任何浏览器 任何平台 一个 API 弹性 没有片状测试 没有权衡没有限制 完全隔离 快速执行 强大的工具 在我看来，该工具反映了所有这些特征。 井字应用 我想在这个系列中使用一个用 vite + react 构建的 TicTacToe 应用程序。你可以 找到它。  在这里 如您所见，该应用程序非常简单，但有了它，我们就可以开始使用 Playwright 的第一步了。 安装剧作家 使用 Playwright 的第一步是安装它，这很简单。打开您的终端并输入  （我使用 npm，但如果您想使用 yarn 或 pnpm，请阅读 ）。好的，现在安装会问你一些问题： npm init playwright@latest 文档 将端到端测试放在哪里？默认选项是 但我更喜欢使用文件夹  。 tests e2e 添加 GitHub Actions 工作流程？默认选项是  ；在此演示中，我暂时将此选项保留为 false。 false 安装 Playwright 浏览器（可以通过“npx playwright install”手动完成）？默认选项是  ，我使用了这个值 true 现在你必须等到安装结束。安装完成后...恭喜，您已准备好开始使用 Playwright！ 第一眼 安装在您的存储库中创建了 3 个新文件： 剧作家.config.ts  e2e/example.spec.ts 测试示例/演示-todo-app.spec.ts 让我们从最后一个开始，最简单的😊这个文件包含一个示例列表，说明如何使用 Playwright 编写测试。它使用由编剧团队创建的应用程序（一个简单的待办应用程序）并说明了如何与您的页面进行交互。 继续第二个。该文件是 playwright 网站上一些测试的快速示例，但它在这里仅用作测试的占位符。 现在，第一个，最重要的。 Playwright 使用 文件来了解其配置。在其中，您可以找到有关测试文件夹的配置、expect 函数使用的超时时间、Playwright 用于运行测试的浏览器的配置等等。 playwright.config.ts 运行你的第一个测试 是时候看看 Playwright 的实际操作了，所以再次打开您的终端并运行以下命令  。结果是这样的 npx playwright test 本报告中的编剧向您展示其执行结果，您可以检查是否一切正常。该报告显示配置中指示的每个浏览器的结果，在本例中为：Chromium、Firefox 和 Webkit。 编写你的第一个测试 好的，很酷，但现在是您使用 Playwright 编写第一个测试的时候了。在执行此操作之前，您必须配置 Playwright 以便能够在开始测试之前运行您的应用程序。为此，您必须打开 并添加以下配置 playwright.config.ts const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... }; 端口，您必须使用 vite 公开的相同端口。 注意检查您运行命令 npm run dev 现在是您进行第一次测试的时候了。打开文件 并将其重命名为  。然后清理文件中的所有内容，只保留导入行  . 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 表明这是一个测试。与每个测试框架一样，测试函数的第一个参数是测试的名称。第二个参数是测试我们应用程序的函数。使用 Playwright，此函数始终是异步函数，因为您在这些情况下的测试始终是异步的。此示例中的第一个命令是告诉 Playwright 导航到我们应用程序的主页的命令。如您所见，此命令已经是异步的。现在，如果测试可以导航到该页面，您想要测试该页面的标题是否为“Tic Tac Toe”。是的，它很基础，但却是迈出第一步的绝佳范例。 test 现在，是时候检查测试是否在 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 你可以在这个 链接 找到这篇文章的结果

Read My Stories

該音頻是用故事的原始語言製作的！

剧作家测试框架简介

About Author

註釋

標籤

这篇文章刊登在

Related Stories

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Claude Sonnet 3.5 系统提示泄漏：法医分析

数字游民请注意：您需要了解泰国新推出的 DTV 签证

看不见的层面：为什么用户访谈是不可替代的资产

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Claude Sonnet 3.5 系统提示泄漏：法医分析

数字游民请注意：您需要了解泰国新推出的 DTV 签证

看不见的层面：为什么用户访谈是不可替代的资产

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps