使用Cypress intercept方法校验登录用户名功能异常求助

代码问题及修正方案 #

你原有代码存在3个核心错误，修正后的可运行代码如下：

describe("cypressAssignment", () => {
  it('Login a user and validate his name via intercept', () => {
    // 拦截登录POST请求，校验请求携带的用户名
    cy.intercept('POST', '/web/index.php/auth/validate', (req) => {
      // 登录请求体为JSON格式，用户名字段为username
      expect(req.body.username).to.eq('Admin')
    }).as('loginRequest')
      
    cy.visit('https://opensource-demo.orangehrmlive.com')

    // 填写登录信息并提交
    cy.get('#username').type('Admin')
    cy.get('#password').type('admin123')
    cy.get('#btnLogin').click()

    // 等待请求完成，可选校验响应信息
    cy.wait('@loginRequest').then((interception) => {
      // 登录成功后响应中会返回success标识，可按需校验
      expect(interception.response.body).to.have.property('success')
    })

    // 校验登录成功跳转
    cy.url().should('include','dashboard')
  })
})

核心修改点说明 #

• 修正了元素选择器：原代码选中的是#divUsername、#divPassword两个外层div容器，无法输入内容，实际用户名输入框id为username、密码输入框id为password
• 修正了拦截路径：站点实际登录请求路径为/web/index.php/auth/validate，不是/auth/login，否则无法匹配到请求
• 修正了请求体校验逻辑：登录请求的body为JSON格式，用户名存储在username字段中，直接对整个body做包含校验无法匹配格式
• 移除了错误的响应断言：站点登录成功返回的响应体中没有name字段，原断言会报错，可根据实际返回结构按需添加响应校验

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