登录Orange HRM Demo后无法探索页面——Cypress测试问题咨询

我针对Orange HRM Demo站点编写了Cypress自动化测试代码，第一个it块实现了访问登录页、验证页面元素并完成登录操作；但执行第二个it块时，Cypress跳转到默认空白页面，无法探索页面或测试任何元素。我通过在beforeEach()块中添加前置登录步骤（访问登录页、输入用户名和密码）解决了该问题，想咨询这是否是唯一的解决方案。

原始测试代码 #

describe("Demo Site Automation - Orange HRM Demo ", function(){
    it("Logging in Into the site", function(){
        cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login');
        cy.get('div[class="orangehrm-login-form"] p:nth-child(2)').should('exist');
        cy.get('div[class="orangehrm-login-form"] p:nth-child(2)').should('be.visible');
        cy.get('div[class="orangehrm-login-error"] p:nth-child(1)').should('have.text', 'Username : Admin');
        cy.get('div[class="orangehrm-login-form"] p:nth-child(2)').should('have.text', 'Password : admin123');
        cy.get('.oxd-text.oxd-text--p.orangehrm-login-forgot-header').should('have.text', 'Forgot your password? ');
        cy.get('button[type="submit"]').should('have.text', ' Login ').click();
    })

    it("Exploring the site", function(){
        const required_array = ['Admin','PIM', 'Recruitment', 'Time', 'My Info', 'Performance', 'Dashboard', 'Directory', 'Maintenance', 'Claim', 'Buzz'];
        required_array.forEach(i => {cy.get('.oxd-main-menu-search').should('be.visible')
        cy.get('.oxd-main-menu-search').type(i)
        //cy.get('.oxd-text oxd-text--span oxd-main-menu-item--name').should('be.visible')
        cy.get('.oxd-main-menu-search').type('{selectall}')
        cy.wait(2000)
        cy.get('.oxd-main-menu-search').type('{backspace}')
        cy.wait(3000)})
        cy.wait(10000)
        cy.get('i[class="oxd-icon bi-stopwatch"]').click()
        cy.get('.oxd-text oxd-text--h6 orangehrm-main-title').should('have.text', 'Punch Out')
        cy.get('.oxd-textarea oxd-textarea--active oxd-textarea--resize-vertical').type('What is Lorem Ipsum?')
    })
})

修改后的beforeEach()代码 #

beforeEach(() => { cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login'); cy.get('input[placeholder="Username"]').type('Admin'); cy.get('input[placeholder="Password"]').type('admin123'); })

解决方案不止一种 #

你用beforeEach()的方法是可行的，但不是唯一方案，以下几种方式也能解决问题：

1. 使用before()替代beforeEach() #

如果所有测试用例都依赖同一登录状态，可以把登录逻辑放在before()中——它只会在整个describe块执行前运行一次，而非每个it块都重复执行，能提升测试效率。注意你的修改代码里漏掉了点击登录按钮的步骤，需要补上才能完成登录：

before(() => { 
  cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login'); 
  cy.get('input[placeholder="Username"]').type('Admin'); 
  cy.get('input[placeholder="Password"]').type('admin123');
  cy.get('button[type="submit"]').click(); // 补充登录操作
})

2. 保存并复用登录Cookie #

通过捕获登录后的Cookie，后续测试直接注入Cookie跳过登录流程，这是更高效的方式，尤其适合大量需要登录状态的测试：

describe("Demo Site Automation - Orange HRM Demo ", function(){
  before(() => {
    // 仅执行一次登录，保存Cookie
    cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login');
    cy.get('input[placeholder="Username"]').type('Admin');
    cy.get('input[placeholder="Password"]').type('admin123');
    cy.get('button[type="submit"]').click();
    cy.getCookie('orangehrm').then(cookie => {
      Cypress.env('orangehrm_cookie', cookie);
    });
  })

  beforeEach(() => {
    // 每个测试前注入Cookie，直接进入已登录状态
    const cookie = Cypress.env('orangehrm_cookie');
    cy.setCookie(cookie.name, cookie.value, {
      domain: cookie.domain,
      path: cookie.path
    });
    cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/dashboard/index'); // 直接访问首页
  })

  // 你的测试用例...
})

3. 合并操作到同一个it块（不推荐） #

把登录和页面探索的逻辑放在同一个it块里，状态会自然保留，但这种做法违背了测试用例的原子性原则——每个it应该只验证一个独立功能，不利于问题定位和维护，所以不建议使用。

为什么第二个it块会跳转到空白页 #

Cypress的每个it块都是完全独立隔离的，执行完一个it后，会自动清除所有浏览器状态（包括Cookie、LocalStorage等），因此第一个it的登录状态无法传递到第二个it。第二个it直接尝试操作页面元素，但此时既未登录也未访问正确页面，所以显示空白。

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