Cypress Performance Plugin 'cypress-performance': Panduan untuk mengautomasikan Ujian Prestasi Web

pengenalan

Ini adalah siaran pertama saya di dev.to, jadi saya harap ia akan dialu-alukan

Idea untuk mencipta pemalam ini terlintas di fikiran saya semasa saya bergelut untuk mengukur prestasi UI web dan pemalam sedia ada tidak memberikan saya kefleksibelan yang saya perlukan. Pemalam "cypress-performance" memperkenalkan cara yang berkuasa untuk mengukur dan menegaskan metrik prestasi web secara langsung dalam ujian Cypress anda. Tidak seperti ujian hujung ke hujung tradisional yang memfokuskan pada fungsi, pemalam ini membolehkan pasukan menangkap regresi prestasi lebih awal dan mengekalkan piawaian prestasi tinggi melalui ujian automatik.

Ujian prestasi web telah menjadi penting hari ini. Pengguna mengharapkan pengalaman sepantas kilat dan halaman yang dimuatkan dengan perlahan boleh memberi kesan yang ketara kepada metrik perniagaan. Walaupun Cypress ialah alat yang sangat baik untuk ujian hujung ke hujung, ia tidak mempunyai keupayaan pengukuran prestasi terbina dalam.

Hari ini, saya teruja untuk memperkenalkan "cypress-performance", pemalam baharu yang membawa keupayaan pengukuran prestasi kepada ujian Cypress anda.

Anda boleh menyemaknya di sini:

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

Ciri-ciri Utama

• Pengumpulan metrik prestasi masa nyata semasa pelaksanaan ujian

• Mekanisme cuba semula terbina dalam untuk pengukuran yang boleh dipercayai

• Sokongan untuk Core Web Vitals dan penunjuk prestasi utama yang lain

• Penyatuan lancar dengan ujian Cypress sedia ada

• Takrifan jenis untuk sokongan TypeScript

• Ambang boleh dikonfigurasikan dan pilihan masa

Mengapa Pemalam Ujian Prestasi Lain?

Anda mungkin tertanya-tanya, "Bukankah kita sudah mempunyai "@cypress-audit/lighthouse"?" Ya, kami lakukan, dan ia adalah alat yang sangat baik. Walau bagaimanapun, "prestasi cypress" mengambil pendekatan berbeza:

• Metrik Pengguna Sebenar: Walaupun Rumah Api mensimulasikan prestasi dalam keadaan tertentu, prestasi cypress menangkap metrik semasa pelaksanaan ujian sebenar, memberikan anda cerapan tentang senario pengguna sebenar.

• Integrasi Ujian: Pemalam disepadukan dengan lancar dengan ujian sedia ada anda, membolehkan anda mengukur prestasi semasa melaksanakan aliran ujian biasa anda, bukan sebagai audit berasingan.

• Kawalan Berbutir: Anda mendapat kawalan terperinci tentang masa dan cara mengukur prestasi, dengan mekanisme cuba semula terbina dalam untuk hasil yang boleh dipercayai.

• Vit Web Teras: Fokus pada metrik prestasi moden yang penting, termasuk Cat Kandungan Terbesar (LCP), Kelewatan Input Pertama (FID) dan Anjakan Reka Letak Kumulatif (CLS).

• Overhed lebih rendah - tidak perlu larian Rumah Api yang berasingan

• Kurang konfigurasi - persediaan minimum diperlukan untuk penggunaan asas

• Fokus metrik khusus - Vitals Web Teras dan pemasaan utama

• Integrasi ujian - kesesuaian semula jadi dalam aliran ujian sedia ada arahan boleh dirantai dan mengembalikan semua metrik yang dikumpul untuk ditegaskan

• Keupayaan cuba semula - mekanisme kebolehpercayaan terbina dalam untuk memastikan metrik dikumpulkan

• Masa sumber - metrik peringkat sumber terperinci

• Jumlah bait - saiz semua sumber

Di sisi lain - @cypress-audit/lighthouse menyediakan kami
Audit menyeluruh termasuk SEO, kebolehaksesan

• Sistem pemarkahan sejajar dengan Rumah Api

• Analisis statik amalan terbaik

• Cadangan untuk penambahbaikan

• Simulasi prestasi dalam pelbagai keadaan

• Metrik yang lebih luas melangkaui prestasi sahaja

Jadi apakah itu dan bagaimana untuk menggunakannya?

Ini ialah pemalam Cypress kendiri dengan 0 kebergantungan luaran.

Mula-mula, pasang pemalam:

npm pasang -D cypress-prestasi

Tambahkan pada cypress/support/e2e.js anda:

import 'cypress-performance'

Untuk pengguna TypeScript, masukkan jenis dalam tsconfig.json:

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

Kini anda sudah bersedia untuk mula mengukur prestasi!

Penggunaan

Pemalam mendedahkan kaedah Cypress tunggal:

cy.performance()

Arahan cy.performance() itu sendiri boleh dicuba semula, bermakna Cypress akan mencuba semula arahan itu sehingga sama ada:

• Mendapat metrik yang sah

• Mencapai tamat masa cuba semula

Pilihan lalai untuk arahan:

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

Ujian biasa akan kelihatan seperti ini:

Dan dia seperti itu akan kelihatan dalam pelari ujian Cypress:

Amalan Terbaik

Tetapkan Ambang Realistik Pertimbangkan pengguna dan aplikasi anda apabila menetapkan ambang prestasi: LCP: < 2.5s (baik), < 4s (memerlukan penambahbaikan) CLS: < 0.1 (baik), < 0.25 (memerlukan penambahbaikan) TBT: < 300ms (baik), < 600ms (memerlukan penambahbaikan)

Gunakan Tanda Tersuai Untuk aplikasi satu halaman atau aliran pengguna yang kompleks, gunakan tanda prestasi tersuai untuk mengukur interaksi tertentu.

Pertimbangkan Variasi Persekitaran Ingat bahawa persekitaran CI mungkin berprestasi berbeza daripada pembangunan tempatan. Laraskan ambang sewajarnya atau gunakan perbandingan relatif.

Gabungkan dengan Metrik Lain Gunakan prestasi cypress bersama alatan lain seperti Rumah Api untuk gambar prestasi yang lengkap

Epilog

Pemalam "cypress-performance" saya berfungsi untuk pengumpulan metrik prestasi web yang bernilai dan paling penting dengan pantas dan membawa keupayaan ujian prestasi ke suite ujian Cypress anda. Dengan memfokuskan pada metrik pengguna sebenar dan menyediakan kawalan terperinci, ia membantu memastikan aplikasi anda berprestasi baik di bawah keadaan penggunaan sebenar.

Sama ada anda memantau Core Web Vitals, mengukur interaksi pengguna tertentu atau memastikan pemuatan sumber lancar, "cypress-performance" menyediakan alatan yang anda perlukan untuk menangkap regresi prestasi sebelum ia mencapai pengeluaran.

Prestasi yang baik bukan hanya tentang kelajuan—ia tentang konsistensi dan kebolehpercayaan. Dengan "prestasi cypress", anda boleh memastikan aplikasi anda mengekalkan piawaian berprestasi tinggi sepanjang kitaran hayat pembangunannya.

Cuba dalam projek anda dan beritahu saya cara ia berfungsi untuk anda! Pemalam ini adalah sumber terbuka dan saya mengalu-alukan semua sumbangan dan maklum balas.

Atas ialah kandungan terperinci Cypress Performance Plugin 'cypress-performance': Panduan untuk mengautomasikan Ujian Prestasi Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!