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

Question

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

我现在像这样使用 Angular CLI 运行我的测试：

ng e2e

我试着这样运行它：

ng e2e --ssl=true

虽然--ssl=true 选项确实适用于ng serve，但它确实不适用于ng e2e 给我：

未知选项：'--ssl'

有没有办法或解决方法让基于 Angular CLI 的 Protractor / Selenium 测试使用 SSL 运行？

Answer 1

我们可以调整 the solution for running ng with ssl 使其适用于本地和基于 CI 的运行。一步一步：

添加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 测试也应该使用这个服务器。 protractor conf 将允许您跳过 Chrome 通常给您的“不安全证书”警告。

作为参考，我使用protractor-ci.conf.js 文件来运行 GitHub Actions，这会稍微调整一下。它看起来像这样：

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

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

exports.config = config;

这也使得浏览器headless除了接受不安全的证书。

见this in action in my full repository。