Question

我正在尝试将赛普拉斯与Angular（v.5）CLI应用程序一起使用。

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

我尝试按照文档here，但是这些命令似乎都没有起作用。

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

"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

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

第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",
  "e2e-gui": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy:open\" --kill-others",
  ...
}

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

Voila！

编辑：我创建了一个要点，说明了如何通过prod或暂存版本运行SSR： https://gist.github.com/glemiere/3282c3ace9417b32c75d93d7f0d3086d

Answer 2

第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目录上的视频和screenshotOnRunFailure

Answer 3

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

<强>的package.json

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

<强> NG-发球和运行柏树

'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);
        })
    }
});

如果您对更多细节感兴趣，请在此处发帖。

Answer 4

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 5

"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",
  "e2e-gui": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy:open\" --kill-others",
  ...
}

Answer 6

我使用了lite-server，因为Angular路由对我来说http-server没有开箱即用。

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

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

6 个答案: