前言

在這篇文章中，我將介紹如何使用 Playwright 進行 Linear 的登入流程測試。Playwright 是一個強大的自動化測試工具，它支援多瀏覽器環境，並且可以輕鬆模擬使用者操作，特別適合端對端 (E2E) 測試。這使得我們在測試像登入這樣的流程時，可以自動化每一個步驟，確保每個操作都能正確執行。

下面這段程式碼會測試 Linear 登入頁面，首先模擬使用者輸入 Email 並驗證畫面上的多個元素是否正確顯示。

import { expect, test } from "@playwright/test";
import assert = require("node:assert");

test('get started link', async ({ page }) => {

    let test_email = 'test.user@icloud.com';

    await page.goto('https://linear.app/login');

    await page.click('button:has-text("Continue with email")');

    await page.fill('input[name="email"]', test_email);

    await page.click('button:has-text("Continue with Email")');

    assert(await page.isVisible('span:has-text("Check your email")'));
    assert(await page.isVisible("text=We've sent a temporary login link."));
    assert(await page.isVisible(`text=Please check your inbox at ${test_email}.`));
    assert(await page.isVisible('button:has-text("Enter code manually")'));
    assert(await page.isVisible('button:has-text("Back to login")'));

測試案例的結構

在撰寫測試案例時，通常會分為前置條件、測試步驟和驗證結果三個部分：

1. 前置條件：在這個例子中，我們準備了一個測試用的 Email (test.user@icloud.com)，這就是前置條件。前置條件可以是準備測試資料或是初始化某些設定，確保接下來的測試步驟能順利執行。

2. 測試步驟：模擬使用者在 Linear 登入頁面輸入 Email，並透過點擊按鈕進行登入。在這裡，我們模擬了以下步驟：

• 使用者輸入 Email
• 點擊「Continue with Email」
• 畫面提示檢查郵箱是否收到驗證碼

3. 驗證結果：驗證頁面上的多個關鍵元素是否正確顯示，這些元素包括提示文字和相關按鈕，確保每一步驟都正確執行。

取得驗證碼

以上的案例完成了登入流程的第一步。接下來，為了能夠自動化取得郵件中的驗證碼，我們會使用 MailSlurp 來處理測試中需要的收發郵件步驟。MailSlurp 能讓我們輕鬆建立臨時的 Email 信箱，並接收驗證碼或其他驗證郵件，這對於像登入流程或驗證碼功能測試特別有用。

我通常會把 MailSlurp 和 Playwright 測試工具結合使用，因為 MailSlurp 提供了 API，可以讓我們的測試流程從發送驗證 Email 到輸入驗證碼全部自動化處理。這不僅提高了測試效率，還能確保流程的穩定性。

結論

使用 Playwright 可以輕鬆模擬使用者的行為，特別適合進行端對端 (E2E) 測試。透過 Playwright，我們能自動化完成像登入流程這樣的重要操作，確保各個步驟都正確執行，並驗證畫面上的關鍵元素是否正確顯示。這種自動化測試方式大幅提升了測試效率，特別是在頻繁變更的開發環境中，能幫助快速檢測應用程式的穩定性和可靠性。

接下來，我們將結合 MailSlurp，來接收驗證碼並在 Playwright 中使用這個驗證碼，完成整個登入流程的測試。