介紹

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

當(dāng)我努力測(cè)量 Web UI 效能並且現(xiàn)有插件無(wú)法為我提供所需的靈活性時(shí)，我想到了創(chuàng)建這個(gè)插件的想法。 「cypress-performance」外掛程式引入了一種強(qiáng)大的方法來(lái)直接在 Cypress 測(cè)試中測(cè)量和斷言 Web 效能指標(biāo)。與注重功能的傳統(tǒng)端到端測(cè)試不同，該插件使團(tuán)隊(duì)能夠及早發(fā)現(xiàn)效能回歸，並透過自動(dòng)化測(cè)試保持高效能標(biāo)準(zhǔn)。

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

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

你可以在這裡查看：

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

主要特點(diǎn)

• 測(cè)試執(zhí)行期間的即時(shí)效能指標(biāo)收集

• 內(nèi)建重試機(jī)制，實(shí)現(xiàn)可靠測(cè)量

• 支援 Core Web Vitals 和其他關(guān)鍵績(jī)效指標(biāo)

• 與現(xiàn)有賽普拉斯測(cè)驗(yàn)無(wú)縫整合

• TypeScript 支援的型別定義

• 可設(shè)定的閾值和計(jì)時(shí)選項(xiàng)

為什麼需要另一個(gè)效能測(cè)試插件？

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

• 真實(shí)使用者指標(biāo)：Lighthouse 模擬特定條件下的效能，而 cypress-performance 則在實(shí)際測(cè)試執(zhí)行期間擷取指標(biāo)，讓您深入了解真實(shí)使用者場(chǎng)景。

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

• 精細(xì)控制：您可以對(duì)何時(shí)以及如何衡量性能進(jìn)行精細(xì)控制，並透過內(nèi)建重試機(jī)制獲得可靠的結(jié)果。

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

• 較低的開銷 - 無(wú)需單獨(dú)運(yùn)行燈塔

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

• 具體指標(biāo)重點(diǎn) - 核心網(wǎng)路生命力與關(guān)鍵時(shí)間

• 測(cè)試整合 - 自然適合現(xiàn)有測(cè)試流程該命令是可連結(jié)的，並傳回所有收集到的要斷言的指標(biāo)

• 重試功能 - 內(nèi)建可靠性機(jī)制，以確保收集指標(biāo)

• 資源計(jì)時(shí) - 詳細(xì)的資源等級(jí)指標(biāo)

• 總位元組數(shù) - 所有資源的大小

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

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

• 最佳實(shí)務(wù)的靜態(tài)分析

• 改進(jìn)建議

• 各種條件下的效能模擬

• 超越表現(xiàn)的更廣泛指標(biāo)

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

這是一個(gè)獨(dú)立的 Cypress 插件，具有 0 個(gè)外部相依性。

先安裝外掛：

npm install -D cypress-performance

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

導(dǎo)入「柏樹效能」

對(duì)於 TypeScript 用戶，請(qǐng)?jiān)?tsconfig.json 中包含類型：

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

用法

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

cy.performance()

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

• 取得有效指標(biāo)

• 達(dá)到重試超時(shí)

指令的預(yù)設(shè)選項(xiàng)：

典型的檢定如下：

她喜歡在賽普拉斯測(cè)試運(yùn)行器中看到的樣子：

最佳實(shí)踐

設(shè)定切合實(shí)際的閾值設(shè)定效能閾值時(shí)請(qǐng)考慮您的使用者和應(yīng)用程式：LCP：

使用自訂標(biāo)記對(duì)於單頁(yè)應(yīng)用程式或複雜的使用者流程，使用自訂效能標(biāo)記來(lái)衡量特定的交互作用。

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

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

結(jié)語(yǔ)

我的「cypress-performance」外掛程式用於快速收集有價(jià)值且最重要的 Web 效能指標(biāo)，並為您的 Cypress 測(cè)試套件帶來(lái)效能測(cè)試功能。透過專注於真實(shí)的用戶指標(biāo)並提供細(xì)粒度的控制，有助於確保您的應(yīng)用程式在實(shí)際使用條件下表現(xiàn)良好。

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

良好的效能不僅在於速度，還在於一致性和可靠性。透過“cypress-performance”，您可以確保您的應(yīng)用程式在整個(gè)開發(fā)生命週期中保持高效能標(biāo)準(zhǔn)。

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

以上是Cypress 效能外掛程式「cypress-performance」：自動(dòng)化 Web 效能測(cè)試指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！