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

Question

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

在本地运行时测试工作正常，因为在这里我可以在运行 cypress 测试之前启动服务命令。

我尝试按照文档 here，但是 none 的命令似乎有效。

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

"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",

提前致谢。

Answer 1

在尝试解决这个问题几个小时后，我开发了一个使用 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);
        })
    }
});

如果您对更多详细信息感兴趣，请点击此处 post。

Answer 2

start-server-and-test 似乎不能很好地与 'ng serve' 命令集成。我通过不使用 angular-cli 为应用程序提供服务来实现它的工作——不需要模块 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"
}

Answer 3

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

步骤 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.

瞧！

Answer 4

我使用 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" }
}

Answer 5

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

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

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

wait-on 在继续执行下一个命令之前等待应用程序在特定端口上服务（启动和运行ning） 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\" "
   ...
 }

Answer 6

步骤 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

Answer 7

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

简单如：ng add @cypress/schematic

然后是ng e2e

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

How to serve angular cli app before running cypress in CI?

angular

cypress

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