你好呀， 今天您将学习如何为您的测试生成代码。 首先，您必须运行该应用程序，因此在您的终端中输入  ，您的应用程序将在地址 启动并运行。 npm run dev http://localhost:5173 现在您必须运行 Playwright 代码生成器。为此，您必须在终端中打开另一个选项卡并输入  。此命令会打开一个新的浏览器和 Playwright 检查器。 npx playwright codegen 现在，浏览器显示一个空选项卡，并且 Playwright 检查器位于新页面上，准备好聆听您将在浏览器中执行的操作。如果您进入浏览器的地址栏并输入 您会注意到 Playwright Inspector 中发生了一些变化。检查员注意到页面更改并将此步骤添加到测试正文中。 http://localhost:5173, 现在，您可以单击一个方块并模拟两个玩家之间的游戏，您会注意到检查员记录了所有这些步骤并为您创建了测试主体。这些操作的结果是这样的 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(); }); 如您所见，生成的代码不错但并不完美，所以请把头放在肩膀上使用此工具，并每次检查结果以确保您的测试价值。 现在是时候将代码复制并粘贴到我们的测试文件中并改进其内容了。 让我们首先将测试名称从 更改为  ，并将 goto 值从 更改为 因为我们的基本根对应于主页。 test should win the player "X" 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 你可以 找到这篇文章的结果 在这里

Read My Stories

該音頻是用故事的原始語言製作的！

如何使用 Playwright 生成测试代码

About Author

註釋

標籤

这篇文章刊登在

Related Stories

成功云迁移的完整指南：策略和最佳实践

架构师指南：构建 AI/ML 数据湖参考架构

看不见的层面：为什么用户访谈是不可替代的资产

加密货币增长：创建有效的用户角色

成功云迁移的完整指南：策略和最佳实践

架构师指南：构建 AI/ML 数据湖参考架构

看不见的层面：为什么用户访谈是不可替代的资产

加密货币增长：创建有效的用户角色

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps