如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试

2020年12月30日10:50:27 发表评论 40 次浏览

本文概述

测试是任何开发项目的重要组成部分, 这些测试可以确保项目始终按预期进行。

我们有大量的测试工具可供使用, 但并非所有工具都可以测试某人的实际体验。我们如何使用Applitools直观地测试我们的项目并确保其正常运行?

  • 什么是视觉回归测试?
  • 什么是赛普拉斯?
  • 什么是Applitools?
  • 我们要建造什么?
  • 步骤0:使用Next.js创建一个新的React应用程序
  • 步骤1:在Next.js应用中安装和配置Cypress
  • 步骤2:在Next.js应用中创建你的第一个赛普拉斯测试
  • 步骤3:安装和配置Applitools Eyes
  • 步骤4:使用Applitools Eyes进行视觉回归测试

你也可以退房我的直播从我的Twitch频道在此, 我完成了设置新应用程序并使用赛普拉斯和Applitools进行测试的整个过程。

经过全面披露, 我最近接受了Applitools的开发倡导者的工作。但是你可以使用其免费套餐来完成本教程, 而无需使用信用卡。

什么是视觉回归测试?

与大多数测试类似, Visual Regression Testing是一种测试, 它将定期在项目生命周期的各个阶段运行, 例如在请求请求或生产部署时, 以确保应用程序中的所有功能均正常运行。

但是, Visual Regression Testing的不同之处在于, 它直接比较项目的可视快照。它可以通过静态访问页面或与之交互以预览该交互的结果来检测内容, 布局或其他任何你想要的细节的变化。

什么是赛普拉斯?

柏是基于JavaScript的测试框架, 我们将使用它运行测试套件。它在浏览器中运行测试, 使我们能够直接检查人们实际使用它的项目状态。

赛普拉斯的伟大之处在于它还提供了与页面进行交互的功能。例如, 如果我们要测试使用我们的应用程序的人是否可以登录, 则可以输入凭据并提交登录表单, 然后检查身份验证过程是否正常运行。

什么是Applitools?

应用工具是一个视觉测试工具和自动化平台, 可让我们在不同的时间点直观地比较我们的应用程序, 从而使我们能够检查某些更改或功能是否正常。

尽管我们可以利用Applitools的一些不同功能, 但我们将重点关注Eyes API, 我们将使用它们捕获快照并将其发送到Applitools仪表板。

我们要建造什么?

虽然我们确实可以在以下设备上运行Cypress和Applitools各种项目类型, 我们将使用Next.js快速启动新的React应用。这将使我们能够专注于测试工具, 而不是应用程序本身。

设置好应用程序之后, 我们将安装Cypress和Applitools, 以便可以使用它们运行视觉回归测试。

注意:你需要拥有一个Applitools帐户才能设置视觉回归测试。你可以注册一个免费帐户在applitools.com。

步骤0:使用Next.js创建一个新的React应用程序

首先, 我们将使用创建下一个应用创建一个新的Next.js应用。

进入要在其中创建新项目的目录后, 在终端内部运行:

npx create-next-app my-testing-app

注意:你可以从更改项目名称我的测试应用随心所欲

这将从GitHub克隆默认的Next.js示例, 安装依赖关系, 并立即允许我们使用我们的测试工具来提高生产力。

完成后, 导航到新项目:

cd my-testing-app

启动开发服务器:

npm run dev

现在你的网站应该位于http://本地主机:3000!

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试1

新的Next.js应用

步骤1:在Next.js应用中安装和配置Cypress

现在我们已经设置了应用程序, 我们想要安装赛普拉斯, 以便可以使用它来运行测试。

回到终端内部, 我们可以使用以下命令安装赛普拉斯:

npm install cypress --save-dev

在这里, 我们包括—保存开发标记, 因为我们不需要Cypress在应用程序的生产版本中运行, 因此我们将其安装为开发依赖项。

完成之后, 我们需要一种从命令行运行赛普拉斯的方法。尽管我们可以导航到赛普拉斯本身, 但是我们可以添加一个新的脚本命令, 这将使运行赛普拉斯更加容易。

代替package.json, 在剧本, 添加以下内容:

"cy:open": "cypress open"

现在, 在终端内, 我们可以运行该脚本以打开赛普拉斯:

npm run cy:open

如果这是你第一次运行Cypress, 则可能需要花费额外的时间才能在项目中安装Cypress。

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试2

首次开放赛普拉斯

完成后, 赛普拉斯将打开一个新的对话面板, 它将用作你的仪表板, 用于运行项目的测试。

