如何使用Cypress查找断裂的链接【附实例教程】

迪鲁宾
402 阅读12分钟

你曾经经历过404错误吗？从终端用户的角度来看，404错误（或断链）的经验可能是一个完全的拒绝。除了恼人的最终用户体验，网站上的断裂链接（或死链接）会抑制SEO（搜索引擎优化）活动。

你的网站上的404页面越多，用户在网站上花费的时间就越少。为了减少跳出率并为你的网站建立一流的在线声誉，使用Cypress检查断链是非常必要的。与Selenium等其他测试自动化框架相比，通过执行Cypress测试来检查网站上的断链是相对容易的。

pasted image 0 (7)

资料来源

在Cypress教程系列的这篇博客中，我们深入探讨了寻找网站上断裂链接的 "原因 "和 "方法"。我们还演示了如何使用Cypress（一种最适合现代网络应用的测试自动化框架）来寻找断裂链接。

内容表

为什么要查找网站上的断裂链接

搜索引擎算法特别关注用户在你的网站上的行为方式。因此，他们的在线行为在排名过程中具有重要作用。HTTP 404代码是你的访问者可能遇到的最令人沮丧的事情之一，而且他们有可能永远不会重访你的网站。这就像把你的客户群交给了你的竞争对手。

除了负面的用户体验，由于断链导致的高跳出率也会对你的SEO产生负面影响。因此，尽管谷歌的算法可能不会直接考虑跳出率，但它确实会损害你的在线排名。
，这就是使用Cypress框架的断链检查器可以很方便的地方，因为它可以定期触发以确保网站没有断链。

断裂链接的主要原因

只有当你明确了可能导致断链的各种情况，你才能发现网站上的断链。导致404错误（或破碎链接/死亡链接）的原因有很多，主要的原因如下。

  • 该页面已从网站上删除
  • 该页面被移到另一个URL上，而重定向做得不正确
  • 你输入了错误的URL地址
  • 服务器故障（虽然这是很罕见的）。
  • 你输入了一个过期的域名地址

断裂的链接往往在页面被删除或移动后还会留下很长一段时间。这是因为链接到这个页面的网站没有被告知这个网站已经不存在，或者可以在一个新的URL下找到。此外，破损的HTML标签、JavaScript错误和破损的嵌入元素也会导致网站的链接破损（或死亡）。

无论 "页面 "对事物（你的网站）的重要性如何，定期检查网站上的断裂链接是非常重要的。尽管你可以使用Selenium来查找断裂的链接，但由于实施过程中涉及的简单性，建议使用Cypress来查找网站上的断裂链接。

检测断裂链接的基本HTTP状态代码

每当用户访问一个网站时，服务器会用一个三位数的响应代码来响应浏览器发出的请求。这个代码被称为 "HTTP响应状态代码"，它表示HTTP请求的状态。

以下是HTTP状态代码的五个主要类别。

  • 信息性响应(100-199)
  • 成功响应(200-299)
  • 重定向（300-399
  • 客户端错误(400-499)
  • 服务器错误(500-599)

尽管对所有的HTTP状态代码有一个顶层的理解是很重要的，但我们的兴趣主要在于HTTP 404状态，它表明网站上的一个特定链接是否被破坏。404错误意味着，虽然服务器可以到达，但你要找的特定页面在服务器上不存在（或可用）。从本质上讲，这是一个不存在的页面，或者说它已经坏了。404错误代码可以出现在任何浏览器中，不管你是使用谷歌浏览器还是火狐浏览器。

下面是404错误显示给终端用户的许多方式中的一些。

  • 404未找到错误
  • 404 HTTP 404
  • 404页面未找到
  • 错误404未找到
  • HTTP 404未找到
  • 请求的URL在这个服务器上没有找到
  • 404 文件或目录未找到

如果你想快速了解Cypress框架，请查看我们的博客，其中解释了Cypress自动化框架的架构。另外，你也可以查看LambdaTest的YouTube频道，在那里我们有一个视频，解释了你如何开始使用Cypress。

如何使用Cypress查找断裂链接

