Playwright与Next.js结合使用指南

原文链接：How to Use Playwright with Next.js - A Step-By-Step Guide
作者：Prachi Sahu
译者：倔强青铜三

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

为什么选择Playwright？

Playwright是由微软创建的，一个用于端到端（E2E）测试的前沿测试框架。它旨在为Web应用程序提供快速、可靠、灵活的测试，并支持Chrome、Firefox和WebKit（Safari）等多种浏览器。

设置Next.js项目

我们将从使用CreoWis公司的Next.js Launchpad来设置Next.js项目开始。这个Launchpad提供了必要的工具、定制和最佳实践，以优化您的开发过程，并为Next.js应用程序提供了一个无需配置的预配置设置。这种配置使得开始一个项目变得更加容易，并让您专注于构建而非配置。

创建项目文件夹：

为项目创建一个新文件夹，这里我们将使用PlaywrightNext作为项目名称。

mkdir PlaywrightNext
cd PlaywrightNext

使用CreoWis Launchpad初始化Next.js：

接下来，使用CreoWis Launchpad模板来设置您的Next.js项目，或者您也可以使用标准的npx create-next-app@latest命令来创建一个新的Next.js项目。

npx create-next-app -e https://github.com/CreoWis/next-js-launchpad

现在我们都已经设置好了，可以开始使用Playwright进行端到端测试，以确保您的应用运行顺畅。

Playwright设置

让我们开始安装Playwright，您可以通过npm、yarn或pnpm来完成。

npm init playwright@latest

这个命令将提示您：

选择测试目录：这是必需的。如果您按下Enter而不输入目录，它将默认为tests。
添加GitHub Actions工作流（y/N）：可选—如果您想要自动CI设置，选择"y"，或按Enter跳过。
安装Playwright浏览器（Y/n）：必需—按"y"或直接Enter来安装所需的浏览器。

根据您的需要选择每个选项，Playwright将完成设置。

除了设置Playwright外，运行此命令还会自动创建一个示例测试文件example.spec.ts。此文件中包含了一些展示基本Playwright功能的示例测试，这些可以在您开始创建测试时作为有用的指南。

一些测试术语

在我们开始编写第一个Playwright测试之前，让我们了解一些基本的测试术语和概念。

交互：

Playwright使用定位器与元素进行交互。这些定位器使您能够定位并操作元素，例如填写表单或点击按钮。在采取任何操作之前，Playwright会确保元素已准备好进行交互。

一些内置的定位器：

page.getByText()：根据文本内容定位。
page.getByRole()：根据明确的或隐式的可访问性属性定位。
page.getByLabel()：根据其标签上的文本定位表单元素。
page.getByPlaceholder()：根据其占位符文本定位输入框。
page.getByAltText()：根据alt文本定位元素（通常是图像）。
page.getByTitle()：根据其title属性定位元素。
page.getByTestId()：根据其data-testid属性定位元素。

操作：

Playwright提供了多种内置操作来与元素进行交互。这些包括：

locator.click() – 点击一个元素。
locator.fill() – 填充输入字段。
locator.hover() – 悬停在一个元素上。
locator.check() – 勾选一个复选框。
locator.selectOption() – 从下拉菜单中选择一个选项。

断言：

测试中的条件通过断言来验证。对于断言，Playwright提供了expect()函数。一些常见的断言示例包括检查可见性、文本存在或元素属性。

await expect(page.getByText('Elevating ideas with')).toBeVisible();

一些常见的断言示例：

expect(locator).toBeChecked()：复选框被勾选。
expect(locator).toBeVisible()：元素可见。
expect(locator).toContainText()：元素包含文本。
expect(locator).toHaveText()：元素匹配文本。
expect(locator).toHaveValue()：输入元素具有值。
expect(page).toHaveTitle()：页面具有标题。
expect(page).toHaveURL()：页面具有URL。

固定装置：

Playwright中的固定装置类似于可重用的测试集。环境在测试运行之前自动设置，并在测试之后清理。为了防止测试相互干扰，Playwright例如有一个集成的page固定装置，为每个测试提供一个新的浏览器页面。

test('has title', async ({ page }) => {
  await page.goto('https://www.creowis.com/');
  const titleText = page.getByText('Elevating ideas with');
  await expect(titleText).toBeVisible();
});

测试钩子：

这是用于组织测试和处理更广泛范围的设置/清理。

设置：描述在测试运行之前为环境准备的步骤。例如，启动浏览器、转到特定页面或初始化数据。
清理：描述在测试运行后清理或重置环境的步骤。这可能涉及删除测试数据或关闭浏览器。

以下是一些重要的：

test.describe：用于将相关测试组合在一起。
test.beforeAll：在describe块中的所有测试之前运行一次，通常用于全局设置。
test.afterAll：在describe块中的所有测试之后运行一次，适合全局清理。
test.beforeEach：在每个测试之前运行，有助于设置一个干净的环境。
test.afterEach：在每个测试之后运行，适合清理任务。

创建一个基本测试

让我们深入创建一个使用Playwright的基本测试。

test('has subtitle', async ({ page }) => {
  await page.goto('https://www.creowis.com/');
  const subTitle = page.getByText('Crafting digital experience by');
  await expect(subTitle).toBeVisible();
});

解释：

test()：指定测试用例，包括一个包含测试逻辑的异步函数和一个描述（'has subtitle’）。
page.goto()：打开给定的URL（在这个例子中，' https://www.creowis.com/'）。
page.getByText()：根据其可见的文本找到元素。这里它搜索的是副标题'Crafting digital experience by'。
expect()：建立一个断言，以确定元素是否显示在页面上。
toBeVisible()：一个断言，确认元素在页面上可见。

测试验证页面上是否显示了副标题文本。

要运行测试，请使用命令：

npx playwright test

如果一切配置正确，测试运行应该会产生成功的结果！

它应该在vs code中如下所示：

由于它在WebKit、Chrome和Firefox的所有三个浏览器上运行，所以计数是3。

测试也可以在UI模式下进行。要做到这一点，请执行命令：

npx playwright test --ui

一旦您的测试完成，您还会得到所有测试的详细报告。如果有些测试失败，默认情况下会自动查看HTML报告。要查看报告，请运行以下命令：

npx playwright show-report

额外：

尝试探索并运行以下命令，看看Playwright能做什么：

npx playwright codegen https://www.creowis.com/

执行此命令以执行基于浏览器的操作。Playwright通过根据您的交互自动生成代码，使开发测试变得更加简单。这里的URL是可选的，总是可以不使用URL运行命令，然后直接在浏览器窗口中添加URL。

结论

借助Playwright，开发者可以轻松有效地自动化端到端测试。由于其跨多个浏览器的多功能性、支持并行执行以及网络拦截等高级功能，它是测试Web应用程序的极佳选择。

希望本指南能帮助您开始在项目中尝试使用Playwright。

编码愉快！

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

Playwright与Next.js结合使用指南