Angular Cypress测试无法找到含.btn-warning类的按钮问题排查

问题原因 #

1. contains()方法用法错误：Cypress的contains()默认是根据文本内容查找元素，你传入.btn-warning选择器时，它会尝试找包含文本.btn-warning的元素，而非匹配该类选择器的元素，这就导致定位失败。
2. 硬等待不可靠：wait(4000)是固定时长等待，可能因接口响应快慢出现等待不足或冗余的情况，应该用Cypress的自动等待机制替代。

修正后的代码方案 #

方案1：通过类选择器定位按钮 #

cy.get('app-navbar')
cy.contains('Project Design').click()
cy.contains('Open an Existing Project').click()
// 自动等待"Investments"所在行加载完成并可见
cy.contains('tr', 'Investments').should('be.visible')
// 在目标行内查找按钮并点击
cy.contains('tr', 'Investments').find('.btn-warning').click()

方案2：通过按钮文本定位（更直观） #

cy.get('app-navbar')
cy.contains('Project Design').click()
cy.contains('Open an Existing Project').click()
// 直接定位目标行内的"Select"按钮
cy.contains('tr', 'Investments').contains('Select').click()

关键说明 #

• cy.contains('tr', 'Investments')直接定位包含文本"Investments"的<tr>元素，比parent()更精准，避免层级混淆。
• Cypress的断言（如should('be.visible')）会自动等待元素出现，无需硬编码等待时长，测试稳定性更高。

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