你还会注意到, 赛普拉斯让你知道他们还在以下位置为你的项目添加了新目录:柏。其中包括示例文件, 可让你了解赛普拉斯的工作原理并立即开始使用。

要尝试此操作, 请在赛普拉斯面板的右侧, 单击运行19个集成规范.

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试3

然后, 赛普拉斯将打开一个新的浏览器并运行所有示例测试。

接下来, 我们将添加一些自己的测试。

跟随提交!

步骤2:在Next.js应用中创建你的第一个赛普拉斯测试

现在我们可以成功运行测试, 让我们尝试添加自己的测试。

实际上, 我们不需要赛普拉斯包含在示例中的任何测试, 因此让我们删除整个整合/范例目录。

然后, 在下面创建一个新文件积分叫home.spec.js在内部添加以下内容:

/// <reference types="cypress" />

context('Home', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000');
  });

  it('should find the title of the homepage', () => {
    cy.get('h1').contains('Welcome');
  });
});

在上面的代码中, 我们是:

  • 首先添加赛普拉斯作为参考类型, 这使赛普拉斯可以查找文件并知道应使用它来运行测试
  • 为测试创建新的上下文并将其定义为"主页"
  • 告诉赛普拉斯, 在每次测试之前, 我们希望它访问我们的主页
  • 定义获取h1并检查其包含" Welcome"的测试

现在回首赛普拉斯, 我们将看到只有一个集成测试。如果单击它并尝试运行测试, 则会发现实际上收到了一个错误, 因为我们从未启动过开发服务器, 这意味着它不可用。

为了解决这个问题, 我们将使用一个名为启动服务器并测试.

该软件包将执行其名称所暗示的功能, 它将:

  • 根据我们提供的命令启动服务器
  • 运行我们提供的测试
  • 完成后停止服务器

要添加它, 请在我们的终端中运行:

npm install start-server-and-test --save-dev

然后, 在我们的内部package.json文件, 我们将向其中添加另一个新命令剧本目的:

"test": "start-server-and-test dev 3000 cy:open"

在这里, 我们告诉启动服务器和测试我们要运行开发者命令以启动我们的服务器, 该服务器将在端口3000上可用, 并且我们要运行cy:打开命令之后运行我们的测试。

如果我们回到终端并运行:

npm run test

我们将看到赛普拉斯像以前一样打开。但是, 如果现在运行测试, 我们可以看到它成功打开了Next.js应用程序, 并且在我们的内部看到" Welcome"一词。h1!

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试4

在赛普拉斯中成功运行测试

跟着提交.

步骤3:安装和配置Applitools Eyes

赛普拉斯成功运行了测试之后, 我们现在就可以加入我们的测试, 并使用Applitools在我们的项目上运行视觉回归测试。

在我们潜水之前, 请确保你有一个免费账号在Applitools上进行设置, 我们将需要它来设置API密钥。

首先, 我们需要将Eyes库安装到我们的项目中。

在我们的终端中, 我们可以运行:

npm install @applitools/eyes-cypress --save-dev

哪个将安装赛普拉斯专用于Applitools Eyes的SDK.

安装完成后, 我们可以运行Eyes设置脚本。

npx eyes-setup

这将遍历整个项目, 并向Cypress添加必要的配置, 以使Eyes正常工作。

最后, 每次运行测试时, 我们都需要使Applitools API密钥可用。

首先, 我们需要在Applitools帐户中找到我们的API密钥。

在Applitools仪表板中, 选择我的API金钥在帐户下拉菜单中。

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试5

查找Applitools API密钥

它将打开一个对话框, 你可以在其中选择并复制你的API密钥。

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试6

复制Applitools API密钥

你将需要保存此API密钥, 以便以后运行测试时使用。

接下来, 我们希望能够设置我们的API密钥。我们可以通过几种方式做到这一点:

  • 导出环境变量在运行测试之前在我们的外壳中
  • 将API密钥放在测试命令之前
  • 将API密钥添加到applitools.config.js文件
  • 使用dotenv和塞浦路斯包

对于此演示, 我们将在命令之前添加API密钥来运行测试。这将使我们能够快速进行测试。

为此, 只要我们运行以下命令npm运行测试, 我们将在其前面添加我们的API密钥, 例如:

APPLITOOLS_API_KEY="abcd1234" npm run test

注意:请记住用你的唯一ID替换API密钥。

现在, 我们应该准备添加我们的第一个测试。

跟随提交!

