前言

上一篇簡單介紹了端對端測試，這一篇開始會從安裝 Cypress 開始陸續在 Angular 專案中加入端對端程式。

Cypress 的安裝

要在專案中使用 Cypress 框架，可以利用 NPM 命令來進行安裝。

npm install -D cypress

而在 Angular 專案中，則可以利用 Angular Schematics 來直接安裝與設定好整個專案，因此我們可以執行下面命令：

ng add @cypress/schematic

如下圖所示，在安裝過程中會詢問是否把 Cypress 做為 ng e2e 命令的預設測試框架。

而當我們設定為 e2e 的預設測試框架時，Angular Schematics 會一併在 angular.json 檔案內加入 cypress-run、cypress-open 與 e2e 區塊。

"cypress-run": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "devServerTarget": "ironman-2022-angular-test-example:serve"
  },
  "configurations": {
    "production": {
      "devServerTarget": "ironman-2022-angular-test-example:serve:production"
    }
  }
},
"cypress-open": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "watch": true,
    "headless": false
  }
},
"e2e": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "devServerTarget": "ironman-2022-angular-test-example:serve",
    "watch": true,
    "headless": false
  },
  "configurations": {
    "production": {
      "devServerTarget": "ironman-2022-angular-test-example:serve:production"
    }
  }
}

如此一來，我們在執行 ng e2e 命令時， 就可以在開啟 cypress 執行測試之前，也如同使用 ng serve 一樣把此專案的一併啟動。

Cypress 的圖形介面

在安裝完 Cypress 之後，就可以利用 ng e2e 命令來啟動 Cypress。如先前所提到，這個命令會幫我們執行 ng serve 與 cypress open 兩個命令，來啟動應用程式以及 Cypress 的啟動介面，我們就可以在此介面選擇希望利用哪一套瀏覽器去執行測試。

因為本系列文的範例會使用到 json-server 來模擬後端服務，因此啟動 Cypress 之前先執行 json-server src/assets/data/db.json 命令啟動 json-server。

啟動端對端測試後，就會利用選擇的瀏覽器開始 Cypress 介面；此介面就會顯示專案的 cypress 資料夾的所有測試程式。

在點選要執行的測試案例，則會進入下圖的介面，此介面的左邊為案例執行的步驟，而右邊則是實際應用系統的操作情形（為了讓測試程式的結果正確，在這有修改過原本安裝時所建立的測試內容）。

Cypress 的執行

除了開啟圖形化介面外，Cypress 也提供了 cypress run 來在 Terminal 執行端對端測試，與 cypress open 一樣執行命令前需要啟動應用程式。不過因為 Angular Schematics 在 angular.json 裡加入了 cypress-run 區塊，所以我們可以改用下面指令來同時執行 ng serve 與 cypress run 兩個指令。

ng run ironman-2022-angular-test-example:cypress-run

也可以把這個命令加入 package.json 檔案內的 scripts 區塊來簡化：

{
  "scripts": {
    "e2e:run": "ng run ironman-2022-angular-test-example:cypress-run"
    ...
  }
}

如此一來，我們就可以直接執行 npm run e2e:run 命令進而得到下圖的測試結果。

接下來

這一篇大致介紹了 Cypress 的安裝與使用命令，完整的專案設定可以參考 GitHub。接下來，就開始利用 Cypress 來撰寫 E2E 測試。