Janji Cypress dan Cypress Asynchronous: 13 Fakta Penting

Di sebelumnya kami artikel, kami melihat konfigurasi di Cypress dan berbagai opsi yang dapat dikonfigurasi dalam file JSON. Artikel ini akan mengerti Janji Cemara serta Cypress Asinkron perilaku dengan implementasi langsung dan contoh dalam proyek kami. Kami juga akan membahas bagaimana memasukkan menunggu dalam kode asinkron kami dan beberapa fungsi penting seperti wrap() serta task(). Mari kita mulai!

Cypress Promise dan Cypress Asynchronous:

Janji Cemara serta Cypress Asinkron alam adalah beberapa konsep penting. Seperti kerangka Javascript lainnya, Cypress juga berkisar pada Asynchronous dan Promises. Cypress menangani semua perilaku asinkron secara internal, dan disembunyikan dari pengguna. Kami akan menggunakan .then() untuk menangani janji secara manual dalam kode kami. Ada paket eksternal seperti Cypress-promise di npm di mana kita dapat memanipulasi perilaku asinkron Cypress. Kami akan membahas masing-masing topik ini secara rinci.

Cypress Promise dan Cypress Asynchronous
Janji Cemara

Daftar Isi

Cypress Asinkron

Seperti yang kita ketahui, Cypress didasarkan pada Node JS. Kerangka kerja apa pun yang dibuat dari Node.js adalah asynchronous. Sebelum memahami perilaku asinkron Cypress, kita harus mengetahui perbedaan antara sifat sinkron dan asinkron.

Sifat sinkron

Dalam program sinkron, selama eksekusi kode, hanya jika baris pertama berhasil dieksekusi, baris kedua akan dieksekusi. Itu menunggu sampai baris pertama dieksekusi. Ini berjalan secara berurutan.

Sifat asinkron

Kode dieksekusi secara bersamaan, menunggu setiap langkah dieksekusi tanpa mengganggu status perintah sebelumnya. Meskipun kami telah menulis kode kami secara berurutan, kode asinkron dijalankan tanpa menunggu langkah apa pun untuk diselesaikan dan sepenuhnya independen dari perintah/kode sebelumnya.

Apa yang asinkron di Cypress?

Semua perintah Cypress bersifat asinkron. Cypress memiliki pembungkus yang memahami kode sekuensial yang kita tulis, mengantrekannya di pembungkus, dan berjalan nanti saat kita mengeksekusi kode. Jadi, Cypress melakukan semua pekerjaan kami yang terkait dengan sifat dan janji asinkron!

