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

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

使用这 18 种开发工具来提高你的工作效率 🚀🔥

成功云迁移的完整指南：策略和最佳实践

从论坛到信息流：社交媒体算法如何塑造数字互动

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

使用这 18 种开发工具来提高你的工作效率 🚀🔥

成功云迁移的完整指南：策略和最佳实践

从论坛到信息流：社交媒体算法如何塑造数字互动

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps