Cypress测试Angular应用：定位NgFor循环中带指定href的链接并实现跳转测试

我明白你现在遇到的问题啦——在Angular的NgFor循环里生成的导航链接，想用Cypress测试点击跳转却定位不到元素，对吧？我来帮你分析下原因，再给几个靠谱的解决方案～

首先说问题根源：你之前用a[href*="/welcome"]没成功，大概率是因为Angular的routerLink是动态生成href属性的，Cypress执行查找操作时，可能这个href还没被Angular渲染出来，所以找不到目标元素。而你已经给a标签绑定了[data-test]="item.routerLink"，这个属性是初始化时就存在的，反而更适合做测试定位的标识。

方案1：利用data-test属性定位（最推荐） #

既然你已经给a标签绑定了data-test属性，直接用这个属性来定位是最稳定的，不受路由渲染时机的影响。

如果你的item.routerLink值就是/welcome，那测试代码可以改成这样：

it('should redirect user to welcome', () => {
  // 直接通过data-test属性定位元素
  cy.get('[data-test="/welcome"]').click();
  // 验证是否成功跳转到目标页面
  cy.url().should('include', '/welcome');
});

如果你的项目里自定义了getBySelector命令（就是你代码里用的cy.getBySelector），那可以更简洁：

it('should redirect user to welcome', () => {
  cy.getBySelector('/welcome').click();
  cy.url().should('include', '/welcome');
});

要是还没定义这个自定义命令，可以在cypress/support/commands.js里添加：

Cypress.Commands.add('getBySelector', (selector) => {
  return cy.get(`[data-test="${selector}"]`);
});

方案2：等待href属性渲染完成后定位 #

如果你一定要用href来定位，那需要确保Cypress等待Angular把href渲染出来后再操作，可以通过断言来等待元素的href属性存在：

it('should redirect user to welcome', () => {
  cy.get('a')
    .filter('[href*="/welcome"]')
    .should('be.visible') // 确保元素可见可点击
    .click();
  
  // 验证跳转后的URL
  cy.url().should('eq', `${Cypress.config().baseUrl}/welcome`);
});

方案3：通过链接文本定位（如果链接有明确文本的话） #

如果你的导航链接有对应的文本（比如“欢迎页”），也可以用contains来定位，可读性也很强：

it('should redirect user to welcome', () => {
  cy.contains('a', '欢迎页').click(); // 替换成你实际的链接文本
  cy.url().should('include', '/welcome');
});

备注：内容来源于stack exchange，提问作者Hugo Seleiro