Cypress 效能外掛程式「cypress-performance」：自動化 Web 效能測試指南

介紹

這是我在 dev.to 的第一篇文章，所以我希望它會受到歡迎

當我努力測量 Web UI 效能並且現有插件無法為我提供所需的靈活性時，我想到了創建這個插件的想法。 「cypress-performance」外掛程式引入了一種強大的方法來直接在 Cypress 測試中測量和斷言 Web 效能指標。與注重功能的傳統端到端測試不同，該插件使團隊能夠及早發現效能回歸，並透過自動化測試保持高效能標準。

Web 效能測試如今變得至關重要。使用者期望閃電般快速的體驗，而緩慢載入的頁面可能會嚴重影響業務指標。雖然 Cypress 是端到端測試的優秀工具，但它缺乏內建的效能測量功能。

今天，我很高興向您介紹“cypress-performance”，這是一個新插件，可為您的 Cypress 測試帶來效能測量功能。

你可以在這裡查看：

https://www.npmjs.com/package/cypress-performance https://github.com/Valiantsin2021/cypress-performance

主要特點

• 測試執行期間的即時效能指標收集

• 內建重試機制，實現可靠測量

• 支援 Core Web Vitals 和其他關鍵績效指標

• 與現有賽普拉斯測驗無縫整合

• TypeScript 支援的型別定義

• 可設定的閾值和計時選項

為什麼需要另一個效能測試插件？

您可能想知道，「我們不是已經有「@cypress-audit/lighthouse」了嗎？」是的，我們這樣做，而且它是一個出色的工具。然而，「cypress-performance」採取了不同的方法：

• 真實使用者指標：Lighthouse 模擬特定條件下的效能，而 cypress-performance 則在實際測試執行期間擷取指標，讓您深入了解真實使用者場景。

• 測試集成：該插件與您現有的測試無縫集成，允許您在執行常規測試流程時測量性能，而不是作為單獨的審核。

• 精細控制：您可以對何時以及如何衡量性能進行精細控制，並透過內建重試機制獲得可靠的結果。

• 核心網路生命：專注於重要的現代效能指標，包括最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)。

• 較低的開銷 - 無需單獨運行燈塔

• 更少的配置 - 基本使用所需的最少設定

• 具體指標重點 - 核心網路生命力與關鍵時間

• 測試整合 - 自然適合現有測試流程該命令是可連結的，並傳回所有收集到的要斷言的指標

• 重試功能 - 內建可靠性機制，以確保收集指標

• 資源計時 - 詳細的資源等級指標

• 總位元組數 - 所有資源的大小

另一邊 - @cypress-audit/lighthouse 為我們提供了
全面審核，包括 SEO、可訪問性

• 與 Lighthouse 一致的評分系統

• 最佳實務的靜態分析

• 改進建議

• 各種條件下的效能模擬

• 超越表現的更廣泛指標

那麼它是什麼以及如何使用它？

這是一個獨立的 Cypress 插件，具有 0 個外部相依性。

先安裝外掛：

npm install -D cypress-performance

加入您的 cypress/support/e2e.js：

導入「柏樹效能」

對於 TypeScript 用戶，請在 tsconfig.json 中包含類型：

現在您已準備好開始衡量效能！

用法

該外掛程式公開了單一 Cypress 方法：

cy.performance()

cy.performance() 指令本身是可重試的，這表示 Cypress 將重試該指令，直到：

• 取得有效指標

• 達到重試超時

指令的預設選項：

典型的檢定如下：

她喜歡在賽普拉斯測試運行器中看到的樣子：

最佳實踐

設定切合實際的閾值設定效能閾值時請考慮您的使用者和應用程式：LCP：

使用自訂標記對於單頁應用程式或複雜的使用者流程，使用自訂效能標記來衡量特定的交互作用。

考慮環境變化請記住，CI 環境的效能可能與本地開發不同。相應地調整閾值或使用相對比較。

與其他指標結合將 cypress-performance 與 Lighthouse 等其他工具結合使用，以獲得完整的效能圖

結語

我的「cypress-performance」外掛程式用於快速收集有價值且最重要的 Web 效能指標，並為您的 Cypress 測試套件帶來效能測試功能。透過專注於真實的用戶指標並提供細粒度的控制，有助於確保您的應用程式在實際使用條件下表現良好。

無論您是監控 Core Web Vitals、測量特定用戶交互，還是確保資源加載順利，「cypress-performance」都可以提供您所需的工具，以便在效能回歸投入生產之前捕獲它們。

良好的效能不僅在於速度，還在於一致性和可靠性。透過“cypress-performance”，您可以確保您的應用程式在整個開發生命週期中保持高效能標準。

在您的專案中嘗試一下，然後讓我知道它對您有何幫助！該插件是開源的，我歡迎所有貢獻和回饋。

以上是Cypress 效能外掛程式「cypress-performance」：自動化 Web 效能測試指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！