一、实际项目场景
在UI自动化测试的实践中，我们常遇到页面元素状态与数据加载不同步的棘手问题。以某支付系统测试场景为例，当编写自动化脚本时发现：弹窗中的"下一步"按钮在页面数据尚未完成加载时，就已呈现可点击状态。这种设计导致脚本执行速度远快于实际数据加载，当脚本抢先点击按钮时，系统会因缺少必要参数而抛出"~~不能为空"的异常错误。
为解决这个时序问题，我们采用Cypress的智能等待机制，通过断言验证输入框的value属性。
具体实现分为三步：首先通过`cy.get('input[placeholder="请输入~~"]')`定位目标元素，设置10秒超时阈值应对网络波动；
接着使用`scrollIntoView()`确保元素在可视区域内，避免因页面滚动导致的定位失败；
最后通过`.should($input => { expect($input.val()).not.to.be.empty })`构建自定义断言，持续轮询检查输入框是否已填充数据。
这种显式等待方式比固定延迟更可靠，既能避免竞态条件，又不会过度延长测试周期。当且仅当~~字段完成数据填充后，脚本才会执行后续的点击操作，从而确保测试流程的稳定性。
二、实际项目使用
截图：
截图内容（可复制）：
// 等待接口返回卡号内容
cy.get('input[placeholder="请输入~~"]', { timeout: 10000 })
.scrollIntoView()
.should('be.visible')
.should($input => {
// 等待 value 属性有值
expect($input.val()).not.to.be.empty
})
