測試自我裝載開發人員入口網站

本文說明如何為自我裝載入口網站設定單元測試和端對端測試。

單元測試

單元測試是驗證小型功能片段的方法。 其會與應用程式的其他部分隔離。

範例案例

在此案例中,您要測試密碼輸入控制項。 只接受至少包含以下內容的密碼:

  • 一個字母

  • 一個數字

  • 一個特殊字元

因此,驗證這些需求的測試如下所示:

const passwordInput = new PasswordInput();

passwordInput.value = "";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "password";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "p@ssw0rd";
expect(passwordInput.isValid.to.equal(true);

專案結構

通常會在應該驗證的元件旁邊保留單元測試。

component.ts
component.spec.ts

模擬 HTTP 要求

在某些情況下,您會預期元件發出 HTTP 要求。 元件應該適當地對不同類型的回應做出反應。 若要模擬特定的 HTTP 回應,請使用 MockHttpClient。 其會實作專案許多其他元件所使用的 HttpClient 介面。

const httpClient = new MockHttpClient();

httpClient.mock()
    .get("/users/jane")
    .reply(200, {
        firstName: "Jane",
        lastName: "Doe"
    });

端對端測試

端對端測試會執行特定使用者案例,並採取您預期使用者執行的實際步驟。在 Azure API 管理開發人員入口網站之類的 Web 應用程式中,使用者會捲動內容,並選取選項來達成特定結果。

若要複寫使用者瀏覽,您可以使用瀏覽器操作協助程式程式庫,例如 Puppeteer。 其可讓您模擬使用者動作,並將假設的案例自動化。 Puppeteer 也會在測試的任何階段自動擷取頁面或元件的螢幕擷取畫面。 稍後將螢幕擷取畫面與先前的結果進行比較,以攔截偏差和潛在迴歸。

範例案例

在此案例中,您必須驗證使用者登入流程。 此案例需要下列步驟:

  1. 開啟瀏覽器並瀏覽至此登入頁面。

  2. 輸入電子郵件地址。

  3. 輸入密碼。

  4. 選取 [登入]。

  5. 確認使用者已重新導向至首頁。

  6. 確認頁面包含 [設定檔] 功能表項目。 這是您成功登入的其中一個可能指標。

若要自動執行測試,請使用完全相同的步驟建立指令碼:

// 1. Open browser and navigate to the sign-in page.
const page = await browser.newPage();
await page.goto("https://contoso.com/signin");

// 2. Enter email.
await this.page.type("#email", "john.doe@contoso.com");

// 3. Enter password.
await this.page.type("#password", "p@s$w0rd");

// 4. Click Sign-in.
await this.page.click("#signin");

// 5. Verify that user got redirected to Home page.
expect(page.url()).to.equal("https://contoso.com");

// 6. Verify that the page includes the Profile menu item.
const profileMenuItem = await this.page.$("#profile");
expect(profileMenuItem).not.equals(null);

注意

「#email」、「#password」和「#signin」等字串是可識別頁面上 HTML 元素的類似 CSS 選取器。 若要深入瞭解,請參閱選取器層級 3 W3C 規格。

UI 元件對應

使用者流程通常會經歷相同的頁面或元件。 出現在每個頁面上的主要網站功能表是個良好的範例。

建立 UI 元件對應,以避免設定和更新每個測試的相同選取器。 例如,您可以使用兩行取代上述範例中的步驟 2 到 6:

const signInWidget = new SigninBasicWidget(page);
await signInWidget.signInWithBasic({ email: "...", password: "..." });

測試組態

某些案例可能需要預先建立的資料或組態。 例如,您可能需要使用社交媒體帳戶自動登入使用者。 很難快速或輕鬆地建立該資料。

為此,您可以將特殊組態檔新增至測試案例。 測試指令碼可以從檔案中挑選必要的資料。 根據組建和測試管線,測試可以從具名安全存放區提取秘密。

以下是儲存在 src 專案資料夾中的 validate.config.json 範例。

{
    "environment": "validation",
    "urls": {
        "home": "https://contoso.com",
        "signin": "https://contoso.com/signin",
        "signup": "https://contoso.com/signup/"
    },
    "signin": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            },
            "aadB2C": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    },
    "signup": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    }
}

無介面與一般測試

Chrome 或 Microsoft Edge 等新式瀏覽器可讓您在無介面模式和一般模式中執行自動化。 無介面模式瀏覽器在沒有圖形化使用者介面的情況下運作。 其仍會執行相同的頁面和文件物件模型 (DOM) 操作。 傳遞管線中通常不需要瀏覽器 UI。 在此情況下,在無介面模式中執行測試是絕佳的選項。

當您開發測試指令碼時,查看瀏覽器中的確切情況會很有用。 這是使用正常模式的好時機。

若要在模式之間切換,請變更 constants.ts 檔案中的選項 headless 選項。 其位於您專案中的 tests 資料夾:

export const LaunchOptions = {
    headless: false
};

另一個有用的選項是 slowMo。 該選項會在每個動作之間暫停測試的執行:

export const LaunchOptions = {
    slowMo: 200 // milliseconds
};

執行測試

在此專案中執行測試有兩種內建方式:

npm command

npm run test

測試總管

例如,適用於 VS Code 的測試總管擴充功能 (例如 Mocha 測試總管) 具有方便的 UI,以及可在原始程式碼的每個變更上自動執行測試的選項:

Visual Studio Code 測試總管的螢幕擷取畫面

後續步驟

深入了解開發人員入口網站: