如何在Cypress中实现未跳转首页时自动登录的测试逻辑？

方法1：通过条件判断动态执行登录逻辑 #

核心思路是先判断当前页面状态，仅在未登录（URL不包含/home）且登录元素存在时，才执行登录操作，避免已登录场景下找不到元素报错。

describe('React 应用登录测试', () => {
  it('已登录自动跳转首页，未登录则完成登录', () => {
    cy.visit('http://localhost:3000/');

    // 检查当前URL是否处于首页
    cy.url().then(currentUrl => {
      if (!currentUrl.includes('/home')) {
        // 先确认登录输入框存在，再执行输入操作，添加超时适配React渲染
        cy.get('input[type="text"]', { timeout: 5000 })
          .should('be.visible')
          .type('你的用户名');
        cy.get('input[type="password"]')
          .should('be.visible')
          .type('你的密码');
        cy.get('button[type="submit"]')
          .should('be.visible')
          .click();
        
        // 登录后验证跳转至首页
        cy.url().should('include', '/home');
      }
    });

    // 首页功能的后续测试断言
    cy.get('.home-page-container').should('be.visible');
  });
});

方法2：正确使用cy.session缓存登录状态 #

cy.session可以帮你持久化登录状态，避免重复登录，同时在会话初始化时自动处理“是否需要登录”的判断。

describe('React 应用登录测试', () => {
  beforeEach(() => {
    cy.session('用户登录会话', () => {
      cy.visit('http://localhost:3000/');
      
      // 仅在未登录时执行登录
      cy.url().then(currentUrl => {
        if (!currentUrl.includes('/home')) {
          cy.get('input[type="text"]').type('你的用户名');
          cy.get('input[type="password"]').type('你的密码');
          cy.get('button[type="submit"]').click();
          cy.url().should('include', '/home');
        }
      });
    });

    // 每次测试前访问首页，会话会自动恢复登录状态
    cy.visit('http://localhost:3000/');
  });

  it('登录后应处于首页', () => {
    cy.url().should('include', '/home');
    // 首页相关功能断言
  });
});

关键注意事项 #

• 永远不要直接硬查找登录元素，必须先通过URL或元素存在性判断是否需要执行登录步骤
• 给cy.get()添加{ timeout: xxx }参数，适配React应用的组件渲染速度，避免因元素未及时渲染导致报错
• cy.session会自动保留浏览器的localStorage/sessionStorage，适配token类的登录状态存储
• 如果登录后有接口请求，可添加cy.intercept()等待登录接口完成，确保状态完全生效

内容的提问来源于stack exchange，提问作者Ani23