最近一段时间,在前端生态中,出现了一个新的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 你可以在这个 链接 找到这篇文章的结果