導(dǎo)入

これは dev.to への最初の投稿ですので、歓迎されることを願(yuàn)っています

このプラグインを作成するというアイデアは、Web UI のパフォーマンスを測定するのに苦労していて、既存のプラグインでは必要な柔軟性が得られなかったときに思いつきました。 「cypress-performance」プラグインは、Cypress テストで Web パフォーマンス メトリクスを直接測定してアサートする強(qiáng)力な方法を?qū)毪筏蓼埂C(jī)能に焦點(diǎn)を當(dāng)てた従來のエンドツーエンドのテストとは異なり、このプラグインを使用すると、チームはパフォーマンスの低下を早期に発見し、自動(dòng)テストを通じて高いパフォーマンスの標(biāo)準(zhǔn)を維持できます。

今日、Web パフォーマンス テストは非常に重要になっています。ユーザーは超高速のエクスペリエンスを期待しており、ページの読み込みが遅いとビジネス指標(biāo)に大きな影響を與える可能性があります。 Cypress はエンドツーエンドのテストには優(yōu)れたツールですが、組み込みのパフォーマンス測定機(jī)能がありません。

今日は、Cypress テストにパフォーマンス測定機(jī)能をもたらす新しいプラグインである「cypress-performance」を紹介できることを嬉しく思います。

ここで確認(rèn)できます:

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

主な特長

• テスト実行中のリアルタイムのパフォーマンス指標(biāo)収集

• 信頼性の高い測定を?qū)g現(xiàn)する組み込みの再試行メカニズム

• Core Web Vitals およびその他の主要業(yè)績評価指標(biāo)のサポート

• 既存の Cypress テストとのシームレスな統(tǒng)合

• TypeScript サポートの型定義

• 構(gòu)成可能なしきい値とタイミング オプション

別のパフォーマンス テスト プラグインを使用する理由

「すでに「@cypress-audit/lighthouse」があるのではないか?」と疑問に思われるかもしれません。はい、そうです。これは優(yōu)れたツールです。ただし、「cypress-パフォーマンス」は別のアプローチをとります:

• 実際のユーザー メトリクス: Lighthouse は特定の條件下でパフォーマンスをシミュレートしますが、cypress パフォーマンスは実際のテスト実行中にメトリクスをキャプチャし、実際のユーザー シナリオについての洞察を提供します。

• テストの統(tǒng)合: プラグインは既存のテストとシームレスに統(tǒng)合され、個(gè)別の監(jiān)査としてではなく、通常のテスト フローを?qū)g行しながらパフォーマンスを測定できます。

• 粒度の高い制御: 信頼性の高い結(jié)果を得るために組み込まれた再試行メカニズムにより、いつ、どのようにパフォーマンスを測定するかをきめ細(xì)かく制御できます。

• コア Web バイタル: 最大コンテンツフル ペイント (LCP)、初回入力遅延 (FID)、累積レイアウト シフト (CLS) など、重要な最新のパフォーマンス指標(biāo)に焦點(diǎn)を當(dāng)てます。

• オーバーヘッドの削減 - Lighthouse を個(gè)別に実行する必要はありません

• 構(gòu)成が少ない - 基本的な使用に必要な最小限のセットアップ

• 特定の指標(biāo)に焦點(diǎn)を當(dāng)てる - コア Web バイタルと重要なタイミング

• テストの統(tǒng)合 - 既存のテスト フローに自然に適合します。コマンドはチェーン可能であり、アサートされる?yún)Ъ丹欷郡工伽皮违幞去辚工蚍丹筏蓼?/p>

• 再試行機(jī)能 - メトリクスが確実に収集されるようにするための組み込みの信頼性メカニズム

• リソースのタイミング - 詳細(xì)なリソースレベルのメトリクス

• 合計(jì)バイト數(shù) - すべてのリソースのサイズ

反対側(cè) - @cypress-audit/lighthouse が提供します
SEO、アクセシビリティを含む包括的な監(jiān)査

• Lighthouse と連攜したスコアリングシステム

• ベストプラクティスの靜的分析

• 改善のための推奨事項(xiàng)

• さまざまな條件での性能シミュレーション

• パフォーマンスだけを超えた広範(fàn)な指標(biāo)

それで、それは何ですか、そしてそれをどのように使用するのでしょうか？

これは、外部依存関係がないスタンドアロンの Cypress プラグインです。

まず、プラグインをインストールします:

npm install -D cypress-パフォーマンス

cypress/support/e2e.js に次の內(nèi)容を追加します:

'cypress-パフォーマンス' をインポート

TypeScript ユーザーの場合は、tsconfig.json に型を含めます:

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

これで、パフォーマンスの測定を開始する準(zhǔn)備が整いました!

使用法

プラグインは単一の Cypress メソッドを公開します:

cy.パフォーマンス()

cy.performance() コマンド自體は再試行可能です。つまり、Cypress は次のいずれかになるまでコマンドを再試行します。

• 有効なメトリクスを取得します

• retryTimeout に達(dá)しました

コマンドのデフォルトオプション:

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)
}

典型的なテストは次のようになります:

そして、Cypress テスト ランナーでの彼女の見た目は次のとおりです:

ベストプラクティス

現(xiàn)実的なしきい値を設(shè)定する パフォーマンスしきい値を設(shè)定するときは、ユーザーとアプリケーションを考慮してください。 LCP: < 2.5 秒 (良好)、

カスタム マークを使用する シングルページ アプリケーションまたは複雑なユーザー フローの場合、カスタム パフォーマンス マークを使用して特定のインタラクションを測定します。

環(huán)境の変動(dòng)を考慮する CI 環(huán)境のパフォーマンスはローカル開発とは異なる可能性があることに注意してください。それに応じてしきい値を調(diào)整するか、相対比較を使用します。

他のメトリクスと組み合わせる Lighthouse などの他のツールと cypress-performance を併用して、パフォーマンスの全體像を把握します

エピローグ

私の「cypress-performance」プラグインは、貴重かつ最も重要な Web パフォーマンス メトリクスを迅速に収集するために機(jī)能し、Cypress テスト スイートにパフォーマンス テスト機(jī)能をもたらします。実際のユーザー指標(biāo)に焦點(diǎn)を當(dāng)て、きめ細(xì)かい制御を提供することで、実際の使用條件下でアプリケーションが適切にパフォーマンスすることを保証します。

Core Web Vitals の監(jiān)視、特定のユーザー インタラクションの測定、スムーズなリソース読み込みの確保のいずれの場合でも、「cypress-パフォーマンス」は、パフォーマンスの低下が本番環(huán)境に到達(dá)する前に検出するために必要なツールを提供します。

優(yōu)れたパフォーマンスは速度だけではなく、一貫性と信頼性も重要です。 「cypress-パフォーマンス」を使用すると、アプリケーションが開発ライフサイクル全體を通じて高いパフォーマンス標(biāo)準(zhǔn)を維持できるようになります。

あなたのプロジェクトで試してみて、どのように機(jī)能するか教えてください。このプラグインはオープンソースであり、すべての貢獻(xiàn)とフィードバックを歓迎します。

以上がCypress パフォーマンス プラグイン「cypress-performance」: Web パフォーマンス テストを自動(dòng)化するためのガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。