Question

我正在运行Angular 2+应用程序，并使用Cypress.io和CI使用circleCI进行集成测试。

我从提供here的教程中了解了如何使用circleCI设置Angular项目，但是还需要添加柏树球体来运行Cypress。所以我最终得到了以下config.yml脚本：

version: 2.1
orbs:
  cypress: cypress-io/cypress@1.0.1
jobs:
  build:
    working_directory: ~/project
    docker:
      - image: angular/ngcontainer
    steps:
      - checkout
      - run:
          name: Show current branch
          command: |
            echo ${CIRCLE_BRANCH}
            echo $fireBaseApiKey
      - restore_cache:
          keys:
            - v1-dependencies-{{checksum "package.json"}}
            - v1-dependencies-
      - run:
          name: Install local dependencies
          command: |
            npm install
      - save_cache:
          key: v1-dependencies-{{checksum "package.json"}}
          paths:
            - node_modules
      - run:
          name: Building
          command: npm run build
      - save_cache:
          key: v1-dist-{{ .Environment.CIRCLE_BRANCH}}-{{ .Environment.CIRCLE_SHA1}}
          paths:
            - dist
workflows:
  version: 2.1
  build:
    jobs:
      - build
      - cypress/install:
          requires:
            - build
          build: 'npm run build'
          context: fireBaseApiKey
      - cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          context: fireBaseApiKey

circleCI启动时，工作流的前两个作业成功（构建和cypress / install），但是cypress / run产生以下错误：

Cypress无法验证设置为“ baseUrl”的服务器是否为   正在运行：


http://localhost:4200


您的测试可能会向此“ baseUrl”发出请求，而这些测试将   如果不启动服务器，则失败。

请启动该服务器，然后再次运行Cypress。

我猜我没有使用npm run build命令启动服务器。

我尝试添加：

- run:
          name: start ng server
          command: ng serve

在“构建”作业中，但随后的错误是：

/ bin / bash：ng：找不到命令

我试图在dockerhub上找到一个可以执行ng命令的docker容器，“ angular / ngcontainer”似乎是一个不错的选择，因为按照本教程链接使用circleci / node：6.10-browsers作为我的docker镜像也无法识别ng命令。

我想我在这里远远超出了我的理解范围，还没有找到使用Cypress并在circleCI上运行CI的Angular项目的示例。拥有这样一个例子可能会大大帮助事情变得有意义。在此之前，是否有人对我如何执行ng serve之类的命令有任何建议，您是否认为这将解决我的服务器不启动错误？

更新2019年2月3日19:34：

我在研究the cypress orb usage之后，在互联网上从朋友那里获得了wait-on的建议。因此，我更新后的-cypress/run命令显示为：

...
- cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          wait-on: 'http://localhost:4200'
          context: fireBaseApiKey

这似乎在等待一个永远不会发生的'http://localhost:4200'。

Answer 1

我认为我可以帮助解决ng command not found问题。

您需要在dev依赖项中安装angular cli：

npm install --save-dev @angular/cli@latest

在脚本npm install中运行ng之后，将存在，因此您可以添加ng serve步骤来启动服务器。

Answer 2

虽然我认为这不适用于您，但是当我搜索问题时，这个问题确实弹出了。因此，如果有人遇到类似问题，这就是我的工作方式。

要使某些NPM软件包在我们的环境中工作，我需要使用我们的公司代理，并通过Jenkins Pipeline中的HTTP_PROXY和HTTPS_PROXY环境变量进行设置。经过一番调试后，发现cypress试图对代理进行某些操作。一旦我将NO_PROXY = localhost柏树设置为连接状态，就成功了！

Answer 3

这里实际上存在一些问题：

似乎我需要使用http-get而不是http。因此：wait-on: 'http-get://localhost:4200'
我的环境变量仍然存在问题，here被问及回答了。

因此，最终的配置文件看起来像这样：

version: 2.1
orbs:
  cypress: cypress-io/cypress@1.5.1
jobs:
  build:
    working_directory: ~/project
    docker:
      - image: circleci/node:9.6.1-browsers
    environment:
      circleCiApiKey: fireBaseApiKey
    steps:
      - checkout
      - run:
          name: Show current branch
          command: |
            echo ${CIRCLE_BRANCH}
            ls -larth
            echo $fireBaseApiKey
            cat src/app/api-keys.ts
            sed -i "s/circleCiApiKey/$fireBaseApiKey/g" src/app/api-keys.ts
            cat src/app/api-keys.ts
      - restore_cache:
          keys:
            - v1-dependencies-{{checksum "package.json"}}
            - v1-dependencies-
      - run:
          name: Install local dependencies
          command: |
            npm install
      - save_cache:
          key: v1-dependencies-{{checksum "package.json"}}
          paths:
            - node_modules
      - run:
          name: Building
          command: npm run build
      - save_cache:
          key: v1-dist-{{ .Environment.CIRCLE_BRANCH}}-{{ .Environment.CIRCLE_SHA1}}
          paths:
            - dist
workflows:
  version: 2.1
  build:
    jobs:
      - build
      - cypress/install:
          requires:
            - build
          build: 'npm run build'
      - cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          store_artifacts: true
          wait-on: 'http-get://localhost:4200'

sed语句中引用的api-key.ts文件如下：

export var masterFirebaseConfig = {
    apiKey: "circleCiApiKey",
    authDomain: "dataJitsu.firebaseapp.com",
    databaseURL: "https://datajitsu.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "495992924984"
  };

export var masterStripeConfig = {
  publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",
  secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",
  publicApiKey: "",
  secretApiKey: ""
};

CircleCI错误，您的测试可能会对此“ baseUrl”发出请求，并且如果您不启动服务器，这些测试将失败

3 个答案: