Cypress パフォーマンス プラグイン「cypress-performance」: Web パフォーマンス テストを自動化するためのガイド

導入

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

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

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

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

ここで確認できます:

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

主な特長

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

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

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

• 既存の Cypress テストとのシームレスな統合

• TypeScript サポートの型定義

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

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

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

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

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

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

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

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

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

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

• テストの統合 - 既存のテスト フローに自然に適合します。コマンドはチェーン可能であり、アサートされる収集されたすべてのメトリクスを返します

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

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

• 合計バイト数 - すべてのリソースのサイズ

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

• 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 テスト ランナーでの彼女の見た目は次のとおりです:

ベストプラクティス

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

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

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

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

エピローグ

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

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

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

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

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