如何在 CI 中运行 cypress 之前提供 angular cli 应用程序？答案

【问题标题】：How to serve angular cli app before running cypress in CI?如何在 CI 中运行 cypress 之前提供 angular cli 应用程序？
【发布时间】：2018-07-27 04:44:20
【问题描述】：

我正在尝试将 Cypress 与 Angular (v. 5) CLI 应用程序一起使用。

测试在本地运行时运行良好，因为在这里我可以在运行 cypress 测试之前启动 serve 命令。

我尝试遵循文档here，但似乎所有命令都不起作用。

我尝试了各种组合，看起来像这样：

"cypress:run:report": "./node_modules/.bin/cypress run --record --key <key>",
"cypress:run:ci": "start-server-and-test serve:dev http://localhost:4200 cypress:run:report",
"cypress:run:ci2": "npm run -s serve:dev & npm run -s cypress:run:report",

提前致谢。

【问题讨论】：

嘿！您介意将正确答案更改为最受好评的答案吗？这可能会拯救一些人：D
认为它完成了@Dev ????
谢谢哥们：D

标签： angular cypress

【解决方案1】：

我对所提供的任何答案都不满意，所以我想出了以下答案：

第 1 步：安装开发依赖项

npm install --save-dev concurrently wait-on

第 2 步：在您的 package.json 中编写以下脚本：

"scripts": {
  "start": "ng serve",
  ...
  "cy:open": "cypress open",
  "cy:run": "cypress run",
  "e2e": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy:run\" --kill-others --success first",
  "e2e-gui": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy:open\" --kill-others --success first",
  ...
}

然后你可以运行npm run e2e 或npm run e2e-gui。

瞧！

【讨论】：

【解决方案2】：

start-server-and-test 似乎不能很好地与“ng serve”命令集成。我通过不使用 angular-cli 为应用程序提供服务来使其工作 - 不需要 Modules API：

package.json

"scripts": {
    "ci:serve": "ng build && http-server dist -p 4200",
    "cy:run": "cypress run",
    "cy:ci": "start-server-and-test ci:serve http://localhost:4200 cy:run"
}
"devDependencies": {
    // omitted angular & cypress deps
    "start-server-and-test": "x.x.x",
    "http-server": "x.x.x"
}

【讨论】：

如果您将 ng serve 放在单独的启动脚本中，然后将 cy:ci 脚本更改为： start-server-and-test start http-get，您实际上可以让它与 ng serve 一起工作://localhost:4200 cy:run
值得一提的是start-server-and-test是一个需要安装的NPM包

【解决方案3】：

最新的赛普拉斯更新已经包含 Angular 原理图，以简化测试与现有项目的集成。

就这么简单：ng add @cypress/schematic

然后ng e2e

【讨论】：

谢谢你的技巧，我还不知道。但是，这个命令似乎在管道中不起作用，因为它不是在无头模式下运行的。是否有任何标志可以使它起作用？
好的，我自己找到了。我只需要运行ng run ${project-name}:cypress-run :)

【解决方案4】：

第 1 步： 安装 devDependencies：

npm i -D angular-http-server start-server-and-test

angular-http-server 创建一个简单的开发服务器

start-server-and-test 启动服务器，等待 URL，然后运行测试命令；当测试结束时，关闭服务器

第 2 步： 在 package.json

上添加脚本

"scripts": {
  "build": "ng build",
  "cy:run": "cypress run",
  "ci:cy-run": "start-server-and-test ci:start-server 4200 cy:run",
  "ci:start-server": "angular-http-server --silent --path ./dist/project-name -p 4200"
}

第 4 步：将此命令添加到您的 CI 脚本中：

npm run build
npm run ci:cy-run

可选：考虑关闭cypress.json 和support 目录上的视频和截图OnRunFailure

【讨论】：

【解决方案5】：

在尝试解决这个问题几个小时后，我使用Cypress Module API 开发了一个解决方案。

Package.json

"cypress:run:ci": "node ng-serve-and-run-cypress.js",

ng-serve-and-run-cypress

'use strict';

const cypress = require('cypress');
const { spawn } = require('child_process');
const child = spawn('ng', ['serve']);

// On error exit, and print
child.on('error', (err) => process.exit(1));
child.stderr.on('data', (data) => console.log(data.toString()));
// On exit, print exit code
child.on('exit', (code, signal) => console.log(`Child exitting with code ${code}`));

child.stdout.on('data', (data) => {
    const asString = data.toString();
    // Log the output to inform CI/User
    console.log(asString);
    if (asString.includes('webpack: Compiled successfully.')) {
        cypress.run({})
        .then((results) => {
            const errorCode = (results.failures >= 1) ? 1 : 0;
            child.kill();
            // When cypress is done running the tests, exit with errorCode from above.
            process.exit(errorCode);
        })
        .catch((err) => {
            child.kill();
            // If cypress hit's an error, exit with code 1
            process.exit(1);
        })
    }
});

如果您对更多详细信息感兴趣，请在此处发布。

【讨论】：

有一个名为 start-server-and-test 的 NPM 库执行与此脚本类似的操作。巴斯蒂安斯坦的回答中提到了这一点。在这里发表评论是因为这对我来说并不是很明显

【解决方案6】：

在尝试了几种在网上找到的解决方案后，我采用了以下一个非常简单明了的解决方案：

首先您需要安装wait-on 和npm-run-all 库。

npm i wait-on npm-run-all --save-dev

wait-on 等待应用程序在特定端口上服务（启动并运行），然后再继续执行下一个命令 npm-run-all 允许并行运行多个命令。

这里应该出现脚本部分：

"scripts": {
   ...
   "serve": "ng serve",
   "cy:wait-run": "./node_modules/.bin/wait-on http-get://localhost:4200/ && cypress run",
   "cy:serve-and-run": "node_modules/.bin/run-p -r \"serve\" \"cy:wait-run\" "
   ...
 }

【讨论】：

【解决方案7】：

我使用 lite-server 是因为 http-server 无法通过 Angular 路由为我开箱即用。

npm i -D  lite-server && start-server-and-test

然后在我的 package.json 文件中

"scripts": {
   "ci:serve:employee-onboarding": "ng build --prod --project=employee-onboarding && lite-server -c lite-server-employee-onboarding-config.json",
   "cypress:ci:employee-onboarding": "start-server-and-test ci:serve:employee-onboarding http://localhost:4201 cy:run:employee-onboarding",
   "cy:run:employee-onboarding": "node_modules/.bin/cypress run --config-file ./apps/employee-onboarding-e2e/cypress-ci.json",
}

我是这样运行的：

npm run cypress:ci:employee-onboarding

我的 cypress-ci.json 文件如下所示：

{
  "baseUrl": "http://localhost:4201/",
  "integrationFolder": "apps/employee-onboarding-e2e/cypress/integration/employee-onboarding/tests-with-server-calls-mocked/",
  "fixturesFolder": "apps/employee-onboarding-e2e/cypress/fixtures"
}

我的 lite-server-employee-onboarding-config.json 文件如下所示：

{
   "port": 4201,
   "server": { "baseDir": "dist/apps/employee-onboarding" }
}

【讨论】：