13 Contoh Cypress

Pada artikel terakhir, kita melihat apa itu Cypress, arsitekturnya, proses instalasi, dan prasyarat yang diperlukan untuk instalasi. Namun, sebelum kita mulai menulis pengujian, kita perlu menginstal Cypress. Klik disini untuk mendapatkan langkah-langkah rinci untuk menginstal Cypress.

Contoh Cypress

Artikel ini akan membahas Contoh cemara, contoh JSON, variabel dan alias, dan cara menulis kasus uji. Jadi mari kita mulai.

Contoh Cypress
Contoh Cypress

Daftar Isi

Contoh JSON Cypress

Awalnya, ketika kami membuka Cypress Test Runner kami, a cypress.json file konfigurasi dibuat. Kami cenderung menyimpan cuplikan yang menyediakan cara untuk menerapkan dan menyimpan beberapa properti yang membantu dalam program atau kode otomatisasi untuk dieksekusi. Demikian pula, Cypress juga memiliki file JSON untuk menyimpan nilai apa pun yang kami berikan sebagai properti konfigurasi.

Mari kita lihat beberapa contoh yang dapat kami konfigurasikan di Cypress JSON kami file.

Cypress sudah memiliki beberapa nilai konfigurasi default yang ditetapkan. Ada beberapa opsi yang dapat kami sesuaikan berdasarkan kebutuhan kami. Misalnya, kami dapat menyediakan baseURL properti di kami cypress.json mengajukan. Jadi, setiap kali kita menjalankan skrip, baseURL disetel dan dipicu.

pilihanNilai dasarDeskripsi
dasarUrlnolOpsi ini dapat digunakan sebagai URL awalan untuk cy.permintaan() or cy.kunjungan() perintah.
watchForFileChangesbenarOpsi ini ditetapkan sebagai true secara default. Itu mengawasi file untuk perubahan dan memulai kembali ketika ada modifikasi yang dibuat.

Di bawah ini adalah snapshot yang telah kami modifikasi properti baseURL dan watchForFileChanges di Cypress.json file.

Catatan: Kami akan membahas semua opsi di Konfigurasi Cypress sebagai topik terpisah nanti.

Contoh Cypress
file cypress.json

Buka Cypress

Sebelumnya, kita telah melihat tentang cara membuat proyek Cypress. Di sini, kita akan melihat cara membuka dan menjalankan runner Cypress Test. Jadi mari selami!

Jika Anda telah menginstal Cypress melalui npm, maka Cypress telah diinstal di direktori ./node_modules. Oleh karena itu, kita dapat membuka Pelari uji Cypress dengan meneruskan perintah npm dari akar dari direktori proyek kami.

Kita dapat membuka Cypress dengan salah satu cara berikut

1. dengan memberikan perintah path lengkap

./node_modules/.bin/cypress open

2. dengan menggunakan pintasan untuk npm bin

$(npm bin)/cypress open

3. dengan menggunakan npx

Di sini npx hanya didukung dengan npm > v5.2, atau kita dapat menginstalnya secara terpisah.

npx cypress open

4. dengan menggunakan benang

yarn run cypress open

Sekarang kita akan melihat cara membuka Cypress dengan melewatkan perintah path lengkap di terminal kita.

1. Anda harus melewati perintah yang disebutkan di atas pada poin 1, dan Anda dapat melihat yang berikut di terminal

Membuka Cypress di Terminal

2. Setelah beberapa saat, kita dapat melihat peluncuran Cypress Test runner dan akan dapat melihat runner Test seperti yang ditunjukkan di bawah ini. Setelah test runner diluncurkan, Anda dapat melihat beberapa contoh test case. Cypress telah membuat folder uji di root proyek kami yang membantu kami dengan pengaturan dasar dan penulisan kasus uji.

Contoh file di Test Runner

Sekarang mari kita kembali ke VS Code. Pertama, Anda dapat melihat beberapa struktur folder yang terisi. Sekarang mari kita uraikan masing-masing struktur folder dan lihat secara detail.

Struktur Folder di Cypress

Seperti yang kita lihat, Cypress telah membuat struktur folder di editor kode kita. Kami akan membahasnya secara rinci.

