Cypress获取含指定路径的href并验证时遇page.prop错误求助

错误根源 #

你遇到的page.prop is not a function报错，是因为cy.get('a').each()回调里的page是原生DOM元素，不是Cypress或jQuery包装后的对象，原生DOM元素没有prop()方法，自然调用失败。

修正后的代码 #

describe('VerifyProductsLinks', () => {
  it('validates links containing /example', () => {
    cy.visit('/')
    
    cy.get('a').each((linkElement) => {
      // 直接访问原生DOM元素的href属性（自动解析为完整URL）
      const fullUrl = linkElement.href;
      
      // 同步判断URL是否包含目标路径
      if (fullUrl.includes('/example')) {
        // 发起请求验证链接有效性
        cy.request({
          url: fullUrl,
          failOnStatusCode: false // 可选：允许非200状态码，后续自行断言
        }).then((response) => {
          // 断言状态码在有效范围内（可根据需求调整）
          expect(response.status).to.be.within(200, 399);
        });
      }
    })
  })
})

关键修正点 #

• 替换prop()方法：用原生DOM元素的href属性直接获取完整URL，无需依赖jQuery的prop()
• 同步判断逻辑：移除should('contains', '/example')——should()是Cypress的异步断言命令，不能放在同步的if条件中，改用原生的includes()做同步检查
• 可选优化：添加failOnStatusCode: false可以让测试不因为单个无效链接直接失败，而是通过后续的状态码断言记录具体问题

额外建议 #

• 去重处理：如果页面存在重复href的链接，可以先提取所有href并去重，避免重复请求：

  cy.get('a').then($links => {
    const uniqueUrls = [...new Set($links.map((i, el) => el.href))];
    uniqueUrls.forEach(url => {
      if (url.includes('/example')) {
        cy.request(url);
      }
    });
  })
  

• 动态链接等待：如果页面有异步加载的<a>标签，可延长cy.get('a')的超时时间确保元素加载完成：

  cy.get('a', { timeout: 10000 }).each(...)
  

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