安裝[Dos command mode 下執行相關語法]
前置準備
Node.js 安裝 [檢查版本：node -v]
npm 是一個套件管理工具，可下載相關套件 ，安裝 Node.js 時自動會安裝
[檢查版本：npm -v]
cypress 安裝[注意目錄結構與設定檔案位置]
切換到 [安裝目錄] 下執行：npm install cypress --save-dev
切換到 [安裝目錄] 下執行：npm init -y 會把相關資訊寫進 package.json 檔案中
cypress.config.js 放在跟 package.json 同一層，內容可以到 https://docs.cypress.io/api/node-events/browser-launch-api#Syntax 複製貼上存成 cypress.config.js 檔案
放一個 demo.cy.js 到 cypress\e2e 目錄下
切換到[專案目錄]下，執行語法：npx cypress run 會直接跑 [安裝目錄]\[專案目錄]\cypress\e2e\的 所有 .cy.js 檔案
npx cypress open --browser chrome --component [讀取 support 目錄下的設定]
npx cypress open --browser chrome --e2e [讀取 e2e 目錄下的設定]
A. [E2ETesting][原始的 UI Testing]
透過 Recorder 紀錄Step，測試 [Cypress Chrome Recorder]，紀錄如下附圖
6. 在[安裝目錄]\[專案目錄]\目錄下，執行 npx cypress open 可以開啟 UI 畫面，點 E2E Testing > 預設在 Chrome 瀏覽器上，點擊 [Start E2E Testing in Electron][下下張圖] > 開出右下方有左選單的畫面 > 單獨點擊剛剛錄製出來的 cypressDemo1.cy.js
舊版程式要在新版環境下執行，對照要更動的地方
[筆者的舊版是 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 price policy，如果非重度使用者 Free Trial 可以用一段期間。Team 若有 50 人使用，平均一個月是 NT$40 左右。算是蠻不錯的付費方案。
發現 cypress 可支援多種框架，一般來說前端開發者的開發語言框架通常會是選用特定語言的，而如果前端開發時，使用了其他不同語言，單元測試要做切換時，要先移除原本的框架，再安裝新的語言框架，例如：
npm uninstall @cypress/angular
npm install @cypress/react
如果前端畫面相同，但框架異動，原始的測試程式碼也是要跟著調整。
