使用Travis CI在Angular项目中运行Cypress测试


我的上一篇博文 中,我解释了如何开始使用 Cypress测试 。下一步将是在持续集成和持续交付(CI和CD)环境中运行这些测试。这样做的好处是,每一次提交都会自动执行测试,并且你会自动得到关于你的应用程序是否还做得好的反馈。

Travis CI 是一个非常著名的持续集成环境,在处理OSS项目时非常普遍。它最好的一点是,它可以免费用于开源项目。

准备工作

为了开始工作,我们需要稍微修改一下我们的project.json。参照 这个演示   ,我们知道,用

"cypress:open": "concurrently \"ng serve\" \"cypress open\""

我们可以开始我们的端到端测试,看看我们的应用程序是怎么回事。问题是,在CI/CD环境中,你确实想只运行一次,如果至少有一个测试失败,就抛出一个错误,你想在事情做得很好时关闭服务器并清理一切,你可以继续进行构建/发布管道的下一步。

创建一个npm持续集成命令

我喜欢使用来自package.json scripts 标签的命令抽象,特别是当它涉及到CI时。所以我们现在可以添加一个命令--无论最后是哪个CI服务--都会调用并触发我们的端到端测试。

"cypress:ci": "<should do something>",

构建应用程序

我们想测试我们的生产准备应用程序。所以我们将添加的第一个脚本是 ng build --prod 命令,以获得我们可以测试的应用程序输出。

"cypress:ci": "ng build --prod <should do something>",

启动服务器为应用程序提供服务

在完成这些工作后,我们要启动一个独立的HTTP服务器,像一个真正的网络服务器一样为我们的应用程序提供服务,如果一个人进入我们的网站并点击的话。我经常使用 http-server 。当全局安装时,它有一个漂亮而简单的CLI,我们可以用它来在任何我们想去的地方运行我们的Web服务器。我们可以为我们的项目安装它,并通过 script 标签访问它。知道我们的应用程序将构建在文件夹 dist/cypressTest 中,在我们的案例中,我们可以启动一个Web服务器,并将路径作为命令行参数。让我们为此创建一个新的脚本标签。

"cypress:ci": "ng build --prod <should do something>",
"start:ci": "http-server ./dist/cypressTest -a localhost -p 8000 -c-1"

所以 http-server ./dist/cypressTest 是在我们要求的路径上启动服务器。通过 -a localhost ,我们可以指定将被使用的IP。在本例中是localhost或127.0.0.1。作为一个端口,我们把 -p 8000 隔开,因为我们要做大量的重载,所以用 -c-1 来禁用缓存。

Rmemeber我们告诉Cypress在测试中加载localhost:8000。 cy.visit('http://localhost:8000');

启动Cypress

所以我们现在正在构建我们的应用程序,并在Travis CI上运行一个Web服务器,这样Cypress就能够访问它(就像一个用户会做的那样)并可以测试它。 cypress open 命令 打开 Cypress并保持开放(谁会想到这个)。然而,我们需要的是一个命令来运行我们实现的所有测试一次,然后关闭。我们可以使用 cypress run 命令( doc )。所以我们也为这个创建一个脚本标签吧。

"cypress:ci": "ng build --prod <should do something>",
"start:ci": "http-server ./dist/cypressTest -a localhost -p 8000 -c-1",
"cypress:run": "cypress run",

把这些部件放在一起(二的第一部分)

到目前为止,让我们把一些部件粘在一起:我们可以让Cypress运行并启动测试。我们可以建立我们的应用程序,并启动一个网络服务器,将我们的应用程序提供给Cypress。我们只需为我们的主要CI命令串联,Travis CI最后必须调用。

"cypress:ci": "ng build --prod && start:ci && cypress:run",
"start:ci": "http-server ./dist/cypressTest -a localhost -p 8000 -c-1",
"cypress:run": "cypress run",

&& 只是在当前命令完成后运行一个又一个命令。但是,启动一个网络服务器实际上永远不会结束。它被启动并将运行,直到你关闭它。在CI环境中,你想在 所有的测试都运行后关闭 ,你希望它能自动发生。所以我们需要一些东西来并行运行命令,并自动停止。

并行运行命令

并行运行命令可以用npm包 npm-run-all 来完成。命令 run-p 的作用正是如此:并行运行npm命令。安装之后,让我们用这个来帮助我们。

"cypress:ci": "ng build --prod && run-p start:ci cypress:run",
"start:ci": "http-server ./dist/cypressTest -a localhost -p 8000 -c-1",
"cypress:run": "cypress run",

这样我们就在prod模式下构建我们的应用程序(感谢angular cli),并并行启动我们的webserver和cypress。但如果一切顺利,我们如何关闭呢?

把这些碎片放在一起(二之二)

看看 run-all 的文档,我们可以看到 -r--race 可以 "当一个任务以0完成时,杀死所有任务"。 酷! 正是我们所需要的。所以让我们使用这个。

"scripts": {
    ...
    "cypress:run": "cypress run",
    "cypress:ci": "ng build --prod && run-p --race start:ci cypress:run",
    "start:ci": "http-server ./dist/cypressTest -a localhost -p 8000 -c-1"
  },

酷。现在我们需要告诉Travis调用那个命令 cypress:ci ,我们用它来触发我们所有的测试。

将你的项目连接到Travis CI

为了让Travis开始工作,你需要在登录并添加你的版本库后将你的项目与Travis连接起来。如果你已经完成了,你可以在你的项目的根层添加一个 travis.yml 文件,内容如下。

language: node_js
node_js:
  - "8.9"
cache:
  directories:
    - ~/.npm
    - node_modules
install:
  - npm install
script:
  - npm run cypress:ci

首先,我们将语言设置为 node_js   之后定义版本。 install 任务只是一个普通的 npm install 来安装所有的依赖项。做完这些后,Travis CI应该自动调用 npm run cypress:ci ,这是我们package.json中的命令。

如果你已经将你的GitHub仓库连接到Travis并添加了这个文件,那么构建的检查应该自动触发,你的Cypress测试应该自动运行。

希望这对你有帮助!

Fabian