Otomatisasi Cypress: 15 Faktor Penting Terkait Ini

Dalam tutorial ini, kita akan membahas Kerangka Otomasi Cypress secara rinci. Kami akan membahas apa itu Cypress, perbedaannya dengan framework pengujian lainnya, arsitektur Cypress, dan prosedur instalasi di artikel ini. Cypress adalah topik yang menarik dan juga menyenangkan untuk dipelajari. Mari kita mulai!

Kerangka Otomatisasi Cypress

Cypress Automation Framework adalah alat pengujian berbasis Javascript murni yang terutama berfokus pada pengujian front-end dalam aplikasi web modern. Dengan Cypress, aplikasi mudah diuji dengan antarmuka visual untuk menyaksikan eksekusi pengujian. Dengan demikian, Cypress hadir sebagai keuntungan bagi pengembang dan insinyur QA dengan membuat penulisan skrip dan eksekusi pengujian menjadi mudah. Selain itu, ia hadir dengan test runner yang khas, yang membuat manipulasi DOM menjadi mudah dan berjalan langsung di Browser.

Daftar Isi

Apa itu Cypress?

Cypress lebih cepat, lebih baik, dan menyediakan pengujian definitif yang berjalan di browser. Cypress terutama dibandingkan dengan Selenium, tetapi sangat berbeda. Cypress tidak berjalan di atas Selenium, yang berarti sepenuhnya independen. Sebagai gantinya, Cypress berjalan di atas Mocha, yang lagi-lagi merupakan kerangka pengujian yang kaya akan Javascript. Ini hanya kompatibel dengan Perpustakaan Pernyataan Chai, yang dapat mengakses berbagai pernyataan BDD dan TDD.

Cypress terutama berfokus pada tiga jenis pengujian yang berbeda. Mereka adalah tes End-to-End, tes Unit, dan tes Integrasi. Cypress dapat menjalankan tes apa pun yang dapat dijalankan di browser. Selain itu, ia hadir dengan berbagai kemampuan mengejek dan validasi yang tertarik pada pengujian front-end.

Peramban yang didukung Cypress adalah Chrome, Firefox, Edge, Electron, dan Brave. Selain itu, pengujian lintas-browser mudah dicapai dengan Cypress. Akhirnya, meskipun Cypress hanya mendukung Javascript, ia juga dapat ditulis dengan TypeScript, terutama ditulis dengan Javascript.

Otomatisasi Cypress

Cypress adalah alat open-source dengan Test runner gratis tetapi memiliki rentang harga untuk tim dan bisnis di mana mereka menagih Anda untuk Dasbor. Namun, Dasbor gratis sampai batas tertentu, kecuali Anda memiliki fitur tambahan seperti Deteksi serpihan, dukungan Email, integrasi Jira, dan banyak lagi.

Cypress terutama digunakan untuk mengotomatisasi skrip di web (dapat mengotomatiskan apa pun yang berjalan di browser). Itu tidak pernah dapat berjalan di aplikasi seluler asli tetapi dapat mengotomatiskan beberapa fungsi aplikasi seluler jika itu dikembangkan di browser.

Fitur

Ada banyak fitur luar biasa yang tersedia di Cypress yang menonjol dari alat otomatisasi lainnya. Di sini, mari kita bahas beberapa fitur utama, dan kita akan diperkenalkan ke bagian lain nanti setelah kita mulai menulis kasus uji kita!

  1. Menunggu otomatis – Cypress memiliki keunggulan menunggu otomatis. Kita tidak perlu menambahkan force wait dan sleep untuk menunggu DOM mengambil elemen. Cypress secara otomatis menunggu interaksi apa pun dengan elemen dan eksekusi pernyataan. Jadi, tesnya cepat!
  2. Perjalanan waktu – Cypress menangkap tangkapan layar selama eksekusi pengujian. Kita dapat melihat hasilnya secara visual secara real-time hanya dengan mengarahkan kursor pada perintah yang dijalankan di Dasbor. Dengan cara ini, tes lebih mudah untuk di-debug
  3. Tes debug – Cypress dapat men-debug tes dari alat populer seperti alat Pengembang. Kesalahan dapat dibaca, dan tumpukan mudah dilacak.
  4. Permintaan rintisan – Cypress memiliki opsi untuk mengonfirmasi dan mengontrol perilaku fungsi, respons jaringan, atau penghitung waktu yang digunakan oleh stub dan mata-mata.
  5. Integrasi berkelanjutan – Cypress tidak bergantung pada layanan CI tambahan lainnya. Namun, saat menjalankan perintah untuk pengujian, integrasi mudah diakses.

