17

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

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

我尝试按照此处的文档进行操作，但似乎没有任何命令有效。

我尝试了各种组合，如下所示：

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

提前致谢。

4

7 回答 7

18

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

第 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.

瞧！

于 2019-02-20T00:43:52.213 回答
5

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

包.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"
}
于 2018-05-19T16:37:38.223 回答
4

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

很简单：ng add @cypress/schematic

接着ng e2e

于 2021-11-21T14:11:36.403 回答
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

可选：考虑关闭视频和 screenshotOnRunFailure on cypress.jsonand supportdirectory

于 2020-05-11T18:20:24.403 回答
2

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

包.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);
        })
    }
});

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

于 2018-02-16T11:42:14.963 回答
1

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

首先，您需要安装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\" "
   ...
 }
于 2020-01-06T21:26:51.320 回答
0

我使用了 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" }
}
于 2019-11-04T16:11:23.930 回答