[Angular] Add E2E Testing from zero to one with cyrpess

Angular 在 12 版之類就將 protactor E2E framework 從 CLI 起始專案中移除，主要原因是大家習慣用來做 E2E 測試的工具，Protractor 已經不是主流，是 cypress，為了這個原因，Angular 團隊決定把這選擇權還回開發者手上，讓開發者決定自己的 E2E 測試。

初始環境

當然有強大 angular schematics，cypress 也有出可以快速設定測試環境的套件，以下是如何安裝及執行第一個 E2E 測試的步驟

1. 當起始一個新的 Agnular 專案，已經看不到 E2E 的資料夾了

   

2. 好家在有 ng add 的功能，cypress 的套件安裝可以透過 ng add @cypress/schematic 來完成，這個會執行以下工作

   ✅ Install Cypress

   ✅ Add npm scripts for running Cypress in run mode and open mode

   ✅ Scaffold base Cypress files and directories

   ✅ Provide the ability to add new e2e files easily using ng-generate

   ✅ Optional: prompt you to add or update the default ng e2e command to use Cypress.

   

3. 當跑完後就可以執行 ng e2e 將 cypress 執行起來並執行第一個預設測試，但如果在沒有任何修改下，會測試錯誤

   

4. 就來修改一下 e2e 測試讓他綠燈

   describe('My First Test', () => {
     it('Visits the initial project page', () => {
       cy.visit('/')
       cy.contains('Welcome')
       cy.contains('e2e-study app is running!')
     })
   })

   

5. 這樣就完成 cypress e2e 測試環境了

cypress-schematics 介紹

1. To run Cypress in open mode within your project:

   ng run {project-name}:cypress-open

2. To run Cypress headlessly via run mode within your project:

   ng run {project-name}:cypress-run

3. If you have chosen to add or update the ng e2e command, you can also run Cypress in open mode using this:

   ng e2e

4. To generate new e2e spec files:

   ng generate @cypress/schematic:e2e

更多設定參數可以到這連結仔細研究 (angular.json)

參考資料

• cypress schematics