Mitos tentang Cypress

Ada mitos bahwa Cypress hanya dapat berjalan di aplikasi web yang ramah Javascript. Namun, Cypress dapat menguji aplikasi web apa pun yang dibangun dengan Django, Ruby on Rails, Laravel, dll. Selain itu, Cypress mendukung salah satu bahasa pemrograman seperti PHP, Python, Ruby, C#, dll. Namun, kami menulis pengujian kami dalam Javascript ; selain itu, Cypress bekerja pada aplikasi apa pun.

Komponen Cypress

Ada dua komponen utama di Cypress. Mereka Pelari Uji serta Menu Utama.

Cypress
Pelari Uji Cypress
Fitur Uji Cypress

Pelari Uji – Cypress menyediakan test runner unik ini, di mana pengguna dapat melihat perintah selama eksekusi dan aplikasi yang sedang diuji.

Ada beberapa subkomponen di bawah Test runner. Mereka

  1. Log Perintah – Ini adalah representasi visual dari test suite. Anda dapat melihat perintah yang dijalankan dalam pengujian, detail pernyataan, dan blok pengujian.
  2. Menu Status Tes – Menu ini menunjukkan jumlah kasus uji yang lulus atau gagal dan waktu yang dibutuhkan untuk eksekusi.
  3. Pratinjau URL – Ini memberi Anda informasi tentang URL yang Anda uji untuk melacak semua jalur URL.
  4. Ukuran area pandang – Anda dapat mengatur ukuran area pandang aplikasi untuk menguji berbagai tata letak responsif
  5. Pratinjau Aplikasi – Bagian ini menampilkan perintah yang dijalankan secara real-time. Di sini Anda dapat menggunakan Devtools untuk men-debug atau memeriksa setiap basis.

Dasbor: Cypress Dashboard memberikan kemampuan untuk mengakses tes yang sedang direkam. Dengan layanan Dashboard, kita dapat melihat jumlah tes yang lulus, gagal, atau dilewati. Juga, kita dapat melihat snapshot dari tes yang gagal dengan menggunakan cy. tangkapan layar() perintah. Anda juga dapat menyaksikan video seluruh tes atau klip tes yang gagal.

Arsitektur Cypress

Sebagian besar alat pengujian berjalan di server di luar Browser dan menjalankan perintah melalui jaringan. Tapi, Cypress berjalan di Browser tempat aplikasi juga berjalan. Dengan cara ini, ia dapat mengakses semua elemen DOM dan semua yang ada di dalam Browser.

Server node berjalan di belakang Cypress di sisi klien. Dengan demikian, server node dan Cypress saling berinteraksi, menemani, dan menjalankan tugas untuk mendukung eksekusi. Karena memiliki akses ke ujung depan dan belakang, respons terhadap aplikasi secara real-time selama eksekusi diselesaikan dengan baik dan juga dapat melakukan tugas yang bahkan dijalankan di luar Browser.

Arsitektur Cypress

Cypress juga berinteraksi dengan lapisan jaringan dan menangkap perintah dengan membaca dan mengubah lalu lintas web. Terakhir, Cypress mengirimkan permintaan dan tanggapan HTTP dari server node ke Browser. Karena Cypress beroperasi di lapisan jaringan, ada baiknya memodifikasi kode yang mungkin mengganggu otomatisasi browser web. Komunikasi antara server Node dan Browser adalah melalui WebSocket, yang memulai eksekusi setelah proxy dimulai.

Cypress mengontrol semua perintah yang berjalan masuk dan keluar dari browser. Karena diinstal di mesin lokal, ia langsung berinteraksi dengan sistem operasi untuk merekam video, mengambil snapshot, mengakses lapisan jaringan, dan melakukan operasi sistem file dengan mudah. Cypress dapat mengakses semuanya mulai dari DOM, objek jendela, penyimpanan lokal, lapisan jaringan, dan DevTools.

Instal Cypress

Bagian ini akan membahas proses instalasi yang perlu diikuti sebelum menulis kasus uji kami. Ada dua cara berbeda untuk mengunduh Cypress. Mereka

  1. Instal melalui npm
  2. Unduh langsung

Sebelum kita menginstal Cypress, kita mungkin memerlukan beberapa prasyarat untuk memulai menginstal melalui npm. Mari kita lihat mereka secara detail.

Pra-syarat

