如何测试网站：使用 SIRV 和 Playwright 进行测试驱动开发 (TDD)- 技术经验 -卓越飞翔博客

我一直在为我们的婚礼和一个用于在旅行时翻译食物的食物翻译网站工作一些网站。我发现的有趣的事情之一是如何测试这些网站，并确保一切正常。

什么是测试驱动开发（tdd）？

我发现（或者更确切地说，被告知）的两个工具称为 sirv 和 playwright，可以帮助您运行网站并测试网站的某些部分。一旦完成一些测试并弄清楚如何让事情变得更好，您就可以根据这些测试进行更新和更改。这称为测试驱动开发，其中测试揭示了应用程序中的差距，并且您根据测试进行更改。

通常这些差距以测试失败的形式出现。例如，如果您的网站上有一个表单，但在根据饮食要求输入标点符号时失败，那么您可以更改表单输入以允许使用标点符号。这使您的应用程序更适合您的用户，并且您现在拥有基于您运行的原始测试的新功能。

那么如何为应用程序编写测试呢？

什么是 sirv 和剧作家？

sirv 是一个静态站点服务器。它是用于处理静态资产请求的优化中间件。因此，如果您有静态站点，sirv 效果最佳。

点击下载“电脑DLL修复工具”；

playwright 另一方面是一种针对 web 应用程序的测试方法。将它们一起使用意味着 playwright 是我们将用来编写和运行测试的工具。 sirv 是我们可以看到应用程序运行的界面，并查看哪些测试通过或失败。

编写测试

要测试您的代码，您需要编写测试。在此示例中，我正在编写一个测试来查看网页上是否有某个单词或标题。我使用 github copilot 帮助编写一个测试来执行此操作。 playwright 文档为我提供了编写测试的正确起点。

为了使用 playwright 进行测试写作，您需要导入它。这是编写测试的起点：

从'@playwright/test'导入{测试，期望}；

我为我们的婚礼建立了一个网站，我想测试一下页面上是否检测到标题“mish 和 max”。这是我用来测试这个的代码：

test('Contact Mish and Max', async ({ page }) =&gt; {
    // Navigate to the page
    await page.goto('http://localhost:8080/contact.html');

    // Assert that the title says "Contact Mish and Max"
    await expect(page).toHaveTitle("Contact Mish and Max")
});

您将向项目添加一个扩展名为 .spec.test 的新文件。确保保存它，并在每次进行更改时保存它。现在我们已经编写了测试，让我们运行它。

使用 sirv 和 playwright 进行测试

首先，您需要 node 才能使其工作。按照 node.js 文档中的指南安装适用于 windows、maco 或 linux 的 node。

准备好测试代码时，在 vs code 或您选择的编辑器中打开终端。我使用的是 vs code，因此这里的演示使用 vs code。通过从菜单栏中选择“查看 > 终端”或按 ctrl + ` 键盘快捷键来打开终端。

一旦有了终端，您需要运行一些命令：

npm install @playwright/test - 这通过安装测试库来设置 playwright 测试。

npx playwright install - 这会下载 chrome、firefox、safari 等的测试版本。

npx sirv-cli 。 - 这会运行本地版本的 sirv 进行测试。

现在您已经完成了 sirv 和 playwright 设置并准备就绪，我们可以运行测试了。在 vs code（或您选择的编辑器）中打开一个新终端，然后运行以下命令：

npx playwright test --ui 这将运行测试并打开一个新窗口，我们可以在其中运行并查看正在运行的测试。

这是上面运行的所有命令：