Cypress页面加载超时get()定位错误按钮无法选择货币如何解决？

定位失败的核心原因 #

1. 你使用的css-2b097c-container是前端React组件打包时自动生成的哈希类名，这类类名会随版本迭代、打包配置修改发生变化，属于极不稳定的定位依据，Cypress运行时找到的很可能是页面里其他同动态类的元素。
2. 你写的cy.get('[class=" css-2b097c-container"]', { timeout: 20000 })没有附加可见性断言，Cypress只会校验元素存在于DOM中，不会等元素渲染可见、可交互就执行后续的点击按钮逻辑，此时页面还没渲染完目标按钮，自然定位不到正确元素。

完整可运行实现代码 #

describe('汇率查询测试', () => {
  it('选择EUR货币并校验24小时汇率为正值', () => {
    cy.visit('https://spectrocoin.com/en/bitcoin-price-rates.html')

    // 定位货币下拉框并点击展开，优先用稳定属性避免动态类影响
    cy.contains('Currency')
      .parent()
      .find('[class*="react-select-container"]')
      .should('be.visible')
      .click()

    // 下拉框展开后选择EUR选项
    cy.get('[role="option"]')
      .contains('EUR')
      .should('be.visible')
      .click()

    // 校验24小时汇率为正值
    cy.contains('24h')
      .parent()
      .find('span')
      .invoke('text')
      .then(rateText => {
        // 提取数值，去掉百分号和多余符号
        const changeRate = parseFloat(rateText.trim().replace('%', ''))
        expect(changeRate).to.be.greaterThan(0)
      })
  })
})

逻辑说明 #

• 定位下拉框时先通过稳定的页面文本「Currency」锚定区域，再向下查找下拉容器，完全规避动态类的不稳定问题，附加should('be.visible')确保元素可交互后再执行点击。
• 下拉选项的role="option"是W3C标准的下拉选项属性，不会随便修改，用contains匹配EUR文本即可精准选中目标货币。
• 最后通过24h文本锚定汇率区域，提取数值后做大于0的断言即可完成需求。

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