Autotests di Cypress
Kesan pertama dan masalah yang dihadapi
Dmitry Kochergin, Pemimpin Pengembang Perangkat Lunak Luxoft
Pertama-tama, saya ingin mencatat bahwa saya bukan seorang autotester profesional, tetapi seorang programmer Java. Tetapi suatu hari tugas datang untuk membuat tes asap untuk verifikasi dasar dari fungsi utama aplikasi yang baru-baru ini rusak oleh perubahan dalam API layanan dependen tanpa peringatan.
Artikel ini akan menarik bagi semua orang yang tertarik dengan autotesting dari awal di JS, tetapi takut untuk bertanya.
Pertama-tama, saya belum pernah membaca apa pun tentang pengujian otomatis. Prasangka utamanya adalah autotests itu sulit, karena, menurut review, Anda dapat mengatur Selenium ... Plus, Anda perlu mempelajari XPath dan PageObject, yang tidak ingin Anda lakukan sama sekali.
Pencarian cepat di Internet memberikan alat yang lebih muda dan lebih menjanjikan: WebDriver.IO , Pupeteer (dan sekarang penulis naskah lebih baik) dan Cypress. Saya memilih yang terakhir, membeli janji-janji indah dan beberapa komentar dari holivar tentang alat terbaik untuk tes otomatis.
Seperti inilah tampilan jendela browser dari pengujian yang sedang berjalan. Di sebelah kiri adalah perintah dan status pengujian yang dijalankan, di sebelah kanan adalah tampilan aplikasi selama eksekusi pengujian:
Beginilah tampilan kode pengujian (di Cypress, semua kode ada di JS, dan penyeleksi adalah pemilih CSS biasa):
Saat runtime terlihat seperti ini:
Ketika saya sedang mencari alat untuk autotests - Saya memiliki gambaran di kepala saya bahwa tes dapat dibuat langsung di browser, sehingga saya cukup "mengklik entri skrip" - sistem mencatat tindakan saya (pemilih CSS dari elemen yang saya klik). Kemudian saya melihat tes yang dihasilkan, mengubah pemilih jika perlu, dan menyimpannya ke Test Suite. Eh ...
Kisah itu ternyata tidak tercapai saat itu dan saya tidak menemukan alat seperti itu (mungkin seseorang akan memberi tahu Anda dengan cara yang benar di komentar). Tetapi Cypress disuap oleh fakta bahwa pengujian dijalankan di browser nyata, dan Anda bahkan dapat menjelajahi DOM secara paralel dengan eksekusi pengujian dengan alat pengembang Chrome favorit Anda (jika, misalnya, pemilih tidak berfungsi, Anda dapat membuka konsol dan segera melihat alasannya saat pengujian dijalankan).
Dari parameter lain yang penting bagi saya, saya secara kritis tidak ingin menghabiskan banyak waktu baik untuk menulis (sekali lagi, tentang menulis tes di browser) atau mempertahankan tes. Ini sudah cukup untuk tujuan saya. Hanya untuk informasi tentang Cypress: perlu waktu 1 jam dari saat saya pertama kali membuka situs web Cypress hingga tes pertama yang masuk ke aplikasi.
Jadi Cypress, halaman pertama kerangka kerja memberi tahu kita bahwa ini adalah JavaScript End to End Testing Framework ( cypress.io ). Selanjutnya, kami dengan cepat membaca dokumentasinya, itu benar-benar lengkap, dan Anda dapat menemukan jawaban untuk hampir semua pertanyaan (Saya dengan cepat menemukan semua yang lain di StackOverflow):
Lebih jauh di sepanjang daftar fitur dari situs:
- Time travel – – , . , DOM, Chrome devtools.
- Real time reloads – JS , – (hot reload).
- Automatic waiting – , , Cypress . , .
- Network traffic control – Cypress / , .
- Tangkapan layar dan video - Cypress merekam video dari layar browser (MP4) selama pengujian, bersama dengan instruksi di jendela.
Semua hal ini, tentu saja, dapat dijalankan tanpa browser terbuka di CI, Chrome atau Electron tanpa head digunakan.
Tapi ada juga beberapa masalah.
Pada awalnya, saya tidak tahu bahwa saya bisa menunggu permintaan XHR ke server berakhir, dan memasukkan waktu tunggu sebagai gantinya, dan tes akan jatuh secara acak. Diperbaiki.
Kemudian Hot Reload bekerja setiap waktu, saya terus-menerus harus me-restart seluruh Cypress, karena saya tidak yakin apakah perubahan saya diterapkan. Ternyata di IDE saya (IntelliJ IDEA) ada kotak centang yang buruk, yang juga diaktifkan secara default, karena ternyata menyimpan file tidak menyimpan, tetapi akhirnya menyimpan.
Masalah berikutnya adalah bahwa aplikasi saya menggunakan pengambilan jendela untuk permintaan ke server, dan Cypress hanya melihat permintaan XHR. Peretasan kotor dari StackOverflow membantu (Saya memahami bahwa metode pengambilan dihapus dari jendela sehingga browser membuat fallback pada XHR alih-alih mengambil):
Selanjutnya, ada masalah dalam meniru browser seluler, itu tidak berhasil dalam kode pengujian agen pengguna, tetapi dalam file khusus yang terpisah - semuanya berhasil.
Kemudian masalah CORS terselesaikan:
Kemudian file diupload, tidak berhasil tiba-tiba, solusi standar tidak berfungsi, tetapi library cypress-file-upload membantu:
Satu-satunya masalah yang tidak bisa saya selesaikan adalah reproduktifitas tes. Yaitu, data awal yang stabil dan identik untuk menjalankan tes (perlengkapan), ini lebih merupakan tugas konfigurasi, bukan Cypress, tetapi masih belum terselesaikan.
Hasilnya, Cypress terlihat seperti alat yang hebat untuk memperkenalkan pengujian otomatis ke dalam sebuah proyek jika:
- Memiliki pengetahuan tentang JS
- Tidak perlu menguji di semua jenis browser sejak IE6 (Cypress saat ini mendukung Chrome, Chromium, Edge, Electron, Firefox). Berikut adalah pembahasan tentang topik tersebut . Tetapi saya dapat mengatakan bahwa setahun yang lalu ketika saya mulai bekerja dengan Cypress, itu hanya mendukung versi terbaru Chrome dan Electron untuk peluncuran tanpa UI.
- Ingin segera melakukan tes dan melupakannya sampai seseorang merusak aplikasi :)
Cypress: ambillah dan gunakan!