Cypress E2E测试：如何正确定位toast/弹窗并校验文本内容

问题根因 #

• 访问地址配置错误：测试代码中cy.visit()传入的URL重复写了https://前缀，错误地址为https://https://platform.wholesoftmarket.com/login，会导致页面加载异常，后续交互、元素定位全链路出错。
• 元素选择器不匹配：目标toast弹窗的容器类名为toast-container，代码中写的div.overlay-container和实际DOM类名不一致，无法匹配到目标元素。
• 查找范围限定错误：代码中先用cy.get('div')匹配页面第一个div元素，再通过within()限定仅在这个div内部查找目标弹窗。但toast类全局通知组件一般是直接挂载在<body>根节点下，不在业务div的嵌套范围内，范围限定后自然找不到元素。
• 未适配异步渲染时序：点击登录按钮后，接口请求返回、toast渲染都需要时间，原代码没有针对toast的异步渲染配置合理的等待超时，在元素渲染完成前就会触发超时报错。

正确测试实现代码 #

describe('Wholesoft Login Page', function(){
    it('Check Login popup', function(){
        // 修正访问地址的协议重复问题
        cy.visit('https://platform.wholesoftmarket.com/login')
        cy.get('#email').type('kj@gmail.com')
        cy.get('#password').type('hello')
        cy.get('button.btn.active').click()
        // 全局定位toast容器，配置10s超时适配异步渲染，断言可见性与文本内容
        cy.get('.toast-container', { timeout: 10000 })
          .should('be.visible')
          .and('contain.text', 'no record found')
    })
})

优化提示 #

• 若toast为自动消失类型，可根据接口实际响应速度调整timeout值，保证Cypress在toast销毁前完成元素捕获。
• 文本断言优先用contain.text做包含匹配，避免因为DOM内存在多余空白字符、图标子节点导致have.text全量匹配失败。
• 全局弹窗、通知、下拉菜单类挂载到body根节点的组件，不要用within()限定在业务组件DOM范围内查找，直接全局定位即可。

内容的提问来源于stack exchange，提问作者Mr.Prasad J