Cypress网页元素定位：如何获取首个Sign in按钮的唯一CSS选择器

结合你给出的HTML结构，两个按钮的自身属性完全一致，核心差异是第一个按钮被类名为offset-sm-3 col-sm-9的div元素包裹，第二个按钮没有该父容器，推荐按以下优先级选择方案：

• 方案1（最稳定，优先使用）：利用父元素唯一特征匹配
  对应CSS选择器：div.offset-sm-3.col-sm-9 button[type="submit"]
  Cypress调用写法：

  cy.get('div.offset-sm-3.col-sm-9 button[type="submit"]')
  

  这个写法完全依托原生CSS支持，不依赖Cypress专属语法，也不会因为页面新增其他同文本按钮导致定位偏移。

• 方案2（临时快速定位使用）：按匹配结果取序号
  对应CSS选择器配合Cypress写法：

  cy.get('button:contains("Sign in")').eq(0)
  

  注意该方案稳定性较差，如果后续页面Sign in按钮的顺序、数量发生变化，定位会直接失效。

• 方案3（更高精准度）：结合按钮独有属性过滤
  如果你要进一步缩小匹配范围，可以叠加按钮的专属属性：
  对应CSS选择器：div.offset-sm-3.col-sm-9 button[nbbutton][status="primary"]
  可以完全避免父容器下出现其他按钮时的匹配错误。

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