如何在启用 SSL 的情况下 运行 Angular e2e?

How to run Angular e2e with SSL enabled?

我有一个非常简单的 Angular 示例项目,其中包含一些端到端测试。我正在端到端测试中测试 OAuth2 和 OIDC 流程,浏览器在启用或不启用 SSL/TLS 的情况下表现完全不同。所以我想 运行 我的端到端测试也在本地打开 SSL。

我现在 运行 我的 Angular CLI 测试如下:

ng e2e

我试过 运行 是这样的:

ng e2e --ssl=true

尽管 --ssl=true 选项确实适用于 ng serve,但它 不适用于 ng e2e 给我:

Unknown option: '--ssl'

有没有一种方法或解决方法可以使用 SSL 进行基于 Angular CLI 的 Protractor/Selenium 测试 运行?

我们可以调整 使其适用于本地和基于 CI 的 运行ning。一步一步:

添加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

生成 .cert 文件:

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

angular.json 中的 serve 更新为:

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

然后将 acceptInsecureCerts 添加到 protractor.conf.js 文件的 capabilities 部分,该部分将如下所示:

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

然后是运行ng e2e。它应该 运行 你的应用程序使用 SSL,并且 e2e 测试也应该使用这个服务器。量角器 conf 将允许您跳过 Chrome 通常给您的“不安全证书”警告。

作为参考,我将 protractor-ci.conf.js 文件用于 GitHub 操作 运行ning,这会稍微调整一下。它看起来像这样:

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

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

exports.config = config;

除了接受不安全的证书外,这还会使浏览器 无头

参见 this in action in my full repository