Belajar Cypress - Performance Optimization

#Pendahuluan

Suite yang lambat sama berbahayanya dengan suite yang flaky — tim berhenti menjalankannya. Episode 15 membahas strategi mempercepat test: component testing dan parallel runs, meminimalkan page loads, selective execution dan grouping, serta caching dan plugin untuk mempercepat alur.

Tujuan akhirnya bukan kecepatan demi kecepatan, melainkan feedback loop yang cukup cepat sehingga test dijalankan sesering mungkin.

#Mempercepat Eksekusi dengan Component Testing dan Parallel Runs

#Component Testing untuk Loop Cepat

Kembali ke episode 9: component testing jauh lebih cepat daripada E2E karena tidak memuat seluruh aplikasi. Pisahkan pengujian detail komponen dari E2E:

npx cypress run --component
npx cypress run --e2e

npx cypress run --component menjalankan spec komponen saja — biasanya dalam hitungan detik. --e2e menangani skenario penuh. Menjalankan keduanya terpisah memungkinkan CI memblokir lebih dini: kesalahan komponen terdeteksi sebelum E2E yang mahal.

#Parallel Runs

Untuk E2E yang tetap besar, gunakan paralelisasi dari episode 14. Tambahkan dua runner atau lebih dengan beban yang dibagi:

npx cypress run --record --parallel --ci-build-id 20260810-1

--ci-build-id menandai sekelompok runner sebagai satu build yang sama. Dashboard lalu membagi spec secara dinamis agar beban merata.

#Meminimalkan Page Loads dan Setup Redundan

#Satu Kunjungan, Banyak Assertion

Setiap cy.visit() memuat ulang halaman — mahal. Jika beberapa test memakai state yang sama, kelompokkan dalam satu describe dengan before:

Menghindari visit berulang

before(() => {
  cy.visit("/dashboard");
});
 
it("menampilkan grafik", () => {
  cy.get("[data-cy=grafik]").should("be.visible");
});
 
it("menampilkan ringkasan", () => {
  cy.get("[data-cy=ringkasan]").should("be.visible");
});

before(() => { cy.visit("/dashboard"); }) memuat halaman sekali untuk seluruh blok. Kedua test memakai DOM yang sama — hemat waktu tanpa mengorbankan kejelasan.

#Gunakan cy.session untuk Login

Login lewat UI di setiap test sangat mahal. cy.session() dari episode 10 menyimpan sesi sehingga login hanya terjadi sekali:

Sesi login sekali untuk banyak test

beforeEach(() => {
  cy.session("admin", () => {
    cy.login("admin@example.com", "rahasia123");
  });
});

cy.session("admin", ...) membuat login berjalan sekali lalu memakai ulang untuk test berikutnya. Untuk suite login-heavy, penghematannya signifikan.

#Selective Test Execution dan Grouping

#Memilih Spec Berdasarkan Perubahan

Jangan selalu menjalankan seluruh suite. Selektif berdasarkan bagian yang berubah:

npx cypress run --spec "cypress/e2e/auth/**/*.cy.js"

--spec "cypress/e2e/auth/**/*.cy.js" menjalankan hanya spec folder auth. Pola ini dipakai di CI saat perubahan hanya menyentuh modul tertentu — disebut pipeline dengan test yang dipilih berdasarkan diff.

#Grouping di Dashboard

Gunakan --group untuk menandai kelompok test di Dashboard:

npx cypress run --record --group "smoke"

--group "smoke" melabeli run sebagai smoke test. Dengan label, tim bisa membedakan suite cepat untuk setiap commit dan suite penuh untuk rilis.

#Caching dan Fitur Plugin

#Cache Dependency dan Binary

Instalasi Cypress di CI memakan waktu. Simpan cache:

- uses: actions/cache@v4
  with:
    path: ~/.cache/Cypress
    key: ${{ runner.os }}-cypress-${{ hashFiles('bun.lock') }}

path: ~/.cache/Cypress menandai folder cache binary. Dengan cache, install turun dari beberapa menit menjadi hitungan detik. Lakukan hal yang sama untuk node_modules dengan package manager kalian.

#Plugin untuk Optimasi

Beberapa plugin membantu eksekusi lebih cepat: cypress-failed-log mempercepat diagnosis, sementara konfigurasi experimentalModifyObstructiveThirdPartyCode dan penghentian request yang tidak perlu bisa memangkas waktu. Ingat: optimasi terbaik adalah menghapus test yang tidak bernilai.

#Penutup

Episode 15 mengubah suite dari lambat menjadi responsif: component testing untuk loop cepat, parallel runs dengan load balancing, mengurangi page loads dan setup redundan dengan before dan cy.session(), selective execution dengan --spec dan --group, serta caching dependency dan binary di CI.

Inti yang harus dibawa pulang:

• Jalankan component testing dan E2E sebagai lapis terpisah.
• cy.session() dan before mengurangi kunjungan halaman berulang.
• Gunakan --spec untuk menjalankan test sesuai bagian yang berubah.
• Cache ~/.cache/Cypress dan node_modules di CI.
• Kecepatan terbaik berasal dari test yang tepat, bukan hanya test yang cepat.

Di episode 16 selanjutnya kita akan membahas visual testing dan regression — integrasi dengan Percy dan Applitools, baseline screenshots dan visual diff, mendeteksi layout regressions dan UI drift, serta best practices visual regression.