Kami akan memerlukan prasyarat tertentu sebelum menulis kasus uji kami.

  • Seperti dibahas di atas, Cypress berjalan pada server node; maka kita harus menginstal Node.js.
  • Juga, untuk menulis kasus pengujian kami, kami memerlukan editor kode atau IDE.

Dalam contoh ini, kita akan menggunakan Visual Studio Code. Jadi mari selami detailnya.

Instalasi Node.js di Mac

Di sini, kita akan membahas langkah-langkah untuk mengunduh Node.js di Mac. Navigasi ke https://nodejs.org/en/download/. Anda sekarang akan mendarat di halaman unduhan.

Paket simpul di macOs

1.Klik pada Penginstal macOS. Saat mengklik, Anda dapat menemukan file paket yang diunduh di bawah ini. Klik pada file pkg untuk menginstal Node.js

Pengenalan penginstal

2. Setelah Anda mengklik file .pkg, penginstal Node akan terbuka. Bagian pendahuluan memberi Anda versi Node.js dan npm. Klik Lanjutkan

Setuju Lisensi
Izinkan Akses di Pemasang

3. Klik Tombol Setuju dan kemudian Lanjutkan. Sebuah pop-up akan muncul untuk mengizinkan akses ke file Anda di folder Download. Klik Oke.

Pilih Tujuan

4. Di bagian ini, Anda dapat memilih tujuan tempat Node.js harus diunduh. Sekali lagi, Anda dapat memilih sesuai dengan ruang sistem Anda. Di sini saya memilih lokasi default.

Tipe instalasi
Masukkan Nama Pengguna dan Kata Sandi untuk Menginstal

5. Klik tombol Instal. Setelah Anda mengklik, sebuah pop-up yang menanyakan kata sandi sistem Anda akan muncul. Masukkan kata sandi Anda dan klik Instal Perangkat Lunak.

Ringkasan Instalasi

6. Hore! Kami telah menginstal paket Node.js dan npm. Klik Tutup untuk menyelesaikan pemasangan.

Instalasi Kode Visual Studio di Mac

Kami telah berhasil menginstal Node.js. Sekarang mari kita instal editor kode kita Visual Studio Code. Kode VS adalah alat yang ampuh yang memiliki semua fungsi bawaan Javascript. Jadi mari selami langkah-langkah instalasi Visual Studio Code.

Di sini kita akan membahas langkah-langkah untuk mengunduh kode VS di Mac. Pertama, navigasikan ke https://code.visualstudio.com/download untuk mendarat di halaman unduh kode VS.

Instal Kode VS di Mac

1. Klik ikon Mac. Anda dapat melihat paket yang diunduh di bawah ini.

Paket Terpasang dalam zip

2. Klik pada file yang diunduh untuk membuka zip paket. Setelah dibuka ritsletingnya, Anda dapat menemukan Kode Visual Studio di Unduhan Anda di Finder.

Kode VS dalam Unduhan

3. Hore! Kami telah mengunduh editor Kode kami. Klik pada ikon untuk membuka Kode Visual Studio.

Pembuatan proyek Cypress baru

Sekarang kita akan melihat cara membuat proyek simpul baru di Kode Visual Studio kita. Setelah Anda mengklik ikon kode VS, Anda akan mendarat di halaman Selamat Datang. Selanjutnya, klik pada folder Add Workspace untuk membuat folder baru.

Pembuatan proyek baru

Setelah Anda mengklik folder tersebut, Anda akan mendapatkan pop-up yang meminta untuk menambahkan folder baru. Sekarang klik pada lokasi yang ingin Anda tambahkan ruang kerja. Selanjutnya, klik Folder Baru dan Tambahkan nama Folder sebagai Proyek Cypress dan klik Buka.

Pembuatan folder baru

Sekarang kami telah membuat folder untuk pengujian Cypress kami. Sebelum kita mulai menulis pengujian kita, kita harus menginstal file package.json. Sebelum menginstal, mari kita pahami apa itu file package.json.

Apa itu file Package.json?

Package.json terdiri dari semua paket npm dalam sebuah file, biasanya terletak di root proyek. Biasanya terletak di direktori root proyek Node.js. File ini menyimpan semua metadata yang berlaku yang diperlukan untuk proyek tersebut. Ini memberikan semua informasi ke npm dan membantu dalam mengidentifikasi proyek dan menangani dependensi. File Package.json berisi informasi seperti nama proyek, versi, lisensi, dependensi, dan banyak lagi.
Sekarang kita sudah mengerti apa itu file package.json. Jadi, mari kita mulai langkah-langkah untuk mengunduh file dalam kode Visual Studio kita.

