如何使用 Cypress 查找损坏的链接

关注留言点赞，带你了解最流行的软件开发知识与最新科技行业趋势。

想在您的网站上找到损坏的链接吗？下面介绍如何使用 Cypress 在您的网站上执行失效链接测试。

您遇到过 404 错误吗？从最终用户的角度来看，404 错误（或损坏的链接）体验可能会彻底关闭。除了烦人的最终用户体验之外，网站上的断开链接（或死链接）还会抑制 SEO（搜索引擎优化）活动。
您网站上的 404 页面越多，用户在网站上花费的时间就越少。要降低跳出率并为您的网站建立一流的在线声誉，必须使用赛普拉斯检查损坏的链接。与其他测试自动化框架（如 Selenium）相比，通过执行 Cypress 测试来检查网站上的损坏链接相对容易。
在 Cypress 教程系列的这个博客中，我们深入探讨了在网站上查找损坏链接的“原因”和“方式”。我们还演示了如何使用 Cypress（一种最适合现代 Web 应用程序的测试自动化框架）查找损坏的链接。
为什么要在网站上查找损坏的链接
搜索引擎算法特别关注用户在您网站上的行为。因此，他们的在线行为在排名过程中起着重要作用。HTTP 404 代码是您的访问者可能遇到的最令人沮丧的事情之一，而且他们可能永远不会再次访问您的网站。这就像将您的客户群移交给您的竞争对手。
除了负面的用户体验外，由于链接断开导致的高跳出率会对您的搜索引擎优化产生负面影响。因此，尽管 Google 的算法可能不会直接考虑跳出率，但它确实会损害您的在线排名。这是使用 Cypress 框架的失效链接检查器可以派上用场的地方，因为它可以定期触发以确保网站没有失效链接。
断开链接的主要原因
只有当您清楚可能导致失效链接的各种情况时，您才能在网站上找到失效链接。导致 404 错误（或损坏的链接/死链接）的原因有很多；主要的如下：
该页面已从网站上删除
页面移动到另一个 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 错误代码可以出现在任何浏览器中，无论您使用的是 Google Chrome 还是 Firefox。
以下是向最终用户显示 404 错误的多种方式中的一些：
404 未找到错误
404 HTTP 404
404页面不存在
未找到错误404
未找到 HTTP 404
在此服务器上找不到请求的 URL
404 找不到文件或目录
如何使用 Cypress 查找损坏的链接
到现在为止，您应该已经了解检查网站上失效链接的重要性了吧？因此，在平台准备就绪后，让我们看看如何使用 Cypress 查找损坏的链接。对于初学者来说，Cypress 是为现代网络构建的下一代前端测试工具；赛普拉斯测试使您能够编写更快、更容易和更可靠的测试。
如果您有 Selenium 自动化背景，请务必从我们的博客中了解 Selenium 和 Cypress 之间的差异，该博客涵盖了 Cypress 与 Selenium 的比较。话虽如此，让我们关注断开链接的问题，以及如何构建一些测试来使用 Cypress 测试自动化来验证它。
让我们来看一个包含四个相关超链接的示例 HTML 页面：

Testing
Paying for covid Testing
Covid19 antibody Testing
Testing Statistics

如您所见，我们有四个链接，我们需要单击每个链接，检查重定向 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 应该具有相同的超级域。”
导航到子域工作正常，但如果您访问两个不同的超级域，赛普拉斯会抛出错误。因此，您可以在其他测试中看到不同的超级域，但在同一测试中看不到。
我们可以简单地检查具有 href 属性的链接并检查它们的 HTTP 状态代码，而不是打开测试网站上的每个链接。如果返回代码是 404，则表示该特定链接是损坏的（或死的）链接。
演示：使用 Cypress 查找断开的链接
为了演示如何使用 Cypress 在您的网站上查找损坏的链接，让我们在 LambdaTest 博客上执行损坏的链接测试。LambdaTest 博客上有近 500 多篇文章，我们使用 Cypress 的断开链接检查器将检查每个链接（即，在 href 属性下）。
以下是使用 Cypress 在网站上查找损坏链接的测试场景：
测试场景
转到 Chrome 上的 LambdaTest 博客。
收集页面上存在的所有链接。
为每个链接发送 HTTP 请求。
在终端打印链接是否断开。
项目结构
是时候在集成文件夹下创建我们的测试了；正如您在下面看到的，我们有一个名为 test-example.js 的测试。下图是目录结构：

创建测试
执行
为确保代码可扩展和可维护以检查“N”个网站上的损坏链接，我们将测试 URL 保存在单独的 JSON 文件中（例如，config.json）。

{
"URL1": "https://www.lambdatest.com/blog",
"URL2": "https://www.lambdatest-playground.com"
}

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

import config from './config.json'
describe('Test Broken Links', () => {
it('verify navigation accross the pages', () =>{
cy.visit(`${config.URL1}`)
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
})
cy.wrap('passed').as('ctrl')
cy.get("a:not([href*='mailto:]']").each($el => {
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'))
}
})
})
})

代码演练
步骤1：
我们首先导入 config.json，因为它包含测试链接。

import config from './config.json'

第2步：
我们现在访问一个远程 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 监控断开链接的 URL。

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

我们正在验证头部链接，其中之一始终为下面显示的代码块提供锚点。作为流程的一部分，我们会验证它们。我们尽可能组合选择器。

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 测试运行器并单击相应的测试以执行相同的测试。

Cypress 测试运行器
这是测试执行，这表明测试网站上有零个损坏的链接：

零失效链接
如何使用 Cypress on Cloud Grid 查找断开的链接
像 LambdaTest 这样的云网格上的赛普拉斯测试有助于在广泛的浏览器和操作系统组合上运行测试。并行执行有助于加速测试执行并实现最佳浏览器覆盖率。
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": "",
"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 上赛普拉斯当前支持的所有浏览器上测试本地托管的页面。

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

现在设置已准备就绪，是时候通过触发以下命令来运行测试了：
lambdatest-cypress run
下面显示的是来自自动化仪表板的测试执行状态：
从自动化仪表板测试执行状态
测试执行后，点击测试名称可以查看调试相应测试的自动化日志。
查看自动化日志
您可以查看每次测试运行的实时视频源和屏幕截图，查看控制台日志和终端日志，并使用 Cypress on LambdaTest 执行更多操作。

使用 LambdaTest 和 Cypress 运行测试的一个重要方面是并行测试。这可以使用两种方法来实现。第一个选项是从命令行传递并行化级别：

lambdatest-cypress run --parallels 5
另一个选项是使用 lambdatest-config.json 中的 parallels 键设置并行化级别。

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

这是执行快照，它指示测试执行的进度：

执行快照
这是一个包装
您的网站上不可避免地会出现 404 错误。断开的链接也会影响搜索引擎的排名；确保您主动监控您网站的链接。在您的网站上查找损坏的链接或 HTTP 404 与发布独特且高质量的内容一样重要。
检查你的 404s 作为持续测试的一部分，你可以将 Cypress 测试作为你测试工具的一部分。留出时间更新您的网站并进行技术测试将帮助您在竞争中保持领先地位。
我们知道，我们必须启用、培养和培养一个包含高质量成功的生态系统。每一行测试代码都是对我们代码库的投资。测试将能够始终独立运行和工作。最后，在本 Cypress 教程中，我们了解了 LambdaTest 和 Cypress 集成如何确保同时在 40 多个浏览器版本上跨不同浏览器的无缝用户体验。
与 Cypress 一起快乐地寻找 Bug！