介紹

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

當我努力測量 Web UI 性能并且現(xiàn)有插件無法為我提供所需的靈活性時，我想到了創(chuàng)建這個插件的想法。 “cypress-performance”插件引入了一種強大的方法來直接在 Cypress 測試中測量和斷言 Web 性能指標。與注重功能的傳統(tǒng)端到端測試不同，該插件使團隊能夠及早發(fā)現(xiàn)性能回歸，并通過自動化測試保持高性能標準。

Web 性能測試如今變得至關(guān)重要。用戶期望閃電般快速的體驗，而緩慢加載的頁面可能會嚴重影響業(yè)務(wù)指標。雖然 Cypress 是端到端測試的優(yōu)秀工具，但它缺乏內(nèi)置的性能測量功能。

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

你可以在這里查看：

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

主要特點

• 測試執(zhí)行期間的實時性能指標收集

• 內(nèi)置重試機制，實現(xiàn)可靠測量

• 支持 Core Web Vitals 和其他關(guān)鍵績效指標

• 與現(xiàn)有賽普拉斯測試無縫集成

• TypeScript 支持的類型定義

• 可配置的閾值和計時選項

為什么需要另一個性能測試插件？

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

• 真實用戶指標：Lighthouse 模擬特定條件下的性能，而 cypress-performance 則在實際測試執(zhí)行期間捕獲指標，讓您深入了解真實用戶場景。

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

• 精細控制：您可以對何時以及如何衡量性能進行精細控制，并通過內(nèi)置重試機制獲得可靠的結(jié)果。

• 核心網(wǎng)絡(luò)生命：關(guān)注重要的現(xiàn)代性能指標，包括最大內(nèi)容繪制 (LCP)、首次輸入延遲 (FID) 和累積布局偏移 (CLS)。

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

• 更少的配置 - 基本使用所需的最少設(shè)置

• 具體指標重點 - 核心網(wǎng)絡(luò)生命力和關(guān)鍵時間

• 測試集成 - 自然適合現(xiàn)有測試流程該命令是可鏈接的，并返回所有收集到的要斷言的指標

• 重試功能 - 內(nèi)置可靠性機制，以確保收集指標

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

• 總字節(jié)數(shù) - 所有資源的大小

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

• 與 Lighthouse 一致的評分系統(tǒng)

• 最佳實踐的靜態(tài)分析

• 改進建議

• 各種條件下的性能模擬

• 超越性能的更廣泛指標

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

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

首先安裝插件：

npm install -D cypress-performance

添加到您的 cypress/support/e2e.js：

導入“柏樹性能”

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

{
  "compilerOptions": {
    "types": ["cypress", "cypress-performance"]
  }
}

現(xiàn)在您已準備好開始衡量性能！

用法

該插件公開了單個 Cypress 方法：

cy.performance()

cy.performance() 命令本身是可重試的，這意味著 Cypress 將重試該命令，直到：

• 獲取有效指標

• 達到重試超時

命令的默認選項：

MetricsOptions{
  startMark?: keyof PerformanceTiming // Default: 'navigationStart'
  endMark?: keyof PerformanceTiming // Default: 'loadEventEnd'
  timeout?: number // Timeout in milliseconds (default: 10000)
  initialDelay?: number // Initial delay in milliseconds (default: 1000)
  retryTimeout?: number // Retry timeout in milliseconds (default: 5000)
}

典型的測試如下所示：

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

最佳實踐

設(shè)置切合實際的閾值 設(shè)置性能閾值時請考慮您的用戶和應(yīng)用程序：LCP：

使用自定義標記對于單頁應(yīng)用程序或復雜的用戶流程，使用自定義性能標記來衡量特定的交互。

考慮環(huán)境變化請記住，CI 環(huán)境的性能可能與本地開發(fā)不同。相應(yīng)地調(diào)整閾值或使用相對比較。

與其他指標相結(jié)合將 cypress-performance 與 Lighthouse 等其他工具結(jié)合使用，以獲得完整的性能圖

結(jié)語

我的“cypress-performance”插件用于快速收集有價值且最重要的 Web 性能指標，并為您的 Cypress 測試套件帶來性能測試功能。通過關(guān)注真實的用戶指標并提供細粒度的控制，有助于確保您的應(yīng)用程序在實際使用條件下表現(xiàn)良好。

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

良好的性能不僅僅在于速度，還在于一致性和可靠性。借助“cypress-performance”，您可以確保您的應(yīng)用程序在整個開發(fā)生命周期中保持高性能標準。

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

以上是Cypress 性能插件'cypress-performance”：自動化 Web 性能測試指南的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！