如何使用 Playwright 测试框架编写测试

您将在这篇文章中学到什么？

在本文中，您将学习如何使用断言、定位器等使用 Playwright 编写测试。

编写测试

让我们从一个例子开始

test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); });

在这个例子中，我介绍了两个新东西， getByRole和toContainText 。 getByRole是定位器的一部分， toContainText是断言的一部分，现在我们将深入研究这些新事物。

定位器

定位器是 Playwright 自动等待和重试能力的核心部分。定位器代表了一种随时在页面上查找元素的方法。

使用定位器，您可以通过以下命令检索 dom 中的元素：

• page.getByRole(role[, options])通过显式和隐式可访问性属性进行定位。
• page.getByText(text[, options])按文本内容定位。
• page.getByLabel(text[, options])通过关联标签的文本定位表单控件。
• page.getByPlaceholder(text[, options])通过占位符定位输入。
• page.getByAltText(text[, options])通过替代文本定位一个元素，通常是图像。
• page.getByTitle(text[, options])通过标题属性定位元素。
• page.getByTestId(testId)根据元素的data-testid属性定位元素（可以配置其他属性）。
• page.locator(selector)根据所选元素定位元素（Css 或 XPath）

如您所见，使用这八个命令，您可以找到页面上的所有元素。

查看前面的示例，您可以了解如何使用getByRole方法获取 DOM 中的段落，然后检查您想要的任何内容。好的，快速回顾一下什么是定位器：定位器是帮助您在 DOM 中搜索元素的方法。

断言

与任何受人尊敬的测试框架一样，Playwright 也有自己的主张。断言用于检查我们的结果，作为开发人员，我们使用它们来确保应用程序或代码按预期运行。此功能的编剧在幕后使用了由 jest 构建的expect函数。因此，如果您熟悉jest ，那么使用 Playwright 就不会有问题。您可以使用的最著名的断言是： toEqual 、 toContain 、 toMatch 、 toBe等等。断言是您检查应用程序是否按预期运行的最好朋友。

正如您所想象的，这两者的结合允许您构建许多测试来检查您的应用程序的行为。

因此，如果您回到前面的示例并在终端中键入npm run e2e ，您将得到以下结果。

 npm run e2e > [email protected] e2e > playwright test Running 6 tests using 4 workers 6 passed (5s)

哇，它有效。 😀 现在您知道使用什么来创建 Playwright 测试了。

隔离你的测试

如果您熟悉测试框架，您可能知道有一种方法可以对测试列表进行分组。要使用 Playwright 做到这一点，您必须使用test对象公开的describe方法，如以下示例所示。

 import { expect, test } from "@playwright/test"; test.describe("On View", () => { test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); });

分组的好处在现在的报告中也可见。

如您所见，每次测试前都会显示On View标签。

所以现在，如果您有这种需要，您可以将测试文件拆分到不同的上下文中。

挂钩

如果您喜欢使用测试框架，另一个关键特性是挂钩。挂钩允许您在测试执行之前或之后运行一段代码。通常它们被称为： beforeEach beforeAll afterEach afterAll你知道它们在 Playwright 中的名称吗？完全一样🚀

因此，举个例子，您可以通过这种方式重构代码以在每次测试之前导航主页。

 import { expect, test } from "@playwright/test"; test.describe("On View", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test("show tic tac toe page", async ({ page }) => { await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); });

结果与之前相同，但现在您只有beforeEach挂钩内的导航命令。如果您必须模拟 API 或者必须在测试之前或之后执行某些操作，这些挂钩非常有用。

玩转你的 DOM

做完这些，是时候写这篇文章的最后一个测试了。现在您将编写一个测试来模拟用户在应用程序中的行为。该测试模拟左上角玩家“X”的点击，然后检查下一个玩家是否是“O”。

 test.describe("Users behaviours", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test('the first player select the top-left square and then the next player is the "O"', async ({ page, }) => { const squares = await page.getByRole("button"); const topLeftSquare = squares.first(); await topLeftSquare.click(); const topLeftSquareImg = await topLeftSquare.getByRole("img"); await expect(topLeftSquareImg).toHaveAttribute("title", "X"); await expect(topLeftSquareImg).toHaveAttribute("src", /x.png/i); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("O"); }); });

这个例子开始变得更加棘手。正如您所注意到的，有一些新的东西。让我们从第一个开始， first方法。在这种情况下， getByRole返回许多元素，测试中只需要第一个。使用first方法，您可以获得列表中的第一个元素。然后当你在棋盘上有第一个方块时，你可以模拟用户点击这个元素。使用click方法，您可以做到这一点。轻松挤柠檬。但现在事情开始变得“复杂”了。如您所见，现在您可以使用方形元素的getByRole ，该方法会尝试找到该元素的图像子元素。之后，使用toHaveAttribute断言，检查此图像是否具有带“X”值的标题以及源是否包含值“x.png”。最后一步与上一篇文章相同，您将获得段落并检查下一个玩家现在是否是“O”玩家。好的，这不是火箭科学，但比前面的例子复杂一点。

结论

好的，我想你现在有学习的材料了！ 😃所以，你在这篇文章中学到了什么：

• 定位器

• 断言

• 如何隔离测试

• 挂钩

  
  

我建议您亲身体验这些主题，因为它们将是您使用 Playwright 进行测试的基础。

好的，这就是所有的人，很快再见。

再见👋

Ps 你可以在这个链接找到这篇文章的结果