如何在Cypress中定位ID动态变化的元素？

嘿，作为Cypress和HTML新手碰到这种动态ID的问题太正常啦，我给你分享几个实用的解决办法，帮你精准定位目标元素：

动态ID一般不会完全随机，大多会带有固定的前缀、后缀或者包含某个特定字符串。你可以用CSS属性选择器结合.find()来定位：

• 如果ID以某个固定字符串开头（比如order-1234、order-5678），用^=匹配开头：

  // 先找到父元素，再筛选出ID以order-开头的子元素
  cy.get('.your-static-parent').find('[id^="order-"]')
  

• 如果ID以某个固定字符串结尾（比如1234-user、5678-user），用$=匹配结尾：

  cy.get('.your-static-parent').find('[id$="-user"]')
  

• 如果ID包含某个固定字符串（比如user_123、user_456），用*=匹配包含：

  cy.get('.your-static-parent').find('[id*="user_"]')
  

既然有另一个完全相同但ID不同的元素，你可以先定位到目标元素所在的静态父容器（父元素有固定的class、ID或者其他属性），再用.find()筛选动态ID的元素，这样就能和另一个元素区分开：

// 比如目标元素在class为checkout-section的容器里，另一个在billing-section里
cy.get('.checkout-section').find('[id^="payment-"]')

如果以上方法都不行，你也可以用.eq()指定索引，但这个方法不太稳定——一旦页面元素顺序变化，定位就会出错，所以只作为最后备选：

// 找到所有匹配ID特征的元素，取第一个（索引0）
cy.get('.parent-container').find('[id*="dynamic"]').eq(0)

另外提醒你一下，写测试的时候尽量优先用静态属性（比如class、data-testid）来定位元素，这是Cypress推荐的最佳实践哦！如果可以的话，也可以和开发提需求，给这类需要测试的元素加上data-testid属性，这样定位起来会更省心~

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