Mari kita memahami contoh untuk itu.

 it('klik pada opsi teknologi untuk menavigasi ke URL teknologi', function () { cy.visit('https://lambdageeks.com/') // Tidak ada perintah yang dijalankan //klik pada opsi teknologi cy. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Tidak ada yang dieksekusi di sini juga .click() // Belum ada yang terjadi cy.url() // Tidak ada perintah yang dieksekusi di sini juga .should('include', '/technology') // Tidak, tidak ada. }); // Sekarang, semua fungsi pengujian telah selesai dieksekusi // Cypress telah mengantri semua perintah, dan sekarang mereka akan berjalan secara berurutan

Itu cukup sederhana dan menyenangkan. Kami sekarang memahami cara kerja perintah Cypress Asynchronous. Mari kita selami lebih dalam di mana kita mencoba untuk mencampur kode sinkronisasi dan asinkron.

Mencampur perintah Cypress Synchronous dan Asynchronous

Seperti yang kita lihat, perintah Cypress tidak sinkron. Saat menyuntikkan kode sinkron apa pun, Cypress tidak menunggu kode sinkronisasi dieksekusi; maka perintah sinkronisasi dijalankan terlebih dahulu bahkan tanpa menunggu perintah Cypress sebelumnya. Mari kita lihat contoh singkat untuk lebih memahami.

 it('klik pada opsi teknologi untuk menavigasi ke URL teknologi', function () { cy.visit('https://lambdageeks.com/') //klik pada opsi teknologi cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Tidak ada perintah yang dieksekusi di sini juga .should('include', '/technology') // Tidak, tidak ada. console.log("Ini untuk memeriksa log") // Log untuk memeriksa perilaku asinkron }); });
Eksekusi sinkron dari perintah log

Log ditambahkan di akhir kode, yang merupakan perintah sinkronisasi. Saat kami menjalankan pengujian, Anda dapat melihat bahwa log telah dicetak bahkan sebelum halaman dimuat. Dengan cara ini, Cypress tidak menunggu perintah sinkron dan mengeksekusinya bahkan sebelum menjalankan perintahnya.

Jika kita ingin mereka mengeksekusi seperti yang diharapkan, maka kita harus membungkusnya di dalam .then() fungsi. Mari kita pahami dengan sebuah contoh.

it('klik pada opsi teknologi untuk menavigasi ke URL teknologi', function () { cy.visit('https://lambdageeks.com/') //klik pada opsi teknologi cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Tidak ada perintah yang dieksekusi di sini juga .should('include', '/technology') // Tidak, tidak ada. .then(() => { console.log("Ini untuk memeriksa log") // Log untuk memeriksa perilaku asinkron }); });
Eksekusi asinkron dengan perintah .then()

Apa itu Janji Cypress?

Seperti yang kita lihat di atas, Cypress mengantrekan semua perintah sebelum dieksekusi. Untuk mengulang secara rinci, kita dapat mengatakan bahwa Cypress menambahkan janji (perintah) ke dalam rantai janji. Cypress menjumlahkan semua perintah sebagai janji dalam sebuah rantai.

Untuk memahami Janji, bandingkan dengan skenario kehidupan nyata. Penjelasannya mendefinisikan Janji dalam sifat asinkron juga. Jika seseorang berjanji padamu, mereka juga menolak or memenuhi pernyataan yang mereka buat. Demikian juga, secara asinkron, menjanjikan juga menolak or memenuhi kode yang kita bungkus dalam sebuah janji.

Namun, Cypress menangani semua janji, dan tidak perlu memanipulasinya dengan kode khusus kami. Sebagai pemrogram Javascript, kami penasaran untuk menggunakan menunggu dalam perintah kami. Cypress API benar-benar berbeda dari biasanya. Kita akan melihat bagian selanjutnya dari tutorial ini secara mendalam.

Negara-negara Janji Cypress

Janji memiliki tiga status berbeda berdasarkan perintah Cypress. Mereka

  • Terselesaikan – Terjadi ketika langkah/perintah berhasil dijalankan.
  • Pending – Menyatakan di mana eksekusi telah dimulai, tetapi hasilnya tidak pasti.
  • Penolakan – Terjadi saat langkah gagal.

Sebagai programmer Javascript, kita cenderung menulis janji dalam kode kita dan mengembalikannya. Sebagai contoh,

//Kode ini hanya untuk demonstrasi mendeskripsikan('Contoh Cypress ', function() { it('klik pada opsi teknologi untuk menavigasi ke URL teknologi', function() { cy.visit('https://lambdageeks. com/') //klik opsi teknologi cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl- konten-foto > a > .fl-foto-img') .then(() => { return cy.click(); }) cy.url() .then(() => { return cy.should(' include', '/technology') }) }); });

Di sini, kami mengembalikan janji untuk setiap perintah. Ini tidak diperlukan di Cypress. Untungnya, Cypress menangani semua janji secara internal, dan kami tidak perlu menambahkan janji di setiap langkah. Cypress memiliki coba lagi-kemampuan opsi, di mana ia mencoba untuk jangka waktu tertentu untuk menjalankan perintah. Kita akan melihat contoh kode tanpa menyertakan janji secara manual.

    it('klik pada opsi teknologi untuk menavigasi ke URL teknologi', function () { cy.visit('https://lambdageeks.com/') //klik pada opsi teknologi cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() .should('termasuk', '/teknologi') }); });
Perintah Cypress dengan janji ditangani secara internal

Kode di atas tidak kaku dan mudah dibaca dan dipahami. Cypress menangani semua pekerjaan janji, dan disembunyikan dari pengguna. Jadi kita tidak perlu khawatir untuk menangani atau mengembalikan janji di mana saja!

Bagaimana Anda menggunakan menunggu di Cypress?

Seperti dibahas di atas, Cypress memiliki caranya menangani kode asinkron dengan membuat antrian perintah dan menjalankannya secara berurutan. Menambahkan awaits ke perintah tidak akan berfungsi seperti yang diharapkan. Karena Cypress menangani semuanya secara internal, saya sarankan untuk tidak menambahkan awaits ke kode.

Jika Anda perlu menambahkan menunggu, Anda dapat menggunakan perpustakaan pihak ketiga seperti Cypress-janji yang mengubah cara kerja Cypress. Perpustakaan ini akan membiarkan Anda menggunakan menjanjikan dalam perintah, dan gunakan menunggu di dalam kode

Mari kita memahami cara menggunakan menunggu dan bagaimana tidak menggunakannya.

Anda tidak harus menggunakan menunggu seperti ini

//Jangan gunakan menunggu dengan cara ini menggambarkan('Kunjungi halaman', () => { (async () => { cy.visit('https://lambdageeks.com/') menunggu cy.url(). harus('termasuk', '/teknologi'); })() })

Sebagai gantinya, Anda dapat menggunakan seperti ini

deskripsikan('Kunjungi halaman', () => { cy.visit('https://lambdageeks.com/').then(async() => menunggu cy.url().should('include', ' /teknologi') ()) })

Ini akan berfungsi untuk semua perintah Cypress.

Bungkus cemara

wrap() adalah fungsi di Cypress yang menghasilkan objek apa pun yang diteruskan sebagai argumen.

Sintaksis

cy.wrap(subject)
cy.wrap(subject, options)

Mari kita lihat contoh cara mengakses wrap() dalam kode kami.

const getName = () => { return 'Horse' } cy.wrap({ name: getName }).invoke('name').should('eq', 'Horse') // true

Dalam contoh, kami membungkus getName dan kemudian memanggil nama untuk itu.

Janji Bungkus Cypress

Kita bisa membungkus janji-janji yang dikembalikan oleh kode. Perintah akan menunggu janji untuk diselesaikan sebelum mengakses nilai yang dihasilkan dan. kemudian lanjutkan untuk perintah atau pernyataan berikutnya.

const customPromise = new Promise((menyelesaikan, menolak) => { // kita menggunakan fungsi setTimeout() untuk mengakses kode async. setTimeout(() => { resolve({ type: 'success', message: 'Apples and Oranges' , }) }, 2500) }) it('harus menunggu janji untuk diselesaikan', () => { cy.wrap(customPromise).its('message').should('eq', 'Apple and Oranges' ) });

Ketika argumen di cy.wrap() adalah janji, itu akan menunggu janji untuk diselesaikan. Jika janji itu ditolak, maka ujiannya akan gagal.

Cypress-janji npm

Jika kita ingin memanipulasi janji Cypress, maka kita juga dapat menggunakan perpustakaan atau paket yang disebut Cypress-janji dan memasukkannya ke dalam kode kita. Paket ini akan memungkinkan Anda untuk mengonversi a Perintah Cypress menjadi janji dan memungkinkan Anda untuk menunggu atau async dalam kode. Namun, kondisi ini tidak akan berfungsi before or beforeEach blok. Awalnya, kita harus menginstal paket dalam proyek kita dengan melewatkan perintah berikut di terminal.

npm i cypress-promise

Setelah diinstal, terminal akan terlihat seperti ini.

Pemasangan janji Cypress

Setelah instalasi, kita harus mengimpor perpustakaan ke file pengujian kita.

import promisify from 'cypress-promise'

Dengan perpustakaan ini, Anda dapat membuat dan mengganti janji asli Cypress dan menggunakan menunggu dan asinkron dalam kode. Anda harus mengakses janji dengan promisify kata kunci. Mari kita lihat contoh untuk hal yang sama.

import promisify from 'cypress-promise' it('should run test with async/await', async() => { const apple = menunggu promisify(cy.wrap('apple')) const orange = menunggu promisify(cy.wrap ('jeruk')) harapkan(apel).to.equal('apel') harapkan(jeruk).to.equal('jeruk') });
Janji di Cypress-janji

Ini sangat sederhana dan menyenangkan untuk dipelajari! Dengan cara ini, Anda dapat menetapkan kode asinkron di Cypress.

Tugas Cypress Async

task() adalah fungsi di Cypress yang menjalankan kode di Node.js. Perintah ini memungkinkan Anda untuk beralih dari browser ke node dan menjalankan perintah di node sebelum mengembalikan hasilnya ke kode.

Sintaksis

cy.task(event)
cy.task(event, arg)
cy.task(event, arg, options)

task() mengembalikan nilai atau janji. task() akan gagal jika janji itu dikembalikan sebagai undefined. Dengan cara ini, ini membantu pengguna menangkap kesalahan ketik di mana acara tidak ditangani dalam beberapa skenario. Jika Anda tidak perlu mengembalikan nilai apa pun, maka lewati null nilai.

FAQ

Apakah Cypress Sinkron atau Asinkron?

Cemara adalah Asinkron dengan mengembalikan perintah yang antri alih-alih menunggu penyelesaian eksekusi perintah. Meskipun tidak sinkron, ia masih menjalankan semua langkah pengujian secara berurutan. Cypress Engine menangani semua perilaku ini.

Apakah mungkin untuk menangkap rantai janji di Cypress?

Cypress dirancang sedemikian rupa sehingga kita tidak akan bisa memenuhi janji. Perintah-perintah ini tidak persis Janji, tapi sepertinya janji. Dengan cara ini, kami tidak dapat menambahkan penangan eksplisit seperti catch.

Gulir ke Atas