導入

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

このプラグインを作成するというアイデアは、Web UI のパフォーマンスを測定するのに苦労していて、既存のプラグインでは必要な柔軟性が得られなかったときに思いつきました。 「cypress-performance」プラグインは、Cypress テストで Web パフォーマンス メトリクスを直接測定してアサートする強力な方法を導入します。機能に焦點を當てた従來のエンドツーエンドのテストとは異なり、このプラグインを使用すると、チームはパフォーマンスの低下を早期に発見し、自動テストを通じて高いパフォーマンスの標準を維持できます。

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

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

ここで確認できます:

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

主な特長

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

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

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

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

• TypeScript サポートの型定義

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

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

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

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

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

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

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

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

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

• 特定の指標に焦點を當てる - コア Web バイタルと重要なタイミング

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

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

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

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

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

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

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

• 改善のための推奨事項

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

• パフォーマンスだけを超えた広範な指標

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

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

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

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

cypress/support/e2e.js に次の內容を追加します:

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

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

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

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

使用法

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

cy.パフォーマンス()

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

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

• retryTimeout に達しました

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

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)実的なしきい値を設定する パフォーマンスしきい値を設定するときは、ユーザーとアプリケーションを考慮してください。 LCP: < 2.5 秒 (良好)、

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

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

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

エピローグ

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

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

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

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

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