How to clear local storage in Cypress test?

在 Cypress 中清除本地存储是一个重要的步骤，特别是在进行需要验证应用状态或用户登录信息的 E2E 测试时。Cypress 提供了多种方法来清理本地存储，以下是一些常用的方法：

1. 使用 cy.clearLocalStorage() 方法

最直接的方法是使用 Cypress 提供的 cy.clearLocalStorage() 命令。这个命令可以在测试运行的任何时点被调用，用以清除浏览器的所有本地存储数据。你可以在测试的 beforeEach 钩子中调用它来确保每个测试用例都在清洁的环境下运行：

javascript
describe('用户登录流程测试', () => {
  beforeEach(() => {
    // 清除所有本地存储
    cy.clearLocalStorage();
  });

  it('登录应该成功并跳转到用户主页', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('testpassword');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/user-home');
  });
});

2. 仅清除特定的本地存储项

如果你只需要清除本地存储中的特定项，可以向 cy.clearLocalStorage() 方法传递一个正则表达式或字符串作为参数，这允许你更精确地控制哪些数据被清除：

javascript
describe('保存搜索历史', () => {
  beforeEach(() => {
    // 仅清除与搜索相关的本地存储项
    cy.clearLocalStorage(/searchHistory/);
  });

  it('应当保存用户的搜索历史', () => {
    cy.visit('/search');
    cy.get('input[name="search"]').type('Cypress');
    cy.get('form').submit();
    // 检查本地存储中是否保存了搜索历史
    cy.window().then((win) => {
      expect(win.localStorage.getItem('searchHistory')).to.include('Cypress');
    });
  });
});

3. 在测试结束时清除本地存储

有时候，你可能希望保持测试过程中的本地存储状态，直到测试完成后再进行清理。这可以通过在 afterEach 或 after 钩子中调用 cy.clearLocalStorage() 来实现：

javascript
describe('多个测试用例涉及本地存储的场景', () => {
  afterEach(() => {
    // 在每个测试完成后清除本地存储
    cy.clearLocalStorage();
  });

  it('测试用例1', () => {
    // 执行一些会影响本地存储的操作
  });

  it('测试用例2', () => {
    // 执行其他一些会影响本地存储的操作
  });
});

通过这些方法，你可以有效地管理 Cypress 测试中的本地存储，以确保每个测试用例都能在预期的环境状态下运行。