Folder di Contoh Cypress
  1. perlengkapan – Folder perlengkapan berisi data yang statis dan dapat digunakan kembali di seluruh proyek. Salah satu praktik terbaik bukanlah data hardcore (seperti kredensial, pesan pengujian) dalam pengujian kami. Sebagai gantinya, kami mengaksesnya melalui file JSON, CSV, atau HTML. Kita harus membuat file data kita di bawah folder fixture. Kami mengakses file ini dalam pengujian kami menggunakan cy.fixture perintah.
  2. integrasi – Di bawah folder ini, kami menulis kasus uji aktual yang biasanya kami sebut sebagai file spesifikasi. Di dalam folder integrasi, kita dapat membuat beberapa folder dan banyak file pengujian di bawah setiap folder berdasarkan persyaratan proyek kita. Anda juga dapat melihat beberapa file spesifikasi default yang dihasilkan dengan beberapa contoh.
  3. plugin – Folder plugin berisi file yang memungkinkan Anda untuk mengetuk, mengakses, dan mengubah perilaku kerja internal Cypress. Dengan plugin, Anda dapat menulis kode khusus yang dapat membantu Anda menjalankan perintah pengujian yang memiliki akses langsung ke setiap bagian (sebelum atau sesudah eksekusi) dari struktur kode Anda. Secara default, Cypress membuat plugin di jalur ini cypress/plugin/index.js
  4. Bantuan -Di bawah folder dukungan, kami memiliki file yang membantu kami menyediakan metode standar atau yang dapat digunakan kembali. Sebelum setiap spesifikasi dijalankan, Cypress mengeksekusi folder Support. Jadi tidak perlu mengimpor file dukungan di setiap file spesifikasi lainnya. Folder ini adalah tempat yang tepat untuk menambahkan metode yang dapat digunakan kembali atau fungsi global yang penting untuk digunakan di atas semua file spesifikasi lainnya.
  5. Modul simpul – Folder ini berisi semua paket npm yang kami instal. Modul simpul penting untuk menjalankan proyek simpul apa pun. Semua fungsi yang ada di proyek Cypress kami ditulis di dalam folder modul simpul kami. Kami tidak akan mengubah file apa pun di dalam modul node.
  6. Cypress.json – Kami dapat menambahkan beberapa konfigurasi di . kami Cypress.json mengajukan. Misalnya, kita dapat menambahkan variabel lingkungan, baseURL, timeout, atau opsi lain untuk mengganti opsi default di file konfigurasi Cypress.

Variabel dan Alias

Kami akan membahas variabel dan alias di Cypress secara rinci.

Saat kita memahami dan mempelajari Cypress, mungkin sulit bagi kita untuk memahami understand API asinkron alam di Cypress. Tapi seperti yang kita lihat banyak contoh di masa depan, itu akan menjadi sepotong kue. Banyak browser modern menggunakan API asinkron, dan bahkan modul inti Node ditulis dengan kode asinkron. Selain itu, kode Asynchronous hadir di mana-mana dalam kode Javascript. Oleh karena itu, kami akan melihat nilai pengembalian di Cypress.

Kembalikan Nilai Di Cypress

Semua perintah Cypress adalah antrean serta menjalankan tidak sinkron. Oleh karena itu, kami tidak dapat menetapkan atau berinteraksi dengan nilai pengembalian apa pun dari setiap perintah Cypress. Kita akan melihat sedikit contoh yang sama.

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

Penutupan

Kami tidak dapat mengakses atribut tombol melalui perintah yang disebutkan di atas. Sebagai gantinya, kita dapat menghasilkan perintah Cypress dengan menggunakan .then(). Kami menyebutnya penutupan.

.kemudian()

.then() membantu Anda mengakses thread yang dihasilkan dari perintah sebelumnya. Jika sudah mengerti janji asli, ini adalah cara yang sama .then() bekerja dengan Cypress. Kita juga dapat membuat sarang perintah yang berbeda di dalam .then(). Setiap perintah bersarang dapat mengakses perintah sebelumnya dalam loop. Kita akan melihatnya dengan sebuah contoh.

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Kami telah menggunakan Penutupan dalam contoh di atas, memungkinkan kita untuk menyimpan referensi dari perintah sebelumnya dalam loop.

Variabel

Biasanya, kita cenderung memberikan nilai ke variabel. Tapi di Cypress, kami jarang menggunakan const, var, dan let. Saat kami menggunakan penutupan, kami dapat mengakses objek yang dihasilkan tanpa menetapkannya ke variabel.

Tetapi ada beberapa kasus dimana kita dapat mendeklarasikan sebuah variabel adalah ketika keadaan objek berubah (benda yang bisa berubah). Misalnya, jika kita perlu membandingkan objek dengan nilai sebelumnya, kita akan mendeklarasikannya ke variabel untuk membandingkannya dengan nilai berikutnya. Mari kita lihat contoh untuk ini.

<button>increment</button>

You clicked button <span id="num">0</span> times

Di sini, rentang dengan hitungan 0 terus meningkat setiap kali kita mengklik tombol. Jadi objek tombol cenderung berubah statusnya setiap saat.

Sekarang mari kita lihat bagaimana kita dapat menetapkan ini ke variabel dalam kode Cypress kita.

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Karena span mengubah statusnya setiap kali kita mengklik tombol, kita dapat menetapkannya ke variabel untuk membandingkan statusnya sekarang dan sebelumnya. Hanya dalam kasus objek yang bisa berubah kita akan membutuhkan variabel, dan menggunakan const merupakan pendekatan yang baik.

