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

發行項
11/29/2022

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

單元測試

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

範例案例

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

一個字母
一個數字
一個特殊字元

因此，驗證這些需求的測試如下所示：

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. 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 測試總管的螢幕擷取畫面

後續步驟

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

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

單元測試

範例案例

專案結構

模擬 HTTP 要求

端對端測試

範例案例

UI 元件對應

測試組態

無介面與一般測試

執行測試

後續步驟

其他資源

其他資源