您将在这篇文章中学到什么？ 在本文中，您将学习如何使用断言、定位器等使用 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 根据所选元素定位元素（Css 或 XPath） page.locator(selector) 如您所见，使用这八个命令，您可以找到页面上的所有元素。 查看前面的示例，您可以了解如何使用 方法获取 DOM 中的段落，然后检查您想要的任何内容。好的，快速回顾一下什么是定位器：定位器是帮助您在 DOM 中搜索元素的方法。 getByRole 断言 与任何受人尊敬的测试框架一样，Playwright 也有自己的主张。断言用于检查我们的结果，作为开发人员，我们使用它们来确保应用程序或代码按预期运行。此功能的编剧在幕后使用了由 jest 构建的 函数。因此，如果您熟悉 ，那么使用 Playwright 就不会有问题。您可以使用的最著名的断言是： 、 、 、 等等。断言是您检查应用程序是否按预期运行的最好朋友。 expect jest toEqual toContain toMatch toBe 正如您所想象的，这两者的结合允许您构建许多测试来检查您的应用程序的行为。 因此，如果您回到前面的示例并在终端中键入 ，您将得到以下结果。 npm run e2e npm run e2e > react-e2e@0.0.0 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 所以现在，如果您有这种需要，您可以将测试文件拆分到不同的上下文中。 挂钩 如果您喜欢使用测试框架，另一个关键特性是挂钩。挂钩允许您在测试执行之前或之后运行一段代码。通常它们被称为： 你知道它们在 Playwright 中的名称吗？完全一样🚀 beforeEach beforeAll afterEach afterAll 因此，举个例子，您可以通过这种方式重构代码以在每次测试之前导航主页。 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"); }); }); 结果与之前相同，但现在您只有 挂钩内的导航命令。如果您必须模拟 API 或者必须在测试之前或之后执行某些操作，这些挂钩非常有用。 beforeEach 玩转你的 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"); }); }); 这个例子开始变得更加棘手。正如您所注意到的，有一些新的东西。让我们从第一个开始， 方法。在这种情况下， 返回许多元素，测试中只需要第一个。使用 方法，您可以获得列表中的第一个元素。然后当你在棋盘上有第一个方块时，你可以模拟用户点击这个元素。使用 方法，您可以做到这一点。轻松挤柠檬。但现在事情开始变得“复杂”了。如您所见，现在您可以使用方形元素的 ，该方法会尝试找到该元素的图像子元素。之后，使用 断言，检查此图像是否具有带“X”值的标题以及源是否包含值“x.png”。最后一步与上一篇文章相同，您将获得段落并检查下一个玩家现在是否是“O”玩家。好的，这不是火箭科学，但比前面的例子复杂一点。 first getByRole first click getByRole toHaveAttribute 结论 好的，我想你现在有学习的材料了！ 😃所以，你在这篇文章中学到了什么： 定位器 断言 如何隔离测试 挂钩 我建议您亲身体验这些主题，因为它们将是您使用 Playwright 进行测试的基础。 好的，这就是所有的人，很快再见。 再见👋 Ps 你可以在这个 链接 找到这篇文章的结果