alias

Sebelumnya, kita telah melihat variabel apa dan batasannya di Cypress. Untuk mengatasi keterbatasan ini, Alias ​​​​datang ke dalam gambar. Alias ​​​​adalah salah satu konstruksi kuat di Cypress. Kami akan melihat ini secara rinci dengan contoh.

Umumnya, Alias ​​​​dapat membantu Anda bekerja sebagai variabel. Namun, ada beberapa kasus penggunaan di mana alias dapat membantu kita alih-alih variabel.

1. Gunakan kembali Elemen DOM

Kita bisa alias elemen DOM dan kemudian mengaksesnya untuk digunakan kembali. Alias ​​​​juga mengatasi keterbatasan .kemudian() perintah.

2. Berbagi konteks

Dalam arti sederhana, konteks berbagi adalah berbagi objek antara kait dan tes. Kasus penggunaan utama untuk berbagi konteks adalah berurusan dengan cy.fixture – yaitu memuat sekumpulan data tetap dalam sebuah file.

Bagaimana cara mengakses alias?

Di sini, kita akan melihat cara mengakses alias. Kami akan menggunakan .as() perintah untuk menetapkan elemen untuk digunakan nanti. Parameter yang dibutuhkan adalah nama alias. Nama alias digunakan sebagai referensi dalam a cy.get() or cy.wait() menggunakan @ awalan.

Kami akan melihat contoh cara mengakses alias.

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

Pada baris pertama, kita mendapatkan id dari user_login dari DOM. Kami kemudian menggunakan .as() dan mendeklarasikan dengan nama pengguna. Di baris kedua, kami mengakses alias kami dengan @ simbol dan melakukan mengetik tindakan.

Contoh Tes Cypress

Kami akan mulai menulis kasus uji pertama kami dengan Cypress. Ini sangat sederhana dan mudah. Tapi sebelum itu, kita akan melihat konstruksi tes Cypress.

Konstruksi Dasar Cypress

Cypress telah mengadopsi sintaks Mocha untuk kasus ujinya dan menggunakan semua opsi yang disediakan Mocha. Di bawah ini adalah konstruksi Cypress dasar yang digunakan secara umum untuk kasus pengujian kami.

  • Menggambarkan() – menggabungkan semua kasus uji menjadi satu pengujian yang lebih besar dan mengelompokkannya. Dibutuhkan dua parameter – deskripsi pengujian dan fungsi panggilan balik.
  • dia() – kami menulis kasus uji individual di blok it() kami. Blok ini juga mengambil dua parameter - apa yang dilakukan tes, dan parameter kedua adalah fungsi panggilan balik.
  • setelah() – ini dijalankan setelah semua tes dalam file spesifikasi.
  • setelahSetiap() – ini berjalan setelah setiap kasus uji individu.
  • sebelum() – berjalan sebelum semua tes dalam file spesifikasi.
  • sebelumSetiap() – dieksekusi sebelum setiap kasus uji individu.

Bagaimana cara menulis kasus uji?

Sebelum kita mulai, kita harus mengetahui apa itu test case, menulisnya, dan apa langkah-langkah untuk test case dasar.

1. Prasyarat – Status aplikasi yang akan kita uji.

2. Tindakan – Kami melakukan beberapa tindakan pada aplikasi.

3. Tuntutan – Kami menegaskan atau memvalidasi perubahan perilaku terkait tindakan kami.

Kami akan mempertimbangkan LambdaGeeks aplikasi untuk contoh pengujian kami. Dengan prosedur yang sama, kami akan mempertimbangkan untuk mengotomatisasi skenario berikut:

1. Kunjungi situs webnya https://lambdageeks.com/

2. Validasi apakah judulnya Home – Lambda Geeks
Cypress menggunakan cy sebagai definisi tipenya. Kami akan menambahkan cy perintah untuk memanggil metode apa pun.
Pertama, mari buat file baru di editor kode kita.

1. Buat folder baru bernama Demo di bawah folder integrasi.

Pembuatan folder barur

2. Di bawah folder Demo, buat file baru sampel.js. Kami akan menulis kasus uji pertama kami di file ini.

Pembuatan file baru

Sekarang mari kita mulai menulis kasus uji kita!

1. 1. Pertama, kita akan mengunjungi halaman menggunakan mengunjungi() metode di Cypress. Perintah ini akan menavigasi ke URL yang kami berikan. Kami akan memasukkannya ke dalam blok deskripsi() dan itu() .

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Setelah aplikasi terbuka, kami akan memvalidasi judul menggunakan get() metode di Cypress .get() mengambil semua pemilih css dari DOM.

