如何使用Cypress实现UI正向与反向测试自动化？

反向登录场景（错误账号密码） #

原有代码已经覆盖了核心逻辑，可补充更严谨的校验规则避免误判：

• 用例执行前先重置登录页环境，避免上一个用例的操作影响当前结果
• 点击登录后除了校验错误提示存在，额外增加可见性校验、路由校验，避免提示被隐藏的异常场景

优化后代码示例：

// 所有用例执行前统一访问登录页，重置环境
beforeEach(() => {
  cy.clearLocalStorage()
  cy.clearCookies()
  cy.visit('/login') // 替换为实际登录页路由
})

it('错误账号密码登录失败校验', function(){
  // 前置校验：错误提示默认不显示
  cy.contains('Invalid Username or Password').should('not.exist')
  // 输入错误账号密码
  cy.get('input[type="text"]').type('admins')
  cy.get('input[type="password"]').type('admins')
  // 点击登录按钮
  cy.get('.MuiButton-label').contains('LOGIN').should('be.visible').click()
  // 结果校验1：错误提示正常展示
  cy.contains('Invalid Username or Password').should('be.visible')
  // 结果校验2：仍停留在登录页，未发生跳转
  cy.location('pathname').should('eq', '/login')
  // 结果校验3：登录按钮仍可点击，没有跳转到其他页面
  cy.get('.MuiButton-label').contains('LOGIN').should('be.visible')
})

正向登录场景（正确账号密码） #

原有代码只完成了操作步骤，缺少结果校验逻辑，需补充登录成功的特征校验：

• 校验路由跳转到登录后的目标页面
• 校验登录后独有的页面元素正常展示
• 校验登录相关的身份凭证已正常写入

优化后代码示例：

it('正确账号密码登录成功校验', function(){
  // 输入正确账号密码
  cy.get('input[type="text"]').type('admin')
  cy.get('input[type="password"]').type('admin')
  // 点击登录按钮
  cy.get('.MuiButton-label').contains('LOGIN').should('be.visible').click()
  // 结果校验1：成功跳转到登录后页面（替换为实际的目标路由）
  cy.location('pathname').should('eq', '/dashboard')
  // 结果校验2：登录后独有元素正常展示，比如用户头像、欢迎语、退出按钮等
  cy.get('.user-avatar').should('be.visible')
  cy.contains('欢迎您，admin').should('exist')
  // 结果校验3：登录凭证已正常写入（可选，根据实际业务存储方式调整）
  cy.getCookie('userToken').should('exist')
})

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