到现在为止，你已经明白了检查网站上断裂链接的重要性？因此，随着平台的建立，让我们来看看如何使用Cypress查找断裂链接。对于初学者来说，Cypress是一个为现代网络构建的下一代前端测试工具；Cypress测试使你能够编写更快、更容易、更可靠的测试。

如果你来自Selenium自动化背景，请确保从我们的博客中查看Selenium和Cypress之间的差异，其中包括Cypress与Selenium的比较。 说到这里，让我们专注于我们的问题，关于断裂的链接，以及如何建立一些测试来验证使用Cypress测试自动化。

让我们来看看一个包含四个相对超链接的HTML页面样本。

<a href="/at-home-coronavirus-testing">Testing</a>
    <a href="/paying-for-covid-19-testing/">Paying for covid Testing</a>
    <a href="/covid-19-antibody-testing">Covid19 antibody Testing</a>
    <a href="/covid-19-testing-statistics">Testing Statistics</a>

正如你所看到的，我们有四个链接，我们需要点击每个链接，检查重定向的URL，然后回到我们的主页面。那么，考虑到上述HTML页面，如何使用Cypress找到断裂的链接。

如果我们想出一个实现，只限于找到四个中的哪一个是破损的性质，那该怎么办。如果实现对四个链接进行硬编码，将导致可扩展性问题，特别是当检查器被用于不同的网页时。

下面是使用Cypress框架来查找网站上的断裂链接的示例代码。如前所述，这不是一种可扩展的方法，在大规模网站上寻找断裂链接时，应避免使用这种方法。

describe('Test Navigation', () => {
  it('can navigate and test the pages', () => {
    cy.visit('https://www.testing.com/at-home-coronavirus-testing/');
 
    cy.get('main:contains("Testing")');
    cy.go('back');
 
   cy.visit('https://www.testing.com/paying-for-covid-19-testing/');
   cy.get('main:contains("Test")');
   cy.go('back');
 
   cy.visit('https://www.testing.com/covid-19-antibody-testing/');
   cy.get('main:contains("Testing")');
   cy.go('back');
 
 
   cy.visit('https://www.testing.com/covid-19-testing-statistics/');
   cy.get('main:contains("Testing")');
   cy.go('back');
  
  });
});

在我们下面的例子中，我们点击每一个页面并检查具体的断言，它不遵循设计模式，我们可以改进我们网站上的链接方式。

让我们来看看下面的例子。

it('Navigate through the links using loops', () => {
 
  const pages = ['Testing Covid', 'Paying for Covid19 Test', 'Test Antibody Covid19', 'Testing Statistics']
 
  cy.visit('/')
 
  pages.forEach(page => {
 
    cy.contains(page).click()
    cy.location('pathname').should('eq', `/${page}`)
    cy.go('back')
 
  })
 
})

正如你可以从上面的代码中推断出的，我们正在对特定的页面进行循环，并验证页面信息。我们创建了一个'forEach'循环，它将在数组中迭代整个过程。如果由于任何原因，我们的导航栏改变了项目，那就特别有用。我们将添加一个项目到数组中，我们的测试就成功了。

"如果你使用Cypress来寻找你网站上的破损链接，必须注意Cypress会改变其主机URL，以匹配你的AUT（被测应用程序）的URL。Cypress的基本要求是，在一次测试的整个过程中，被导航的URL应该具有相同的超级域"。

导航到子域可以正常工作，但如果你访问两个不同的超级域，Cypress将抛出一个错误。因此，你可以在其他测试中看到不同的超级域，但在同一个测试中却看不到。

我们可以简单地检查带有href属性的链接，并检查其HTTP状态代码，而不是打开测试网站上的每个链接。如果返回代码是404，这意味着那个特定的链接是一个破碎的（或死的）链接。

示范。用Cypress查找断裂的链接

为了演示如何使用Cypress查找网站上的断裂链接，让我们在LambdaTest博客上进行一次断裂链接测试。LambdaTest博客上有接近500多个帖子，我们使用Cypress的断链检查器将检查每个链接（即href属性下的链接）。

以下是使用Cypress查找网站上的断裂链接的测试场景。

