2.E2E工具-＜剧作家＞- 如何编写测试

不念不忘少年蓝@ 2024-03-16 11:59 7阅读 0赞

您将在这篇文章中学到什么？  
在这篇文章中，您将学习如何使用 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
    
    > react-e2e@0.0.0 e2e
    > playwright test
    
    Running 6 tests using 4 workers
    
      6