Angular+Cypress测试：如何模拟点击懒加载菜单项？

你的测试失败主要有两个核心原因，对应解决方法如下：

1. 测试用例上下文独立，状态不共享 #

Cypress中每个it块是完全独立的，第二个it会重新初始化浏览器上下文，不会继承第一个it访问首页后的页面状态。所以第二个it执行时，页面还处于未访问首页的初始状态，自然找不到目标链接元素。

解决方法：

• 将两个步骤合并到同一个it中；
• 或者在每个it执行前通过beforeEach统一访问首页，避免重复代码。

2. 懒加载页面未等待加载完成 #

点击链接后，懒加载组件需要时间加载渲染，直接断言元素会因为元素未出现而失败，必须等待页面加载完成。

解决方法：

• 使用cy.location('hash')等待路由hash变化，确保页面导航完成；
• 用cy.contains()或cy.get(...).should('be.visible')自动等待元素出现，Cypress会默认等待4秒（可配置）直到元素出现。

修改后的测试代码示例 #

合并到单个it的写法 #

describe('Angular页面导航测试', () => {
  it('成功导航到懒加载的Angular页面1', () => {
    cy.visit('/')
    cy.contains('Welcome to') // 确保首页加载完成
    // 点击目标链接（也可以用文本选择器，比如cy.contains('对应的链接文本').click()，更稳定）
    cy.get('a[href="/#/angular-page/angular-page-content1"]').click()
    // 等待路由hash变化，确认导航完成
    cy.location('hash').should('eq', '#/angular-page/angular-page-content1')
    // 断言目标标题存在且文本正确
    cy.get('#title').should('have.text', 'Basic Template-Driven form and validation')
  })
})

保留多个it的写法（用beforeEach前置初始化） #

describe('1st. test', () => {
  beforeEach(() => {
    // 每个测试用例执行前都先访问首页并确认加载完成
    cy.visit('/')
    cy.contains('Welcome to')
  })

  it('访问首页验证', () => {
    cy.title().should('include', 'KLHome') // 可添加首页相关断言
  })

  it('导航到Angular页面1', () => {
    cy.get('a[href="/#/angular-page/angular-page-content1"]').click()
    cy.location('hash').should('eq', '#/angular-page/angular-page-content1')
    cy.get('#title').should('have.text', 'Basic Template-Driven form and validation')
  })  
})

额外建议：尽量避免依赖href属性作为选择器，因为前端路由可能动态生成，用链接的文本内容作为选择器会更稳定，降低代码维护成本。

内容的提问来源于stack exchange，提问作者L. Kvri