Mengatasi issue memory leak dan penggunaan numTestKeptInMemory pada Cypress

Cypress version: ^13.8.1,

Beberapa hari lalu aku dapet task buat e2e test untuk fitur existing. dimana fitur tersebut memiliki 9 step form, pada masing-masing step berisi setidaknya lebih dari 5–10+ field, mulai dari text input, upload file, calculation dsbnya.

singkat cerita, proses pembuat skenario dan test case untuk step 1–4 semua berjalan lancar tanpa masalah.

namun ketika melanjutkan testing untuk step 5–9, mulai muncul issue performance dimana proses e2e test berjalan lambat bahkan crash, sehingga proses testing tidak dapat dilanjutkan dan terhenti pada skenario step — 6.

gambar 1.0

beberapa issue yg sudah ada, dan beberapa lainnya terkait testing yg crash disebabkan oleh memori leak ketika proses testing menggunakan cypress.

https://github.com/cypress-io/cypress/issues/4164

gambar 1.1

Apa itu memory leak ?

Adalah kondisi komputer tidak bisa melepaskan penyimpanan yg tidak lagi digunakan. sehingga memori yg seharusnya bisa untuk alokasi aplikasi atau proses lain jadi terpakai, sehingga ga bisa digunain. jadi lama kelamaan akan menyebabkan penurunan pada performa bahkan bisa sampai crash.

Cara mengatasinya ?

Pada gambar 1.1 kita sudah diberi suggestion beberapa cara buat solving masalah tersebut, namun yg ingin aku garis bawahi dibagian “numTestKeptInMemory”

kenapa bagian ini ?

karena jika kita refer based on documentation di jelaskan bahwa

gambar 1.2

numTestKeptInMemory berfungsi sebagai konfigurasi yg digunakan untuk menyimpan testing snapshots dan command data agar tetap dalam memori dan tidak unmount ketika testing selesai. untuk nilainya sendiri by default adalah 50 ketika kita menjalankan cypress menggunakan GUI Mode atau cypress open, sedangkan pada headless mode by default adalah 0, yg artinya pada mode tersebut sama sekali tidak akan di simpan ke dalam memori melainkan akan di unmount ketika proses testing selesai.

Mengubah nilai numTestKeptInMemory = 0

cypress.config.ts

ketika aku coba reduce nilai numTestKeptInMemory menjadi 0, testing yg sebelumnya crash karena issue memory leak sudah berhasil teratasi. bahkan untuk proses testing dengan berbagai test case dan scenario yg lumayan banyak dapat di jalan dengan lancar dengan performa cukup cepat dari sebelumnya.

Apa tujuan dan fungsi dari numTestKeptInMemory ?

setelah aku telusuri, aku bisa menyimpulkan bahwa fungsi konfigurasi numTestKeptInMemory tujuannya untuk keperluan debugging, karena ketika data testing tersebut disimpan maka akan menjadi sebuah log / histories yg bisa kita manfaatkan dalam proses development.

udah ada gambaran ? kalau belum.

dibawah ini aku coba attach dan jelasin kenapa data testing yg disimpan kedalam memori itu akan sangat berguna ketika proses debugging maupun development.

numTestKeptInMemory ≠ 0 ?

gambar 1.3

pada gambar di atas bisa kita perhatikan bagian informasi pada kotak merah kiri di klik, maka kita bakal di arahin ke component terkait berupa snapshots yg telah disimpan pada memori, sehingga kita bakal lebih mudah mengetahui apa yg sebenarnya terjadi ketika kode testing yg kita buat di jalankan atau di eksekusi.

numTestKeptInMemory = 0 ?

gambar 1.4

kalau sebelumnya kita bakal dapet snapshots pada layar, setiap mengklik baris informasi di sebelah kiri.

beda halnya jika kita mengubah value numTestKeptInMemory menjadi 0, karena cypress tidak menyimpan data snapshots ke dalam memori.

sehingga jika kita coba inspect informasi tersebut, ga bakalan muncul pada UI . (lihat perbedaannya pada gambar 1.3.) dan akan muncul alert dengan tulisan The Snapshot is Missing, yang intinya snapshot tersebut tidak tersedia.

Kesimpulan

penting untuk kita tahu kapan waktu yg tepat menggunakan fitur tersebut sesuai kebutuhan. jika kita memang membutuhkan data snapshot untuk debugging e2e yg kita buat, dengan test case yg panjang dan khawatir jika terjadi memori leak.

kita bisa memanfaatkan fitur “.only” dengan menambahkannya setelah describe atau test

contohnya:

describe("scenario 1", () => {
	test("test case 1", () => /* write your test case */),
	test("test case 2", () => /* write your test case */),
	test("test case 3", () => /* write your test case */),
	test("test case 4", () => /* write your test case */),
})

describe.only("your scenario 2", () => {
 test("test case 1", () => /* write your test case */),
 test("test case 2", () => /* write your test case */),
 test.only("test case 3", () => /* write your test case */),
 test("test case 4", () => /* write your test case */),
})

// hanya menjalankan testing untuk scenario 2 dengan test case 3.

ini akan membuat proses test scenario dan test case menjadi lebih spesifik yg artinya cypress hanya akan meng eksekusi kode untuk testing tertentu, sehingga dapat mereduce penggunaan memori berlebih ketika test tersebut dijalankan.

atau kalau kita cuma fokus pada result dari testingnya, aku rasa ga perlu buat ngaktifin numTestKeptInMemory dan bisa di set jadi 0, atau bisa running mode headless di cypress.

semoga tulisan ini bermanfaat, mohon kritik dan saran.

terimakasih sudah membaca :)