quan0715 / quano715blog Goto Github PK

Landing Page

• 網站主頁
• 網站介紹
• 導流到登入介面

User Login Page

• 登入中繼，只需要Github 登入

Dashboard Page

• 顯示部署狀態
• 顯示文章編輯列表
  • 新增文章功能
  • 搜尋文章標題/副標題 By Name
  • 文章列表篩選
    • by tag
  • 文章 Card
    • Issue Name
    • Issue Author
    • Issue Tag
    • Issue Comment Number
    • Issue Reaction Number
    • Issue last time update

Deploy Page

• 部署設定(3 Step Form)
  1. 選擇樣板
  2. 樣板環境設定 (需要視樣板決定)
     • 部落格標題
     • 介紹文字
     • 封面圖片(optional)
     • 亮色/暗色/電腦預設
     • 文章
       • 開放留言
     • 其他 ……
  3. 預覽畫面
  4. 開始部署

Cypress 框架基本介紹

Cypress 是一個前端自動化測試工具，專為web app 設計。它使測試人員和開發人員能夠輕鬆撰寫快速、可靠且可維護的自動化測試。以下有幾個我認為最大的特點。

• DX 開發者體驗良好
  • 直觀的 API 設計、能夠實時執行腳本，且視覺話呈現每一個測試命令的執行結果，有助於開發者快速開發和 Debug
  • Timestamp snapshot: 提供每個階段每個步驟的快照結果
• CI/CD 快速部署
  • Cypress 支援多種線上版控工具包括 GiHub / GitLab 等等，且完善的Action pipeline 都使 Cypress 能更快速的部署在線上環境
• E2E base test & Component test
  • 除了從頭到尾的 e2e 測試，還有提供 component base 測試，讓user專心測試一種 component 的操作（有點類似 端對端測試中的Unit test 的概念）

cypress 相對於與他同樣類型的框架例如 Selenium ，不需要瀏覽器驅動，在官方文件上以及社群文件上也都在端對端測試框架中相對活躍，也因此 cypress 成為近期最流行的 e2e 測試框架。

簡單工作原理

Cypress 是一個自動化測試工具，能夠直接在瀏覽器中運行測試代碼，模擬用戶對Web應用的互動。它通過Webpack打包測試代碼並在其控制的瀏覽器窗口中執行。

Cypress 允許測試代碼直接操作DOM和Windows Objects，無需複雜的消息傳遞，從而提高了測試的運行速度。此外，Cypress 有自己的 Node.js Process，可以控制網路請求和響應，通過內置的代理來修改和監聽網路交互，這使得Cypress不僅能在瀏覽器中進行豐富的測試，也能模擬後端服務，為構建各種測試場景提供靈活性。

test data