How to set a sessionStorage in Cypress?

在Cypress中设置 sessionStorage可以通过多种方式实现，这取决于您希望在测试执行的哪个阶段设置它。以下是一些设置 sessionStorage的方法：

直接在测试中设置

您可在测试运行期间，直接通过Cypress提供的API设置 sessionStorage。请看以下示例：

javascript
describe('SessionStorage Test', () => {
  it('should set an item in sessionStorage', () => {
    cy.visit('http://example.com'); // 替换为您要测试的页面
    cy.window().then((win) => {
      win.sessionStorage.setItem('key', 'value');
    });
  });
});

在这个例子中，cy.window()用来获取当前窗口的引用，然后可以对该窗口的 sessionStorage进行操作，比如使用 setItem方法设置一个键值对。

在Cypress命令中设置

您也可以创建自定义的Cypress命令来设置 sessionStorage。这样可以使得代码更加模块化且易于重用。示例如下：

javascript
Cypress.Commands.add('setSessionStorage', (key, value) => {
  cy.window().then((win) => {
    win.sessionStorage.setItem(key, value);
  });
});

describe('SessionStorage Test', () => {
  it('should set an item in sessionStorage using a custom command', () => {
    cy.visit('http://example.com'); // 替换为您要测试的页面
    cy.setSessionStorage('key', 'value');
  });
});

在这个例子中，我们通过 Cypress.Commands.add方法添加了一个名为 setSessionStorage的新命令来设置 sessionStorage。

在测试之前设置

如果您希望在测试开始之前设置 sessionStorage，可以使用 beforeEach来确保在每个测试开始前 sessionStorage都被设置：

javascript
describe('SessionStorage Test', () => {
  beforeEach(() => {
    cy.visit('http://example.com'); // 替换为您要测试的页面
    cy.window().then((win) => {
      win.sessionStorage.setItem('key', 'value');
    });
  });

  it('should have an item in sessionStorage', () => {
    cy.window().then((win) => {
      const item = win.sessionStorage.getItem('key');
      expect(item).to.equal('value');
    });
  });
});

在此示例中，beforeEach中的代码会在每个测试用例执行之前运行，设置 sessionStorage。

注意

当您使用Cypress对 sessionStorage进行操作时，请记住 sessionStorage是特定于每个页面的。这意味着需要在 cy.visit()或者页面加载完毕之后进行设置，否则当页面加载时，新的 sessionStorage实例可能会被创建，覆盖您的设置。