Angular应用Cypress E2E测试中app-root内容未注入的问题

• 验证访问URL一致性
  确保Cypress测试中cy.visit()的地址和你正常浏览器标签页访问的地址完全匹配，包括端口、base href等。如果正常访问的是http://localhost:4200/home，要么在cy.visit()里写全路径，要么在Cypress配置中设置baseUrl，避免相对路径导致的路由异常。

• 等待Angular路由初始化完成
  Cypress可能在Angular路由还未完成导航就执行断言，导致看不到路由内容。可以通过等待目标页面的专属元素或Angular路由状态来解决：

  cy.visit('/home');
  // 等待目标页面的标志性元素出现
  cy.get('.home-page-content').should('be.visible');
  
  // 或者直接等待路由激活状态
  cy.window().then(win => {
    const router = win.ng.probe(win.document.querySelector('app-root')).componentInstance.router;
    return router.isActive('/home', true);
  });
  

• 配置Cypress的baseUrl
  在cypress.config.js中明确设置baseUrl，统一测试的基础访问路径：

  const { defineConfig } = require('cypress');
  
  module.exports = defineConfig({
    e2e: {
      baseUrl: 'http://localhost:4200',
    },
  });
  

• 排查路由守卫与全局状态
  如果你的路由配置了守卫（如登录守卫），Cypress环境下可能因缺少登录状态或全局配置被拦截。可以在测试前置步骤中模拟必要状态：

  beforeEach(() => {
    // 模拟本地存储的登录token
    cy.window().then(win => {
      win.localStorage.setItem('auth-token', 'mock-valid-token');
    });
  });
  

• 检查异步初始化逻辑
  如果应用有异步初始化操作（如加载远程配置），可能导致路由延迟加载。可以在测试中等待初始化完成：

  cy.visit('/');
  // 等待初始化完成的标识（比如某个全局变量）
  cy.window().should('have.property', 'appInitialized', true);
  

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