Kami mengakses judul menggunakan title() metode, dan kami menyatakan menggunakan perpustakaan Chai dengan perintah harus dengan melewatkan parameter pertama sebagai sama, singkatnya eq. Parameter kedua adalah string yang kita harapkan.

 cy.title().should('eq','Home - Lambda Geeks')

Hore! Dengan dua langkah sederhana, kami telah menulis kasus Uji Cypress kami.

Berikut adalah kode lengkap dari kasus uji kami

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});
Contoh Cypress: Kasus uji pertama

Contoh Login Cypress

Kita akan melihat contoh bagaimana mengotomatisasi halaman login menggunakan Cypress. Seperti yang kita lihat sebelumnya, menulis kasus uji di Cypress itu sederhana. Sekarang mari kita beralih ke pengaturan nilai di bidang teks dan pernyataan.

1. Kami mengunjungi situs web https://demo.applitools.com/ dengan menggunakan cy.visit perintah.

 cy.visit('https://demo.applitools.com/')

2. Masukkan nama pengguna di bidang nama pengguna menggunakan perintah ketik. Kami akan meneruskan nama pengguna sebagai string dalam tipe sebagai parameter.

 cy.get('#username').type('test123')

3. Demikian pula, kami menulis perintah yang sama untuk memasukkan kata sandi

 cy.get('#password').type('123')

4. Sekarang, kita klik tombol login menggunakan click() metode di Cypress.

cy.get('#log-in').click();

5. Setelah login, kita masuk ke halaman aplikasi. Jadi kami menegaskan bahwa URL memiliki /app ekstensi menggunakan .include() kata kunci dalam chai. Parameter pertama dari should adalah kata kunci yang kita nyatakan, dan parameter kedua adalah hasil yang diharapkan.

cy.url().should('include', '/app')

Kami telah menulis kode lengkap untuk fungsi login dalam lima langkah sederhana. Di bawah ini adalah kode lengkap untuk referensi Anda.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});
Kasus Uji Masuk

Solusi untuk Masalah Umum saat Meluncurkan Cypress & FAQ

Mungkin ada beberapa masalah umum yang akan kita hadapi saat mencoba meluncurkan Cypress. Kami akan membahas beberapa masalah umum.

1. Tidak dapat menemukan perintah 'Cypress' selama perintah Open Cypress

Setelah instalasi, kita harus melewati perintah open cypress dari root direktori proyek. Misalnya, Anda telah membuat proyek bernama CypressProject; kamu harus lulus npm init perintah dengan menavigasi ke folder CypressProject. Anda dapat menavigasi dengan memberikan perintah di bawah ini di terminal

cd CypressProject

Setelah Anda berada di root proyek, lalu lewati npm init perintah untuk mengunduh dependensi.

Sekarang untuk membuka Cypress, beberapa orang mencoba menavigasi ke /node_modules folder dan ./bin dan kemudian berikan perintah cypress open. Namun, itu tidak bekerja dengan cara ini. Jadi alih-alih, berikan seluruh perintah buka dari root direktori proyek untuk membuka Cypress.

./node_modules/.bin/cypress open

Juga, berhati-hatilah dengan garis miring '/'. Selalu sediakan ini'/' untuk membuka Cypress.

2. Cypress tidak dapat dimuat karena menjalankan skrip dinonaktifkan pada ini sistem

Saat Anda menginstal Cypress di windows, terkadang Anda mungkin menghadapi kesalahan di atas. Itu karena pengecualian keamanan. Kami dapat mengatasi kesalahan ini dengan mengirimkan perintah di bawah ini di PowerShell.

Set-ExecutionPolicy RemoteSigned

Langkah-langkah untuk mereproduksi:

  • Buka PowerShell
  • Jalankan perintah ini Set-ExecutionPolicy RemoteSigned
  • Tipe Yes
  • Sekarang buka Cypress dengan melewati ./node_modules/.bin/cypress open. Test Runner akan terbuka sekarang.

Pertanyaan Umum

1. Sistem operasi mana yang didukung oleh Cypress?

Cypress mendukung iPhone, Windows, dan Linux sistem operasi.

2. Apakah Cypress mendukung otomatisasi di aplikasi seluler asli?

Cypress tidak akan pernah bisa berjalan di aplikasi seluler asli. Tapi kita bisa menguji aplikasi mobile yang ditulis di browser seperti Iconic Frameworks.

3. Apakah Cypress hanya mendukung aplikasi berbasis Javascript?

Tidak! Cypress dapat berinteraksi dengan browser web apa pun yang ditulis dalam bahasa seperti Ruby on Rails, Node, PHP, C#. Tetapi kami akan menulis pengujian kami dalam Javascript. Jika tidak, Cypress dapat berinteraksi dengan ujung depan, ujung belakang, bahasa, dan kerangka kerja apa pun.

Gulir ke Atas