Buka Terminal

1. Untuk menjalankan perintah kita, kita perlu membuka Terminal. Di bagian atas kode VS, klik pada terminal. Setelah dropdown terbuka, klik Terminal Baru.

Instal file package.json

2. Setelah terminal terbuka, ketik perintah di bawah ini di direktori proyek dan tekan Enter.

npm init

3. Setelah Anda menekan Enter, Anda dapat melihat informasi tertentu yang ditampilkan. Anda dapat mengetikkan detail yang diperlukan di Terminal dan tekan Enter untuk mendapatkan semua bidang.

Detail proyek
  • Nama paket: Anda dapat memberikan nama apa pun untuk paket Anda. Saya membiarkannya kosong karena sudah diisi sebelumnya dengan nama folder yang kami buat.
  • Versi: Ini memberikan informasi tentang versi npm. Anda dapat melewati ini dan tekan Enter.
  • Deskripsi: Di sini, Anda dapat memberikan informasi tambahan untuk paket tersebut. Jika diperlukan, Anda dapat mengetik deskripsi dan tekan Enter lagi.
  • Titik masuk: Ini mewakili titik masuk aplikasi. Karena sudah diisi dengan index.js, kita dapat melewati bidang ini dan tekan Enter.
  • Perintah tes: Perintah yang diberikan untuk menjalankan tes. Di sini tidak perlu memberikan perintah apa pun, tetapi jika diperlukan, Anda pasti dapat memberikan perintah apa pun.
  • Repositori Git: Bidang ini memerlukan jalur ke repositori git. Anda juga dapat mengosongkan bidang ini.
  • Kata kunci: Kata kunci unik untuk membantu mengidentifikasi proyek. Anda dapat melewati bidang ini juga.
  • Penulis: Ini biasanya nama pengguna orang tersebut. Anda dapat menambahkan nama Anda dan tekan Enter.
  • Lisensi: Lisensi sudah diisi sebelumnya dengan ISC. Anda dapat melanjutkan dengan menekan Enter.
  • 4. Setelah Anda menekan Enter, Terminal akan meminta konfirmasi dengan mencantumkan semua detail yang Anda berikan. Jenis Yes dan tekan Enter lagi.
Konfirmasi pembuatan file Package.json

Kami sekarang telah membuat file package.json. Anda dapat melihat file di editor kode Anda dengan informasi yang kami berikan.

Membuat file Package.json

Langkah-langkah instalasi Cypress

Kami telah menginstal semua prasyarat untuk unduhan Cypress, node, dan npm yang diinisialisasi. Seperti disebutkan di atas, ada dua cara untuk mengunduh Cypress.

Unduh Cypress melalui npm

Anda harus melewati perintah yang disebutkan di bawah ini di Terminal untuk menginstal Cypress. Selain itu, Anda harus memberikan perintah di direktori proyek untuk menginstal node dan membuat file package.json.

npm install cypress --save-dev
Perintah Instalasi Cypress

Setelah Anda melewati perintah, itu akan mengunduh semua dependensi relevan yang diperlukan untuk proyek tersebut. Pada penulisan artikel ini, versi terbaru dari Cypress adalah 7.7.0. Versi mungkin berbeda pada saat Anda mengunduh.

Instalasi Cypress Berhasil

Dengan mengacu pada gambar di atas, Anda dapat melihat bahwa kami telah mengunduh Cypress. Anda dapat memverifikasi dengan representasi yang diunduh di Terminal dan penambahan devDependencies dalam file package.json.

Unduh langsung

Kami dapat mengunduh Cypress langsung dari CDN mereka jika Anda tidak menggunakan paket Node atau npm dalam proyek. Namun, merekam tes di Dasbor tidak dimungkinkan melalui unduhan langsung.

Anda dapat mengunduh dengan mengklik unduh Cypress langsung dari ini link. Ini sekarang akan langsung mengunduh paket. Setelah paket diunduh, buka file zip dan klik dua kali. Cypress akan berjalan tanpa memerlukan instalasi dependensi. Unduhan ini akan selalu mengambil berdasarkan versi terbaru, dan platform akan terdeteksi secara otomatis. Namun, mengunduh Cypress melalui npm lebih disarankan daripada mengunduh langsung.

Untuk posting lebih lanjut tentang Teknologi, silakan kunjungi kami halaman teknologi.

Gulir ke Atas