首頁 > 文章 > web前端 > 如何測試網站：使用 SIRV 和 Playwright 進行測試驅動開發 (TDD)

如何測試網站：使用 SIRV 和 Playwright 進行測試驅動開發 (TDD)

王林原創: 2024-08-07 15:23:321038瀏覽

我一直在為我們的婚禮和一個用於在旅行時翻譯食物的食物翻譯網站工作一些網站。我發現的有趣的事情之一是如何測試這些網站，並確保一切正常。

什麼是測試驅動開發（TDD）？

我發現（或更確切地說，被告知）的兩個工具稱為 SIRV 和 Playwright，可以幫助您運行網站並測試網站的某些部分。一旦完成一些測試並弄清楚如何讓事情變得更好，您就可以根據這些測試進行更新和更改。這稱為測試驅動開發，其中測試揭示了應用程式中的差距，並且您根據測試進行更改。

通常這些差距以測試失敗的形式出現。例如，如果您的網站上有表單，但在根據飲食要求輸入標點符號時失敗，那麼您可以變更表單輸入以允許使用標點符號。這使您的應用程式更適合您的用戶，並且您現在擁有基於您運行的原始測試的新功能。

那麼如何為應用程式編寫測試呢？

什麼是 SIRV 和劇作家？

SIRV 是一個靜態網站伺服器。它是用於處理靜態資產請求的最佳化中間件。因此，如果您有靜態站點，SIRV 效果最佳。

另一方面，Playwright 是一種 Web 應用程式的測試方法。將它們一起使用意味著 Playwright 是我們將用來編寫和運行測試的工具。 SIRV 是我們可以看到應用程式運行的介面，並查看哪些測試通過或失敗。

編寫測試

要測試您的程式碼，您需要編寫測試。在此範例中，我正在編寫一個測驗來查看網頁上是否有某個單字或標題。我使用 GitHub Copilot 來幫助編寫一個測試來執行此操作。 Playwright 文件為我提供了編寫測試的正確起點。

為了使用 Playwright 進行測驗寫作，您需要匯入它。這是編寫測驗的起點：

從'@playwright/test'導入{測試，期望};

我為我們的婚禮建立了一個網站，我想測試一下頁面上是否檢測到標題「Mish 和 Max」。這是我用來測試這個的程式碼：

test('Contact Mish and Max', async ({ page }) => {
    // 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 這將運行測試並打開一個新窗口，我們可以在其中運行並查看正在運行的測試。

以下是以下是上面執行的所有指令：