你好呀， 今天您将学习如何为您的测试生成代码。 首先，您必须运行该应用程序，因此在您的终端中输入  ，您的应用程序将在地址 启动并运行。 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

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

太長; 讀書

Boost your HackerNoon story @ $159.99! 🚀

如何使用 Playwright 生成测试代码

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Telegram：加密岛通往大陆的桥梁

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

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

如何将您的工作流程提高 10 倍：17 个必备应用程序

Telegram：加密岛通往大陆的桥梁

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

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

如何将您的工作流程提高 10 倍：17 个必备应用程序

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps