如何使用 Playwright 生成测试代码

你好呀，

今天您将学习如何为您的测试生成代码。

首先，您必须运行该应用程序，因此在您的终端中输入npm run dev ，您的应用程序将在地址http://localhost:5173启动并运行。

现在您必须运行 Playwright 代码生成器。为此，您必须在终端中打开另一个选项卡并输入npx playwright codegen 。此命令会打开一个新的浏览器和 Playwright 检查器。

现在，浏览器显示一个空选项卡，并且 Playwright 检查器位于新页面上，准备好聆听您将在浏览器中执行的操作。如果您进入浏览器的地址栏并输入http://localhost:5173,您会注意到 Playwright Inspector 中发生了一些变化。检查员注意到页面更改并将此步骤添加到测试正文中。

现在，您可以单击一个方块并模拟两个玩家之间的游戏，您会注意到检查员记录了所有这些步骤并为您创建了测试主体。这些操作的结果是这样的

test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); });

如您所见，生成的代码不错但并不完美，所以请把头放在肩膀上使用此工具，并每次检查结果以确保您的测试价值。

现在是时候将代码复制并粘贴到我们的测试文件中并改进其内容了。

让我们首先将测试名称从test更改为should win the player "X" ，并将 goto 值从http://localhost:5173/更改为/因为我们的基本根对应于主页。

然后重构第一次点击可能是改进测试的一个很好的重构，所以你必须改变行从await page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click();最后但同样重要的是，添加断言。在这种情况下，如果测试名称是should win the player "X"最好的断言是这样的

const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X");

所以代码尝试获取获胜文本的段落并检查该值是否包含X值。最终结果是这样的

test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

现在，您可以运行测试并检查应该为绿色的结果。

好的，我认为这就是代码生成的全部内容。

在本文中，您学习了如何记录您的步骤并将它们转换为测试代码。请像我之前所说的那样，负责任地使用此工具并每次检查生成的代码。

就是这样，伙计们。

再见👋

ps 你可以在这里找到这篇文章的结果