Cypress验证点击提交按钮后模态框内标签对应状态的实现问题

你原有代码的逻辑是关闭模态框后校验表格内的标签状态，不符合「校验模态框内标签对应状态」的要求，核心调整是在模态框可见时，限定查找范围为模态框内部，直接校验状态即可，修正后的代码如下：

// 点击submit按钮呼出模态框
cy.get('.btn.btn-primary').contains('submit').click()

// 限定查找范围为已加载完成的模态框内部，避免命中页面其他区域的元素
// 注意：此处.modal为模态框容器的通用类名，替换为你实际项目中模态框的类名即可
cy.get('.modal').should('be.visible').within(() => {
  // 校验模态框内展示的目标标签
  cy.get('.form-header').should('contain.text', 'abc')
  // 直接校验模态框内该标签对应的状态为positive
  cy.get('.badge-label').should('contain.text', 'positive').and('be.visible')
})

// 校验完成后关闭模态框
cy.get('.close-modal').click()

如果模态框内存在多组标签+状态的组合，可以先提取模态框内展示的标签文本，再关联校验对应状态，适配场景的代码如下：

cy.get('.btn.btn-primary').contains('submit').click()
cy.get('.modal').should('be.visible').within(() => {
  // 先提取模态框内的标签文本
  cy.get('.form-header').invoke('text').then(currentTag => {
    // 匹配该标签对应的状态元素完成校验
    cy.contains('td', currentTag.trim()).siblings('.badge-label').should('contain.text', 'positive')
  })
})
cy.get('.close-modal').click()

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