Cypress cy.visit无法跳转至指定页面问题排查

我需要测试页面 http://localhost:4200/#/index/tools，在Cucumber中编写了步骤：

Given user navigates to tools
  Then a flowchart is displayed

对应的Cypress实现如下：

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';

Given('user navigates to tools', () => {
  cy.viewport(1532, 772);
  cy.visit('http://localhost:4200/#/index/tools');
});

Then('a flowchart is displayed', () => {
  cy.get('.flowchart').should('be.visible');
});

问题：Cypress始终停留在之前访问的/home页面，无法跳转到/tools页面，导致找不到.flowchart元素。尝试过添加.wait()、通过导航栏点击跳转，均未生效。

可能的原因及解决方案 #

1. Hash路由的访问方式问题 #

Cypress直接解析完整hash路径可能存在异常，可通过以下方式优化：

方案一：拆分baseUrl与hash参数

在cypress.config.js中配置baseUrl：

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

修改visit逻辑，单独指定hash：

Given('user navigates to tools', () => {
  cy.viewport(1532, 772);
  cy.visit('/', {
    hash: '#/index/tools'
  });
});

方案二：先验证路由跳转结果

跳转后先确认hash是否正确，避免元素断言前置：

Given('user navigates to tools', () => {
  cy.viewport(1532, 772);
  cy.visit('http://localhost:4200/#/index/tools');
  // 验证hash路由是否成功跳转
  cy.location('hash').should('eq', '#/index/tools');
});

2. 路由守卫拦截跳转 #

如果应用（如Angular项目）存在路由守卫（如AuthGuard），未满足条件时会自动跳回首页：

• 检查测试环境是否需要模拟登录状态，可通过cy.setCookie()或修改localStorage设置凭证
• 临时关闭测试环境中的路由守卫逻辑

3. 页面元素未完成异步加载 #

即使路由跳转完成，目标元素可能仍在加载，可延长等待时间：

Then('a flowchart is displayed', () => {
  // 延长超时时间至10秒，等待元素出现
  cy.get('.flowchart', { timeout: 10000 }).should('be.visible');
});

4. 导航栏点击步骤优化 #

若通过导航栏点击无效，可能是元素定位或时机问题，调整步骤如下：

Given('user navigates to tools via navbar', () => {
  cy.viewport(1532, 772);
  cy.visit('http://localhost:4200/#/index/home');
  // 等待下拉菜单可见后点击
  cy.get('#navbar-dropdown > a').should('be.visible').click();
  // 等待工具链接可见后点击，并验证跳转结果
  cy.get('#tools-link').should('be.visible').click();
  cy.location('hash').should('eq', '#/index/tools');
});

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