如何在启用 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

我们可以使用 ssl

调整 running

ng

的解决方案，使其适用于本地和基于 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 = [email protected]
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 将

serve

中的

angular.json

更新为：

"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

 测试也应该使用此服务器。量角器配置将允许您跳过 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;

除了接受不安全的证书之外，这还使得浏览器

无头。

在我的完整存储库中查看

此操作。

Answer 2

如果我想将 ssl 设置为 true 来为应用程序提供服务，但设置为 false 来进行 e2e 测试，该怎么办？