賽普拉斯在使用固定裝置時不會存根我的請求

Question

我正在嘗試使用賽普拉斯為我的 Angular 應用程序創建 e2e 測試。 到目前為止，我設法整理了基礎知識，現在我正在嘗試存根網絡請求。

我創建了一些固定裝置並創建了一個自定義命令：

Cypress.Commands.add('login', (email, password, happy = false) => {
    let auth_url = Cypress.env('auth_url');
    console.log(auth_url);

    cy.get('[data-cy=email]').as('email');
    cy.get('[data-cy=password]').as('password');
    cy.get('[data-cy=login-form]').as('form');

    cy.location('pathname').should('equal', '/login');

    cy.get('@email').type(email);
    cy.get('@password').type(password);

    cy.get('@form').submit();

    cy.fixture(happy ? 'successful-login.json' : 'failed-login.json').then((json) => {
        console.log(json);
        cy.intercept(`${auth_url}/connect/token`, json).then(() => {
            if (!happy) return;

            cy.fixture('current-user.json').then((currentUser) => {
                console.log(currentUser);
                cy.intercept(`/users/**`, currentUser);
            });
        });;
    });
});

我的裝置是： successful-login.json ：

{
    "access_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjRGNEVBQzE4N0Y5QUM1MTE4NjhFNTQ5OTA5RUIzOEQxIiwidHlwIjoiYXQrand0In0.eyJuYmYiOjE2MTYwMDgxNTksImV4cCI6MTYxNjAxMTc1OSwiaXNzIjoiaHR0cHM6Ly9zeHAtZGV2ZWxvcC1pZGVudGl0eS5henVyZXdlYnNpdGVzLm5ldCIsImF1ZCI6WyJzeHAiLCJpZGVudGl0eS1zZXJ2ZXIiXSwiY2xpZW50X2lkIjoiY2xpZW50Iiwic3ViIjoiYTIzM2Q0MDgtMjVjMi00ODZhLWFlMzgtOTMzMTk5YjU2OWRkIiwiYXV0aF90aW1lIjoxNjE2MDA4MTU4LCJpZHAiOiJsb2NhbCIsInJvbGUiOiJBZG1pbmlzdHJhdG9yIiwicGVybWlzc2lvbiI6WyJ1c2VyczpyZWFkIiwidXNlcnM6d3JpdGUiXSwianRpIjoiQTRDNjREMzk0RTcyNEY3QUE1NzRFQUNEMjA2ODM4RkIiLCJpYXQiOjE2MTYwMDgxNTksInNjb3BlIjpbImlkZW50aXR5OnJlYWQiLCJpZGVudGl0eTp3cml0ZSIsInN4cDpyZWFkIiwic3hwOndyaXRlIl0sImFtciI6WyJwd2QiXX0.e-TX3u3o8UJZ9nq7nyuMFWfRyjEh55CwWQSHhfFxt677_qCu6pJ1cuHHOMjMV0lc-hTXjbe-4lZ7oOVfOZA_gByFo6mFpq8co__Npj1YpMt18LOSuewspKldffgCZQm2wIKTqSmMIQoFDRoUmAmcBsbJZIqSx4KMYBz7OfsBmdU7TeNi8bjtLcglzBxgYko7njJuC9j1EarR9BC-tjPIb0eoROclfQlPcYb05T4RRMzi3dpFExEXzFMaiMnR8_q0VOPWzeL0phFcjm-r1nVTVvrRcCtvI3GPPxr5EshT4XHcg6pmxx8BUlWXI6u1gSnWShmvXP5n87HJTCjsJh8sEQ",
    "expires_in": 3600,
    "token_type": "Bearer",
    "scope": "identity:read identity:write sxp:read sxp:write"
}

登錄失敗。json

{ "error": "invalid_grant", "error_description": "invalid_username_or_password" }

最后， current-user.json ：

{
    "success": true,
    "failure": false,
    "error": null,
    "result": {
        "jobTitle": null,
        "image": null,
        "createdBy": "00000000-0000-0000-0000-000000000000",
        "updatedBy": "00000000-0000-0000-0000-000000000000",
        "dateCreated": "2021-02-26T11:23:18.074899",
        "dateUpdated": "2021-02-26T11:23:18.0749379",
        "deleted": false,
        "roles": null,
        "id": "a233d408-25c2-486a-ae38-933199b569dd",
        "emailConfirmed": true,
        "concurrencyStamp": "0246797d-fd93-4723-a142-95d5213f9ec7",
        "phoneNumber": null,
        "phoneNumberConfirmed": false,
        "twoFactorEnabled": false,
        "lockoutEnd": "2021-03-17T16:04:59.7781333+00:00",
        "lockoutEnabled": true,
        "accessFailedCount": 0
    },
    "message": null
}

規范文件如下所示：

/// <reference types="Cypress" />

describe('login workflow', () => {
    it('does not work with wront credentials', () => {
        const email = 'user@example.com';
        const password = 'test';

        cy.visit('/');

        cy.login(email, password).as('loginRequest').then(() => {
            cy.contains('.mat-simple-snackbar span', 'Invalid username or password.');
        });
    });

    it('happy path test', () => {
        const email = 'user@example.com';
        const password = 'test';

        cy.visit('/');
        cy.location('pathname').should('equal', '/login');

        cy.login(email, password, true).as('loginRequest').then(() => {
            cy.location('pathname').should('equal', '/');
        });
    });
});

我遇到的問題是，即使測試都說路由正在被存根：

實際的請求不是：

第一個測試通過，因為用戶名和密碼不正確，即使沒有存根響應，但第二個測試失敗：

因為它不會存根響應：

有誰知道我做錯了什么？

Answer 1

在先前攔截的.then()中設置新攔截似乎可能是一個問題。 在最后一次攔截之后沒有任何執行會觸發它。

由於應在觸發發生之前設置攔截，因此以下內容應（幾乎）在邏輯上等效，

Cypress.Commands.add('login', (email, password, happy = false) => {

  cy.intercept(`/users/**`, { fixture: 'current-user.json' });

  const auth_url = Cypress.env('auth_url');
  const loginFixture = happy ? 'successful-login.json' : 'failed-login.json';
  cy.intercept(`${auth_url}/connect/token`, { fixture: loginFixture });

  cy.get('[data-cy=email]').as('email');
  cy.get('[data-cy=password]').as('password');
  cy.get('[data-cy=login-form]').as('form');

  cy.location('pathname').should('equal', '/login');

  cy.get('@email').type(email);
  cy.get('@password').type(password);

  cy.get('@form').submit();
});

唯一的區別是即使auth攔截失敗，也會設置/users攔截，但無論如何您都在控制該結果（使用happy ），所以這應該產生相同的結果