使用 Cypress 的經驗分享

安裝[Dos command mode 下執行相關語法]

• 前置準備

  • Node.js 安裝   (檢查版本：node -v)

  • npm 是一個套件管理工具，可以從裡面去下載相關套件 。安裝 Node.js 時自動會安裝 。
    (檢查版本：npm -v)

• cypress 安裝(注意目錄結構與設定檔案位置)

  • 切換到 [安裝目錄] 下執行：npm install cypress --save-dev

  • 切換到 [安裝目錄] 下執行：npm init -y 會把相關資訊寫進 package.json 檔案中

• Recorder 安裝

  • Chrome 線上應用程式商店，找  [Cypress Recorder] 安裝啟用

A. [E2ETesting](原始的 UI Testing)

透過 Recorder 紀錄Step，測試 [Cypress Chrome Recorder]，紀錄如下附圖

舊版程式要在新版環境下執行，對照要更動的地方
(筆者的舊版是 v4.9)(目前安裝的新版是 v13.16)：

• spec

  • 舊版 spec 放在 cypress\integration 目錄下；副檔名是 .js

  • 新版 spec 放在 cypress\e2e 目錄下；副檔名是 .cy.ts
    (有嘗試改過 [專案目錄] 目錄下的 cypress.config.js 增加讀取 .js Pattern ，
    解析會過，但是還是會說找不到 spec 'Can't run because no spec files were found.')
    所以改副檔名 .js 為 cy.ts 就可以順跑了。spec 要改放到 cypress\e2e 這個目錄下

B. [Component Testing]

參考 git 上面的 sample ，裡面有相關的 config 設定內容跟相對應的路徑，配置相對應的檔案跟路徑後，Component Testing 就可以順利開啟了。重要對應的設定檔案有：angular.json, cypress.config.js,  tsconfig.app.json,  tsconfig.json (先放預設內容即可)
cypress.config.js 設定的說明可參考官方網站

因為選擇 angular 做模擬測試，所以會要求要安裝 angular，在[專案目錄]下安裝，強制安裝可參考下列語法執行

npm install --force -D @npmcli/package-json

npm install --force -D @angular-devkit/build-angular

npm install --force -D @angular/core

npm install --force -D @angular/common

npm install --force -D @angular/platform-browser-dynamic

npm install --force -D @angular/cli

npm audit fix --force

前述關掉的設定要去掉；supportFile: false,
設定都安置沒有問題後，點擊 [Component Testing] 會看到下列畫面

發現 cypress 可支援多種框架，一般來說前端開發者的開發語言框架通常會是選用特定語言的，
而如果前端開發時，使用了其他不同語言，單元測試要做切換時，要先移除原本的框架，再安裝新的語言框架，例如：
npm uninstall @cypress/angular
npm install @cypress/react
如果前端畫面相同，但框架異動，原始的測試程式碼也是要跟著調整。