angular-cli: Setting baseUrl in protractor.conf is not working

You can pass –public-host arg to your ng e2e call (i.e: ng e2e --public-host=“https://hostname.com”)

It seems to have to do with using the “serve” target for that configuration, which for some reason overwrites the baseUrl from the protractor.conf. We managed to work around it by either modifying the default “production” e2e config to not use the “serve” as “devServerTarget”, or creating a separate configuration in the e2e project part of the angular.json for accessing a different webserver, like this:

"e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
   },
  "configurations": {
     "local": {
        "protractorConfig": "./protractor.conf.js"
        "devServerTarget": "my-app:serve:production",
      },
     "remote": {
        "protractorConfig": "./protractor.conf.remote.js",
      }
   }
}

The first “local” config is used for e2e testing against a locally running “ng served” web server, and the “remote” config is used to run the test suite against a remote web server, which is configured using the baseUrl in the different protractor.conf.remote.js.

Maybe this will help other people with the same problem.

Update: Just to clarify, you don’t need a separate protractor.conf in case you only want to overwrite the baseUrl. You can simply do that using the “baseUrl” property of the configuration, or the “base-url” command line parameter:

"remote": {
  "baseUrl": "http://mytestserver",
}

@intellix no, there isn’t a good way to call call ng e2e and send CLI overrides to the serve command, unfortunately.

That’s an interest use case. I’m not sure how it can be addressed without fully exposing all transitive dependencies. Perhaps by allowing the config file to pull values from the environment or commands.

One problem I have is that the value needs to be dynamic as we don’t know where the server is going to be accessible from ahead of time.

We’re using Jenkins pipelines to run the e2e tests. That Jenkins executor is bought up dynamically within a Kubernetes cluster and will have a randomised IP. Our Selenium grid deploys pods in Kubernetes and needs to be able to access the ng e2e web-server running within randomly placed Jenkins executor pod.

package.json scripts:

"scripts": {
  "e2e": "ng e2e",
  "e2e:ci": "CI=true npm run e2e",
  "serve": "ng serve --host=0.0.0.0 --disable-host-check"
}

Jenkinsfile pipeline for starting the e2e tests:

POD_POST = sh (
    script: 'ip r show dev "$(ip r|awk \'$1=="default"{print$NF}\')"|awk \'$1!="default"{print$NF}\'',
    returnStdout: true
).trim()
withEnv(['POD_HOST=' + POD_POST]) {
    sh 'docker-compose up --abort-on-container-exit ngserve e2e'
}

docker-compose.yml:

services:
  ngserve:
    image: app
    build: .
    command: npm run serve
    ports:
      - "4200:4200"

  e2e:
    image: app
    command: npm run e2e:ci
    depends_on:
      - ngserve
    environment:
      POD_HOST:

Inside the protractor.config.js file:

baseUrl: process.env.CI ? `http://${process.env.POD_HOST}:4200` : 'http://localhost:4200/',
directConnect: process.env.CI ? false : true,
seleniumAddress: 'https://zalenium.k8s.ourserver.io/wd/hub',

When you deploy within a K8S cluster the host/port are totally randomised and I don’t see how this can be accomplished within angular.json without using bash magic

Everything I used to use was ripped away from CLI and placed into static configuration files and it just gets more and more difficult to accomplish 😃

I’m setting up a Selenium grid and after getting it to work, wanted to share a composition of what you need to do.

Basically the workaround is to remove the devServerTarget from myapp-e2e.targets.e2e.options and manually serve, so something like this for an external e2e server that needs to talk to your app:

angular.json snippet:

"myapp-e2e": {
  "root": "e2e/",
  "projectType": "application",
  "targets": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js"
      },
      "configurations": {
        "production": {
          "devServerTarget": "myapp:serve:production"
        }
      }
    },

protractor.conf.js:

directConnect: false,
seleniumAddress: 'https://salenium.myapp.com/wd/hub',
baseUrl: 'http://somewhere-where-selenium-can-access-ng-serve:4200',

commands to run in parallel:

ng serve --host=0.0.0.0 --disable-host-check
ng e2e

ng e2e will instruct the external Selenium server to run tests against the server accessible via baseUrl

@mtaylor769 Sorry I should have explained that the options block was omitted for brevity