Angular CLI use configuration with E2E tests

Question

I'm going through updating a Angular CLI project to v6

The problem I'm having is that before v6 I could use the command ng e2e -e=e2e and the tests would run properly with the given environment. In v6 environments are changed to configuration but ng e2e -c=e2e doesn't work.

The error I get is:

Configuration 'e2e' could not be found in project 'admin-e2e'.
Error: Configuration 'e2e' could not be found in project 'admin-e2e'.
at Architect.getBuilderConfiguration (c:\_inmoment\admin\client\node_modules\@angular-devkit\architect\src\architect.js:102:23)
at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (c:\_inmoment\admin\client\node_modules\@angular\cli\models\architect-command.js:64:55)
at MergeMapSubscriber._tryNext (c:\_inmoment\admin\client\node_modules\rxjs\internal\operators\mergeMap.js:122:27)
at MergeMapSubscriber._next (c:\_inmoment\admin\client\node_modules\rxjs\internal\operators\mergeMap.js:112:18)
at MergeMapSubscriber.Subscriber.next (c:\_inmoment\admin\client\node_modules\rxjs\internal\Subscriber.js:103:18)
at TapSubscriber._next (c:\_inmoment\admin\client\node_modules\rxjs\internal\operators\tap.js:109:26)
at TapSubscriber.Subscriber.next (c:\_inmoment\admin\client\node_modules\rxjs\internal\Subscriber.js:103:18)
at MergeMapSubscriber.notifyNext (c:\_inmoment\admin\client\node_modules\rxjs\internal\operators\mergeMap.js:141:26)
at InnerSubscriber._next (c:\_inmoment\admin\client\node_modules\rxjs\internal\InnerSubscriber.js:30:21)
at InnerSubscriber.Subscriber.next (c:\_inmoment\admin\client\node_modules\rxjs\internal\Subscriber.js:103:18)

I've tried to add a configuration section to the e2e section of the angular.json.

I've tried to add another section to the architect section of the project that always uses the e2e config.

Does anyone know how to use the --configuration flag with e2e tests?

Just not sure what I'm missing.

Answer 1

First remove the "devServerTarget": "project:serve" from option section of the e2e and try to place it in particular configuration you need. In this case if you are running tests in local, use it and for the Jenkins or CI, remove it and place the baseUrl to target a particular url.

Also after this configuration, you can pass --base-url from command line to dynamically changing the base url from jenkins for e2e-ci .

ng e2e --configuration=e2e-ci --suite=home --base-url="http://google.com"

Below is the configuration

"project-e2e": {
  "root": "e2e/",
  "sourceRoot": "e2e",
  "projectType": "application",
  "prefix": "",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "./protractor.conf.js"
        // remove "devServerTarget": "project:serve" here. it normally for all
      },
      "configurations": {
        "production": {
          "devServerTarget": "project:serve:production",  // use it here for local test to pull localhost:4200 and run test on it
          "serve": false,
          "webdriverUpdate": false
        },
        "e2e-ci": { // this one is for jenkins/CI so no dev server require but pass the baseUrl. see there is no devServerTarget option here
          "protractorConfig": "./protractor.conf.js",  
          "baseUrl": "https://specificurltotest.org"
        }
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": "e2e/tsconfig.e2e.json",
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
}

Answer 2

I figured it out. This won't work if you need to use different configurations. But, if there is a single configuration you want to use for your e2e tests this is how you do it.

In the main section of the angular.json for your file there are configurations. You can reference any of those configurations! All I had to do was update the devServerTarget section for the e2e tests to reference the proper build configuration.

So change this:

"e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "./protractor.conf.js",
    "devServerTarget": "admin:serve"
  }
}

To this:

"e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "./protractor.conf.js",
    "devServerTarget": "admin:serve:e2e"
  }
}