Next.js项目Cypress登录测试cy.wait()超时问题求助

问题核心原因 #

1. 请求方法不匹配：你拦截的是POST请求，但后端实际提供的是GET类型的/api/login接口，Cypress自然找不到对应请求。
2. NextAuth 请求路径差异：登录按钮调用的signIn("credentials")不会直接请求后端的/api/login，而是先调用NextAuth自身的回调接口（默认路径类似/api/auth/callback/credentials），再由NextAuth的配置逻辑去调用后端接口。

具体解决步骤 #

步骤1：修正拦截目标 #

先明确实际发送的请求信息：

• 点击登录按钮时，打开浏览器开发者工具的Network面板，查看真实发送的请求URL和方法。
• 根据实际请求调整cy.intercept：
  • 如果要拦截NextAuth的回调请求：

    cy.intercept('POST', '/api/auth/callback/credentials').as('signInRequest')
    

    之后等待该请求：

    cy.wait('@signInRequest')
    

  • 如果确实需要拦截后端的GET /api/login：

    cy.intercept('GET', 'http://localhost:5000/api/login').as('myGetRequest')
    

    再用cy.wait('@myGetRequest')等待。

步骤2：检查NextAuth配置逻辑 #

确认NextAuth的authorize函数是否正确调用了后端的GET /api/login接口，示例配置如下：

// app/api/auth/[...nextauth]/route.js
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        // 这里需确保调用了后端的GET /api/login接口
        const res = await fetch(`http://localhost:5000/api/login?username=${credentials.username}&password=${credentials.password}`, {
          method: 'GET'
        })
        const user = await res.json()

        return user ? user : null
      }
    })
  ]
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

如果authorize中没有调用后端接口，自然不会触发对应请求，Cypress也无法拦截。

步骤3：验证请求是否发送 #

在Cypress测试运行时，点击顶部导航栏的「Network」面板，查看是否有目标请求发送。如果没有，优先修复前端登录逻辑，确保请求正常触发。

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