使用 cypress-localstorage-commands 本地存储为空（赛普拉斯 e2e 测试）

Question

我有一个具有登录页面和仪表板页面的反应应用程序。只有登录后，才会重定向到仪表板页面。如果登录成功，身份验证信息令牌将存储在本地存储中。

当 cypress 运行测试文件时，我尝试登录一次，并且不想在每个测试用例后重新登录。所以，我正在使用 cypress-localstorage-commands，但它不起作用。

柏树版本：12.17.2 赛普拉斯本地存储命令版本：2.2.4

cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  e2e : {
    setupNodeEvents(on, config) {
      require("cypress-localstorage-commands/plugin")(on, config);
      return config;
    },
    env: {
      LOCAL_STORAGE_MEMORY: "true",
    },
  }
});

柏树/支持/e2e.ts

import "./commands";
import 'cypress-localstorage-commands';

cypress/support/commands.ts

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject> {
     login(email ?: string, password ?: string): Chainable<any>;
  }
}

Cypress.Commands.add("login", (email = "[email protected]", password = "admin") : void => {
  cy.visit("http://localhost:3000/login");
  
  cy.get("input[name=\"email\"]").type(email);
  cy.get("input[name=\"password\"]").type(password);
  cy.get("button[type=\"submit\"]").click();

  cy.wait(3000);
});

cypress/e2e/dashboard.ts

describe("Dashboard Page", () => {
  before(() => {
    cy.clearLocalStorageSnapshot();
    cy.login();
  });
  
  beforeEach(() => {
    cy.restoreLocalStorage();
    cy.visit(ANALYTICS_PATH);
  });
  afterEach(() => {
    cy.saveLocalStorage();
  });

  it("should navigate to the dashboard page and see its content", () => {
    cy.contains("Products").should("exist");
    cy.contains("Number of Products").should("exist");
    cy.contains("Carts").should("exist");
  });
});

它成功登录，我可以看到我的仪表板页面，但是，在等待（3000）之后，它返回到登录页面并出现此错误：

• 包含产品
• 断言 DOM 中存在预期未定义

Answer 1

步骤顺序错误，看这一段

  before(() => {
    cy.clearLocalStorageSnapshot();
    cy.login();
  });
  
  beforeEach(() => {
    cy.restoreLocalStorage();
    cy.visit(ANALYTICS_PATH);
  });

登录设置了本地存储值，但您直到

afterEach()

才保存LS。

将保存移至登录后似乎合乎逻辑

  before(() => {
    cy.clearLocalStorageSnapshot();
    cy.login();
    cy.saveLocalStorage();
  });
  
  beforeEach(() => {
    cy.restoreLocalStorage();  // now there is something to restore!
    cy.visit(ANALYTICS_PATH);
  });

---

但是

cy.session()

要简单得多，你可以去掉

cypress-localstorage-commands

。

beforeEach(() => {
  cy.session('login', () => {
    cy.login();
  })
})

上面只会调用登录一次，尽管处于

beforeEach()

，因为它是一个缓存命令。

现在您可以完全忘记本地存储调用，Cypress 会话命令正在为您处理这一切。