如何在Cypress中定位带有随机ID的元素

当元素ID为随机生成时，不要依赖ID定位，可采用以下几种可靠方法：

• 利用固定属性定位
  优先使用测试专用属性（如data-testid）或固定的class、type等属性，示例：

  // 测试专用属性
  cy.get('[data-testid="submit-btn"]')
  // 固定class
  cy.get('.primary-submit')
  // 固定type属性
  cy.get('input[type="email"]')
  

• 基于文本内容定位
  如果元素有固定显示文本，用contains精准定位，示例：

  // 匹配文本的元素
  cy.contains('提交订单')
  // 结合标签缩小范围
  cy.contains('button', '提交订单')
  

• 通过层级关系定位
  借助固定的父/祖先元素缩小范围，再定位目标元素，示例：

  cy.get('.user-form').find('button[type="submit"]')
  

• 优化XPath定位
  若必须用XPath，可通过部分匹配ID或结合其他属性实现，示例：

  // ID以固定前缀开头
  cy.xpath('//button[starts-with(@id, "submit-btn-")]')
  // ID包含固定字符
  cy.xpath('//input[contains(@id, "email-input")]')
  // 结合父元素属性
  cy.xpath('//div[@class="form-group"]/input')
  

• 封装自定义命令（可选）
  为常用定位方式封装命令，提升复用性：
  在cypress/support/commands.js中添加：

  Cypress.Commands.add('getByTestId', (testId) => {
    return cy.get(`[data-testid="${testId}"]`)
  })
  

  之后直接使用：

  cy.getByTestId('submit-btn')
  

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