步骤4:使用Applitools Eyes进行视觉回归测试

我们已经配置了Cypress和Applitools并准备就绪, 这意味着我们现在可以添加Applitools Eyes来直观地测试我们的应用程序!

我们的应用程序还没有很多功能。因此, 我们可以从进行基本检查开始, 以确保我们的首页在每次运行测试时都保持原样。

首先, 在我们的内部cypres / integrations / home.spec.js文件, 让我们在现有文件的正下方添加以下内容it声明:

it('should verify the homepage looks as expected', () => {
  cy.eyesOpen({
    appName: 'My App', testName: 'Homepage Check', });

  cy.eyesCheckWindow({
    tag: 'App Window', target: 'window', fully: true
  });

  cy.eyesClose();
});

这是我们在这里做的事情:

  • 首先, 我们"睁大了眼睛" Applitools, 它将准备Eyes功能以检查我们的应用
  • 接下来, 我们在应用程序窗口中进行检查, 基本上是捕获应用程序的屏幕截图并将其发送到Applitools
  • 最后, 我们"闭上眼睛" Applitools, 让Eyes知道我们正在运行检查

现在, 如果我们运行测试命令并开始测试:

APPLITOOLS_API_KEY="abcd1234" npm run test

我们可以看到赛普拉斯正在运行我们的新测试用例, 该用例似乎没有在浏览器内执行任何操作, 但显示了通过指示。

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试7

在赛普拉斯中成功运行了Applitools Eyes检查

现在, 如果我们回到Applitools仪表板:

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试8

Applitools中的第一个快照

我们可以看到我们有一个名为"主页检查"的新"运行"(我们在代码中指定了), 显示它与我们的应用快照一起传递了。

现在, 仅凭此屏幕截图并不是强大的功能。从现在开始, 无论何时运行此测试, Applitools都会将我们的应用程序与此原始快照进行比较, 并告知我们是否有任何更改。

为了测试这一点, 我们将更改页面标题的颜色。这看起来似乎是简单的更改, 但是对于仅靠赛普拉斯这样的工具来检测问题, 样式更改可能更具挑战性, 这是Applitools Eyes快照比较的亮点。

代替样式/Home.module.css文件, 我们将以下内容添加到。标题类:

color: #ddd;
如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试9

具有浅灰色标题的Next.js应用

尽管实际上我们可能没有故意进行这样的更改, 但是如果我们更改的样式会随标题而变化, 则可能会发生这种情况。这使我们的标题难以阅读, 但对于测试用例而言, 这是完美的选择。

现在, 让我们再次运行测试:

APPLITOOLS_API_KEY="abcd1234" npm run test

但是这次, 我们可以看到我们的测试失败了!

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试10

赛普拉斯在Applitools Eyes检查中抛出错误

我们的Applitools测试失败, 因为它声明" Eyes-Cypress在执行视觉测试期间检测到差异或错误"。

如果我们查看Applitools仪表板的内部:

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试11

在Applitools Eyes中的应用程序标题文本中检测到更改

我们可以看到, 我们现在进行了一次"未解决"的运行, 其中Applitools在页面上向我们显示了差异, 在我们的案例中, 这就是标题的"欢迎使用"部分。

当在项目中测试应用程序中的每个页面或页面类型都面临挑战时, 这非常有用。我们可以确保, 如果有任何更改或中断, 它将立即在Applitools中被标记。

从这里开始, 如果我们对颜色变化感到满意, 我们可以接受我们应用程序的新版本。

如何使用Cypress和Applitools在Next.js应用程序上运行视觉回归测试12

接受或拒绝Applitools Eyes中的更改

否则, 我们可以拒绝它, 并让我们的团队知道需要对其进行修复。

跟随提交!

下一步是什么?

在赛普拉斯和Applitools之间, 我们可以做很多事情来确保我们的应用程序表现出我们想要的方式。

在大多数情况下, 我们在构建应用程序时都是在构建该应用程序, 以便人们可以与之交互。

使用赛普拉斯, 我们可以单击页面的不同部分, 更改页面的状态, 然后使用Applitools Eyes进行检查, 以确保其功能符合我们的预期。

我们还可以让Cypress在不同的浏览器上运行, 以确保我们的应用在有人尝试使用的任何地方都能正常运行!

跟我来了解更多Javascript,UX和其他有趣的东西!
  • Twitter在Twitter上关注我
  • 📺订阅我的YouTube
  • 📫订阅我的时事通讯
  • 💝赞助我
一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: