ID与Class属性动态时如何编写Cypress输入框及按钮定位器

当元素ID、Class均为动态生成无固定值时，不要依赖这类动态属性做定位，优先选择和业务逻辑强绑定、不会随前端构建/样式改动变化的锚点，两类元素的定位方式如下：

高亮input输入框定位 #

按稳定性从高到低推荐以下写法：

• 优先用关联label锚定：输入框一般都会绑定对应文本的label，直接通过固定label文本定位是可访问性最佳、稳定性最高的方案，示例代码：

// 自动匹配label文本为「对应输入框的固定标签（如用户名/搜索关键词）」关联的input
cy.contains('label', '输入框对应的固定标签文本').find('input')

• 用固定功能属性匹配：过滤掉动态id/class，找元素上固定不变的功能属性，比如placeholder、name、type、aria-label、团队约定的测试专用data-testid/data-cy属性，示例代码：

// 按固定placeholder定位
cy.get('input[placeholder="请输入搜索内容"]')
// 按测试专用属性定位（Cypress官方推荐最优实践）
cy.get('[data-cy="search-input"]')
// 按aria-label无障碍属性定位
cy.get('input[aria-label="搜索输入框"]')

• 基于固定DOM结构相对定位：如果以上属性都没有，先找输入框附近位置固定、文本/属性固定的锚点元素，再通过DOM关系找目标input，示例：

// 先找到输入框前固定的前缀图标/文本，再找同级input
cy.contains('span', '搜索前缀固定文本').siblings('input')
// 先找到输入框所属的稳定父容器，再在容器内找input
cy.get('.stable-form-container').find('input')

注意：不要用[class^="css-"]这类匹配动态class前缀的写法，前端打包hash变动、样式调整都会直接导致定位失效。

对应需要定位的按钮截图如下：

按钮元素定位 #

同样按稳定性优先级推荐写法：

• 优先用按钮固定显示文本匹配：按钮上的业务文本一般是固定的，用Cypress内置的contains命令匹配最便捷，示例：

// 匹配文本为「提交/搜索/确认」的按钮，可加matchCase忽略大小写
cy.contains('button', '按钮上的固定显示文本', { matchCase: false })

• 用固定功能属性匹配：如果是图标按钮无显示文本，优先找type、aria-label、role、data-testid这类固定属性，示例：

// 匹配表单提交按钮
cy.get('button[type="submit"]')
// 匹配带无障碍标签的图标按钮
cy.get('button[aria-label="提交表单"]')

• 区域限定避免多匹配：如果页面有多个同文本按钮，先锚定按钮所属的固定父容器，再在范围内查找，示例：

// 先定位到搜索表单区域，再找区域内的搜索按钮，避免匹配到其他区域的同名按钮
cy.get('[data-cy="search-form"]').contains('button', '搜索')

定位器写完后建议在Cypress运行界面验证，确保定位器唯一匹配目标可见元素，出现多匹配时及时加限定条件收窄范围。

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