测试场景

  1. 在Chrome浏览器上进入LambdaTest博客。
  2. 收集页面上的所有链接。
  3. 为每个链接发送HTTP请求。
  4. 在终端上打印该链接是否断裂。

项目结构

是时候在集成文件夹下创建我们的测试了；正如你在下面看到的，我们有一个名为test-example.js的测试。下面显示的是目录结构。

cypress

实施

为了确保代码的可扩展性和可维护性，以检查'N'个网站上的断裂链接，我们将测试的URL保存在一个单独的JSON文件中（如config.json）。

如上所示，我们有两个测试URL（即URL1和URL2）；但是，我们只在URL1上运行测试。下面显示的是实现方法（使用JavaScript）。

代码演练

第1步。

我们首先导入config.json，因为它包含测试链接。

import config from './config.json'

第二步。

我们现在访问一个远程URL。基础URL被存储在Cypress.json中，以确保更好的可移植性和可维护性。

cy.visit(`${config.URL1}`)

第3步。

当我们在测试一些网站时，我们需要忽略一些未捕获的异常。在这种情况下，我们可以使用以下代码来关闭对特定错误的未捕获异常处理。Cy.on是指捕捉一个单一的异常或事件；在这种情况下，我们用这段代码故意让一个测试失败，使用一个小黑板。

cy.on('window:confirm', cy.stub().as('confirm'))
        Cypress.on('uncaught:exception', (err, runnable) => {
            // returning false here prevents Cypress from
            // failing the test
        return false
   })

第4步。

cy.wrap在Cypress中用于日志记录的目的。在这种情况下，我们把它作为一个控制变量，根据我们的参数来测试或失败。

cy.wrap('passed').as('ctrl')

第5步。

我们使用 "each "来获取元素，不包括 "mailto: "和空的元素。有了这个，我们将得到我们想用Cypress监测断裂链接的URLs。

