Angularのe2eテスト(Protractor)でng serveとは別のURLにアクセスさせる方法

やりたかったこと

ある日私はこう思いました。
ng serveをするとlocalhost:4200でAngularアプリケーションが起動するけど、間に別の機構を挟んでいるのでテストはlocalhost:4202(=別のurl)で実行して欲しい！と。

というのも、デフォルトではng e2eを走らせるとng serveが自動で実行され、その後serveで立ち上がったアドレスでテストが始まるのです。今回はこの問題を解決するために行った
1. e2eを実行するbaseUrlを変更する
2. ng e2eでserveを実行しない設定をする
の２ステップに必要な手順をまとめていきます。

baseUrlを設定する

まずはじめに、e2eの設定が記載してあるprotractor.conf.jsを開きます。その中の

proctractor.conf.js

baseUrl: 'http://localhost:4202/',

をお好みのurlに変更します。

ng e2eでserveを実行しない設定をする

こちらの2018年のangular-cliのissueを参考にangular.jsonに以下の内容を追加し、

angular.json

...
    "<my-project>-e2e": {
      ...
      "architect": {
        "e2e": {
          ...
          "configurations": { // ココ
            "noserve": {
              "devServerTarget": ""
            }
          }
        },
      ...
      }
    }
...

ng e2e --configuration=noserveでテストを起動します。
この時、テストコマンドを走らせる前に自分でng serveするのを忘れないようにしてください。これで、無事テストがlocalhost:4202で立ち上がるようになります

ちなみに、2017年のangular-cliのissueによればng e2eの代わりにng e2e --no-serveとするだけで良いとのことでしたが、現在はただオプションをつけるだけではうまくいきません。(少なくとも私の手元ではできませんでした)

---

こうして初めて画面テストを書いてみていますが、
個人的には単体テストよりもするする書けるので楽しめています。
書いたことのない人もぜひ挑戦してみてください！
最後まで目を通していただきありがとうございました