关于Cypress中仅新URL对应的intercept()关联wait()未触发的技术咨询

我来帮你分析下你遇到的这个问题——为什么前面三个请求的wait都能正常触发，唯独@login的wait死活没反应？核心原因其实是**cy.intercept只能拦截HTTP请求，而你页面跳转到/login的行为不是一个可被拦截的HTTP请求**，具体分两种情况来看：

为什么@login的拦截没生效？ #

情况1：服务器端重定向 #

当你访问/时，如果服务器返回3xx重定向到/login，Cypress的cy.visit()会自动跟随这个重定向流程。这时候浏览器并没有单独发起一个GET /login的请求（或者说这个请求已经被cy.visit()内部处理了），所以你定义的cy.intercept('http://localhost:3002/login')根本抓不到任何请求，自然wait不会触发。

情况2：客户端路由跳转 #

如果是页面加载后通过JS（比如Next.js的router.push）触发的路由跳转到/login，这种跳转完全是客户端行为，没有任何HTTP请求发送到服务器，cy.intercept当然也抓不到任何东西。

正确的解决方案 #

根据你的场景，我给你几个可行的修改方案：

方案1：等待URL变化或页面元素加载（最推荐） #

既然wait('@login')行不通，不如直接等待跳转完成后的状态——要么检查URL是否包含/login，要么等待登录页面的关键元素出现，确保页面加载完成：

describe('login', () => { 
  it('login', () => { 
    cy.intercept('/_next/static/development/_devMiddlewareManifest.json').as('fetch1') 
    cy.intercept('http://localhost:3333/auth/works/token-check').as('fetch2') 
    cy.intercept('/_next/static/development/_devPagesManifest.json').as('fetch3') 

    cy.visit('/') 
    // 合并等待三个请求，比单独写三个wait更高效
    cy.wait(['@fetch1', '@fetch2', '@fetch3']) 

    // 等待URL跳转到/login
    cy.url().should('include', '/login')
    // 额外等待登录页面的输入框出现，确保页面完全加载
    cy.get('input[name="username"]').should('be.visible')
  }) 
})

方案2：拦截初始的根路径请求（针对服务器重定向） #

如果你确实想验证重定向行为，可以拦截访问/的请求，检查它的重定向响应：

describe('login', () => { 
  it('login', () => { 
    cy.intercept('/_next/static/development/_devMiddlewareManifest.json').as('fetch1') 
    cy.intercept('http://localhost:3333/auth/works/token-check').as('fetch2') 
    cy.intercept('/_next/static/development/_devPagesManifest.json').as('fetch3') 

    // 拦截根路径请求，检查重定向
    cy.intercept('GET', '/', (req) => {
      req.continue((res) => {
        // 验证是重定向状态码
        expect(res.statusCode).to.be.oneOf([301, 302])
        // 验证重定向目标是/login
        expect(res.headers.location).to.include('/login')
      })
    }).as('rootRequest')

    cy.visit('/') 
    cy.wait(['@fetch1', '@fetch2', '@fetch3', '@rootRequest']) 

    cy.url().should('include', '/login')
  }) 
})

方案3：监听客户端路由事件（针对Next.js等单页应用） #

如果是Next.js的客户端路由跳转，可以通过监听路由的push方法来验证跳转行为：

describe('login', () => { 
  it('login', () => { 
    cy.intercept('/_next/static/development/_devMiddlewareManifest.json').as('fetch1') 
    cy.intercept('http://localhost:3333/auth/works/token-check').as('fetch2') 
    cy.intercept('/_next/static/development/_devPagesManifest.json').as('fetch3') 

    // 在访问页面前，监听Next.js的router.push方法
    cy.window().then((win) => {
      cy.stub(win.next.router, 'push').as('routerPush')
    })

    cy.visit('/') 
    cy.wait(['@fetch1', '@fetch2', '@fetch3']) 

    // 验证路由跳转被调用
    cy.wait('@routerPush').should('be.calledWith', '/login')
    cy.url().should('include', '/login')
  }) 
})

总结一下 #

记住这个关键知识点：cy.intercept只能拦截HTTP请求（比如API调用、静态资源加载、XHR/fetch请求），无法拦截浏览器的页面导航行为。等待页面跳转完成，优先用URL断言或元素可见性断言，这比等待一个不存在的请求可靠得多。

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