如何使用Cypress检测网站中的所有失效链接

现成适配插件情况 #

目前存在适配链接检测场景的Cypress专用插件，这类插件已经封装了常规的检测逻辑，不需要开发者从零编写遍历、状态校验的重复代码。这类工具通用包含以下能力：

• 自动提取页面所有带有效href的a标签，过滤掉无实际跳转的锚点、javascript协议链接
• 支持配置站内/站外链接检测范围，自动排除指定规则的链接（比如带mailto、tel协议的联系方式链接）
• 内置状态码校验逻辑，检测完成后直接输出所有失效链接的清单、对应的状态码
  接入这类插件只需要简单配置检测路由范围、排除规则，就可以批量跑全站扫描，大幅降低重复开发成本。

无插件时的手动测试实现 #

如果不想引入第三方插件，完全可以通过Cypress原生能力实现失效链接检测，核心逻辑是提取页面所有有效链接后，逐个发送请求校验响应状态码，判断是否返回200类的成功状态。

核心实现步骤 #

• 遍历页面所有a标签，过滤掉无有效跳转地址的无效样本，避免误报
• 对每个有效链接地址发起HTTP请求，设置请求不因为非200状态码中断测试流程
• 收集所有返回状态码不在成功范围的链接，统一输出到测试报告

示例测试代码 #

// 定义要扫描的全站路由列表
const scanRoutes = ['/', '/about', '/product', '/blog', '/contact']
scanRoutes.forEach((route) => {
  it(`检测${route}页面的所有链接是否有效`, () => {
    cy.visit(route)
    // 提取所有页面链接
    cy.get('a').each(($linkEl) => {
      const linkUrl = $linkEl.prop('href')
      // 跳过不需要检测的链接类型
      if (!linkUrl || linkUrl.startsWith('javascript:') || linkUrl.endsWith('#')) {
        return
      }
      // 发送请求校验链接有效性
      cy.request({
        url: linkUrl,
        failOnStatusCode: false // 关键配置：遇到异常状态码不中断测试
      }).then((res) => {
        // 校验状态码是否属于访问成功的范围
        expect(res.status, `失效链接地址：${linkUrl}`).to.be.oneOf([200, 201, 204])
      })
    })
  })
})

手动实现的避坑要点 #

• 必须把请求的failOnStatusCode配置为false，否则一旦遇到404、500等异常状态，Cypress会直接抛出错误中断整个测试，无法批量收集所有失效链接
• 对提取到的链接做去重处理，避免同一链接被多个a标签引用时重复发请求，拖慢检测效率
• 如果是单页应用（SPA），必须逐个遍历所有配置的前端路由执行检测逻辑，否则只能获取到当前落地页的链接，覆盖不全
• 检测需要登录态的私有页面链接时，要在请求头中带上有效的登录Cookie，避免因为权限不足返回401状态码，造成失效链接的误判

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