Belajar Cypress - CI/CD Integration

#Pendahuluan

Test yang hanya berjalan di mesin lokal tidak melindungi apa pun. Episode 14 membawa Cypress ke pipeline: integrasi dengan GitHub Actions, GitLab CI, dan Jenkins, perbedaan headless dan headed, upload artefak video dan screenshots, serta paralelisasi dan penanganan flaky test.

Pada akhir episode ini, suite kalian berjalan di setiap commit — dan hasilnya bisa dibaca seluruh tim.

#Headless Mode vs Headed Runs

#Menjalankan Tanpa UI

Di CI tidak ada layar, jadi Cypress berjalan dalam mode headless — browser berjalan tanpa jendela:

npx cypress run

npx cypress run menjalankan seluruh spec tanpa membuka UI. Berbeda dengan cypress open yang interaktif, mode run menghasilkan laporan dan keluar dengan kode status: 0 saat sukses, 1 saat ada kegagalan — kode inilah yang dipakai CI untuk menandai build gagal.

#Memilih Browser

npx cypress run --browser firefox

--browser firefox memilih browser yang dipakai. Untuk suite multi-browser, jalankan perintah yang sama dengan browser berbeda pada job CI yang terpisah.

#Integrasi dengan GitHub Actions, GitLab CI, dan Jenkins

#GitHub Actions

GitHub Actions memakai workflow file YAML:

name: E2E
on: [push, pull_request]
 
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx cypress run

runs-on: ubuntu-latest menentukan mesin runner. Langkah npx cypress run menjalankan suite dan menentukan sukses atau gagalnya job.

#GitLab CI dan Jenkins

GitLab memakai .gitlab-ci.yml dengan job serupa, sementara Jenkins dikonfigurasi lewat pipeline file atau UI. Intinya sama: checkout kode, install dependency, lalu jalankan Cypress. Gunakan image Node yang sesuai dan simpan cache ~/.cache/Cypress agar instalasi binary tidak berulang di setiap run.

#Upload Artifacts, Video, dan Screenshots

#Menyimpan Artefak Saat Gagal

Video dan screenshots hanya berguna jika tim bisa mengaksesnya. Aktifkan upload artefak di CI:

- run: npx cypress run
- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: cypress-artifacts
    path: cypress/screenshots

if: failure() memastikan artefak hanya diupload saat job gagal. path: cypress/screenshots menentukan folder yang diambil. Artefak ini menjadi bukti pertama saat menyelidiki kegagalan.

#Menghemat Ruang

Simpan video hanya untuk run yang gagal agar storage CI tidak membengkak:

Video hanya saat gagal

module.exports = defineConfig({
  e2e: {
    video: process.env.CI ? true : false,
  },
});

video: process.env.CI ? true : false mengaktifkan video hanya di CI. Di lokal, video dinonaktifkan agar run lebih cepat dan ringan.

#Parallelization dan Flaky Test Handling

#Memecah Suite ke Beberapa Runner

Suite yang besar bisa dipecah secara paralel. Dengan Cypress Dashboard, gunakan load balancing otomatis:

npx cypress run --record --parallel

--record --parallel mengirim run ke Dashboard yang membagi spec ke banyak runner. Load balancing menyeimbangkan beban agar setiap runner selesai bersamaan.

#Menangani Flaky Test

Meski sudah dioptimalkan, flakiness tetap bisa muncul di CI. Kombinasikan retries bawaan dengan isolasi yang benar:

Retries di konfigurasi

module.exports = defineConfig({
  e2e: {
    retries: {
      runMode: 2,
      openMode: 0,
    },
  },
});

retries.runMode: 2 mengulang test yang gagal dua kali saat cypress run. openMode: 0 menjaga mode interaktif tanpa retry agar debugging lokal tidak menyesatkan. Retry bukan obat semua — tetap selidiki akar flakiness di episode 19.

#Penutup

Episode 14 menyambungkan Cypress ke pipeline: headless mode untuk CI, integrasi GitHub Actions, GitLab CI, dan Jenkins, upload artefak video dan screenshots, serta paralelisasi dengan load balancing dan retries yang terkendali.

Inti yang harus dibawa pulang:

• cypress run berjalan headless dan mengembalikan kode status untuk CI.
• Workflow CI: checkout, install dependency, lalu jalankan Cypress.
• Upload artefak dengan kondisi failure() untuk debugging.
• Gunakan --record --parallel dengan Dashboard untuk paralelisasi.
• Retries di runMode menangani flakiness, bukan menyembunyikan akar masalah.

Di episode 15 selanjutnya kita akan membahas performance optimization — mempercepat eksekusi dengan component testing dan parallel runs, meminimalkan page loads dan setup redundan, selective test execution dan grouping, serta caching dan fitur plugin.