Cypress已弃用XPath插件，Angular应用元素定位替代方案问询

1. 利用Angular原生属性与自定义测试标识 #

• 借助Angular自动生成的ng-reflect-*属性定位：很多Angular组件会将@Input属性渲染为ng-reflect-前缀的DOM属性，比如绑定了[label]="submitText"的按钮会生成ng-reflect-label="提交"，直接用Cypress选择器定位：cy.get('[ng-reflect-label="提交"]')
• 自定义data-testid测试属性（推荐最佳实践）：在Angular模板中给动态元素添加稳定的测试标识，例如<div data-testid="dynamic-user-card" *ngFor="let user of users">{{user.name}}</div>，之后用cy.get('[data-testid="dynamic-user-card"]').contains('张三')定位，完全不受DOM结构变化影响

2. 文本匹配与精准过滤 #

• 针对动态文本内容，直接使用cy.contains()结合基础选择器：cy.get('.list-item').contains('动态生成的条目内容')
• 多匹配结果时，用.filter()或.eq()筛选：cy.get('.dynamic-element').filter(':contains("目标文本")').first()

3. 基于Angular组件类与DOM层级遍历 #

• 利用Angular UI组件库的专属类名：比如Angular Material的mat-button、mat-table-row，结合状态类（如mat-selected）定位：cy.get('mat-table-row.mat-selected')
• 通过稳定父元素遍历定位动态子元素：先定位一个结构稳定的父容器，再查找内部动态元素：cy.get('[data-testid="stable-container"]').find('.dynamic-child-element')

4. 封装自定义Cypress命令简化定位 #

• 在cypress/support/commands.js中封装针对Angular属性的自定义命令：

Cypress.Commands.add('findByAngularInput', (inputName, inputValue) => {
  return cy.get(`[ng-reflect-${inputName}="${inputValue}"]`)
})

• 使用时直接调用：cy.findByAngularInput('title', '动态页面标题')

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