Cypress测试运行多次调用intercept拦截/articles/get请求失效问题

并不是Cypress阻止了接口调用，核心原因是Angular端的状态缓存和路由复用机制，导致第二次进入商品页面时没有发起请求：

1. 第一个测试用例执行完成后，商品列表数据已经被前端服务缓存到内存中，第二次进入商品页时，应用直接读取内存缓存，没有触发接口调用
2. 你在beforeEach中点击商品管理入口按钮时，Angular识别到当前路由已经是商品管理路由，默认不会重新初始化组件，不会触发组件初始化阶段的拉取列表逻辑
3. 手动操作时你大概率是从其他页面跳转或者刷新页面进入，会触发组件初始化和接口请求，和Cypress测试时的页面复用场景不一致

你可以根据实际场景选择以下任一方案：

• 每次测试前强制刷新页面：在beforeEach的点击操作前新增cy.reload()，保证每次都是全新的页面状态，Cypress默认会保留登录态的Cookie和LocalStorage，不会触发重新登录

beforeEach(() => {
    cy.reload()
    productManagementPage.shopArticlesProgrammingButton().click()
    shopArticlesPage.WaitUntilPageLoaded('/productmanagement/api/v1/articles/get', 'GetArticles')
})

• 修改Angular路由配置强制刷新：给商品管理路由新增runGuardsAndResolvers: 'always'配置，不管是不是当前路由，每次激活都执行路由对应的resolver逻辑发起请求
• 清理前端服务缓存：在商品列表组件的ngOnDestroy生命周期钩子中清理内存存储的商品列表数据，保证下次进入组件时必须重新拉取
• 调整测试流程切换路由：在每个测试用例执行完成后，点击跳转到其他页面（比如首页），保证下一次beforeEach点击商品管理入口时是路由切换场景，会触发组件初始化

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