How to run Angular e2e with SSL enabled?

I have a pretty simple Angular sample project, with some end to end tests. I'm testing OAuth2 and OIDC flows in my end to end tests, and browsers behave quite differently with or without SSL/TLS enabled. So I'd like to run my end to end tests with SSL turned on locally too.

I now run my tests with the Angular CLI like this:

ng e2e

I tried to run it like this:

ng e2e --ssl=true

Although the --ssl=true option does work for ng serve, it does not work for ng e2e giving me:

Unknown option: '--ssl'

Is there a way or workaround to make the Angular CLI based Protractor / Selenium tests run with SSL?

We can adapt the solution for running ng with ssl to make it work for both local and CI based running. Steps by step:

Add ssl/certificate.cnf:

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req
distinguished_name = dn

[dn]
C = NL
O = My Organisation
emailAddress = dummy@example.org
CN = localhost

[v3_req]
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Generate a .cert file with:

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout ssl/localhost.key -days 3560 -out ssl/localhost.crt -config ssl/certificate.cn

Update the serve in angular.json to be:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "ssl": true,
    "sslKey": "ssl/localhost.key",
    "sslCert": "ssl/localhost.crt",
    "browserTarget": "sample-auth-guards:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "sample-auth-guards:build:production"
    }
  }
},

Then add acceptInsecureCerts to your protractor.conf.js file's capabilities section, which will then look like this:

capabilities: {
  acceptInsecureCerts: true, // <<<<< Add this!
  browserName: 'chrome'
},

And then run ng e2e. It should run your application with SSL, and the e2e tests should use this server too. The protractor conf will allow you to skip the "Insecure Cert" warning that Chrome gives you normally.

For reference, I use a protractor-ci.conf.js file for GitHub Actions running, that tweaks things a bit. It looks like this:

const config = require('./protractor.conf').config;

config.capabilities = {
  acceptInsecureCerts: true,
  browserName: 'chrome',
  chromeOptions: {
    args: [
      '--headless',
      '--no-sandbox',
      '--disable-gpu',
    ],
  },
};

exports.config = config;

This also makes the browser headless in addition to accepting insecure certificates.

See this in action in my full repository.