cy.get("a:not([href*='mailto:]']").each($el => {

第6步。

我们正在验证头部链接，其中一个总是呈现锚的代码块，如下图所示。作为这个过程的一部分，我们对它们都进行验证。我们尽可能地结合选择器。

if ($el.prop('href').length > 0) {
      const message = $el.text()
      expect($el, message).to.have.attr("href").not.contain("undefined")
      cy.log($el.attr('href'))                       
}

执行

现在，让我们添加到Cypress并从那里运行它；如果你已经有一个npm项目，请使用VS Code打开终端并运行以下命令。

npm install cypress

现在Cypress已经安装好了，让我们运行下面的命令来获取Cypress文件夹。

npx Cypress open

为了配置Cypress，我们打开Cypress Test Runner，它会创建Cypress.json。这个JSON文件用于存储你提供的任何配置值。

{
    "watchForFilesChanges": false,
    "chromeWebSecurity": false,
    "viewportWidth": 1000,
    "viewportHeight": 600,
    "waitForAnimation": true,
    "defaultCommandTimeout": 6000,
    "execTimeout": 60000,
    "pageLoadTimeout": 60000,
    "requestTimeout": 150000,
    "responseTimeout": 150000,
    "video": true,
    "failOnStatusCode": false
}

打开Cypress测试运行器，点击相应的测试，执行同样的测试。

unnamed (1)

以下是测试执行情况，表明测试网站上的断裂链接为零。

pasted image 0 (3)

如何在云网格上使用Cypress找到断裂链接

像LambdaTest这样的云网格上的Cypress测试有助于在广泛的浏览器和操作系统组合中运行测试。并行执行有助于加速测试的执行，并实现最佳的浏览器覆盖率。

LambdaTest上的Cypress有助于你大规模地运行Cypress测试。你可以查看我们早期的博客，其中深入探讨了如何利用LambdaTest进行大规模的Cypress测试的要点。

要想开始，你必须在你的机器上安装LambdaTest Cypress CLI。触发下面的命令来安装同样的东西。

npm install -g lambdatest-cypress-cli

安装完成后，使用下面的命令设置配置。

lambdatest-cypress init

一旦该命令完成，在项目文件夹中就会创建lambdatest-config.json。接下来，从LambdaTest配置文件部分输入LambdaTest凭证。

"lambdatest_auth": {
      "username": "<Your LambdaTest username>",
      "access_key": "<Your LambdaTest access key>"

下面是你如何在lambdatest-config.json中配置所需的浏览器和操作系统组合的方法。

"browsers": [
      {
         "browser": "Chrome",
         "platform": "Windows 10",
         "versions": [
            "latest-2"
         ]
      },
      {
         "browser": "Firefox",
         "platform": "Windows 10",
         "versions": [
            "latest"
         ]
      },
      {
         "browser": "MicrosoftEdge",
         "platform": "Windows 10",
         "versions": [
            "latest"
         ]
      }
   ],

JSON文件中的run_settings部分包含所需的Cypress测试套件功能，包括Cypress_version、build_name、视觉反馈设置、并行会话的数量等。

"run_settings": {
      "Cypress_config_file": "Cypress.json",
      "build_name": "build-broken-links",
      "parallels": 1,
      "specs": "./Cypress/integration/e2e_tests/*.spec.js",
      "ignore_files": "",
      "feature_file_suppport": false
   },

JSON文件中的Tunnel_settings可以让你通过基于SSH的集成隧道将你的本地系统与LambdaTest服务器相连。一旦这个隧道建立起来，你就可以在LambdaTest上目前由Cypress支持的所有浏览器上测试你的本地托管页面。

"tunnel_settings": {
    "tunnel": false,
    "tunnelName": null
}

现在，设置已经准备就绪，是时候通过触发以下命令来运行测试了。

lambdatest-cypress run

下面显示的是自动化仪表板上的测试执行状态。

automation dashboard

测试执行后，点击测试名称，查看自动化日志，以调试相应的测试。

automation log

你可以查看实时视频资料，每个测试运行的截图，查看控制台日志，终端日志，以及使用LambdaTest上的Cypress做更多的事情。

使用LambdaTest和Cypress运行测试的一个重要方面是并行测试。这可以通过两种方法来实现。第一种方法是在命令行中传递并行化水平。

lambdatest-cypress run --parallels 5

另一种选择是使用lambdatest-config.json中的parallels键来设置并行化水平。

{
  "run_settings": {
    ...
    "parallels": 5,
    ...
  }
}

这里是执行快照，它表明了测试执行的进度。

automation test execution

总而言之，Cypress在云上测试的主要好处是在不修改测试代码的核心逻辑的情况下实现最佳测试覆盖率。

结束了

在你的网站上出现404错误是不可避免的。破损的链接也会影响在搜索引擎上的排名，请确保你主动监测你的网站的链接。找到你网站上的断链或HTTP 404和发布独特的高质量内容一样重要。

pasted image 0 (2)

来源

作为持续测试的一部分，检查你的404，你可以把Cypress测试作为测试工具的一部分。留出时间来更新你的网站并进行技术测试，将有助于你在竞争中保持领先地位。

我们知道，我们必须启用、培育和培养一个包括高质量成功的生态系统。每一行测试代码都是对我们代码库的投资。测试将能够始终独立运行和工作。最后，在这个Cypress教程中，我们看到了LambdaTest和Cypress的整合是如何确保在40多个浏览器版本上同时实现不同浏览器的无缝用户体验。

祝您在Cypress中寻觅到快乐的Bug!

常见的问题

如果你发现断裂的链接是什么意思？

断裂的链接是指指向服务器上不再存在的网页的链接。这些链接被称为断裂链接，因为它们不再指向任何内容。因此，排除断裂链接的故障是网站所有者和网站管理员的一项重要任务。

如何回收断裂的链接？

在回收链接时，首先要用支持网页内容的文字创建相互链接。它们允许用户从一个页面上的一个内容转移到同一页面的另一个内容。通过分析和内部链接你的网站上的每一块内容，你创建了一个 "可链接 "的档案，包括你的企业曾经发表过的所有内容。

为什么断链是坏事？

在你的网站上有破损的链接对商业来说是很糟糕的。它们可能很小，但如果它们分散在各个地方，就会造成糟糕的用户体验，并贬低你的SEO努力。

avatar
文章
阅读
粉丝