Pernyataan Cypress: 9 Fakta yang Harus Anda Ketahui

Pernyataan Cypress membantu kita untuk menegaskan Pernyataan tertentu adalah langkah validasi yang memastikan apakah hasil yang diharapkan sama dengan hasil sebenarnya. Dalam otomatisasi pengujian, kami menyatakan pernyataan untuk memverifikasi bahwa pengujian menghasilkan hasil yang diharapkan. Jika pernyataan gagal, maka kasus uji gagal memastikan bahwa ada bug. Pada artikel kali ini kita akan membahas tentang Pernyataan Cypress dengan implementasi dan contoh Handson.

Daftar Isi

Pernyataan Cypress

Apa itu Pernyataan Cypress?

Cypress menggunakan dan membungkus pustaka pernyataan Chai dan ekstensi seperti Sinon dan JQuery. Cypress secara otomatis menunggu dan mencoba lagi hingga pernyataan diselesaikan. Asersi dapat digunakan untuk menjelaskan bagaimana seharusnya tampilan aplikasi. Kita dapat menggunakan pernyataan Cypress dengan kombinasi wait, retry, block hingga mencapai keadaan yang diinginkan.

Teks Pernyataan Cypress

Dalam bahasa Inggris umum, kami akan menggambarkan pernyataan seperti, Saya berharap tombol memiliki teks login. Pernyataan yang sama dapat ditulis dalam Cypress sebagai

cy.get('button').should('have.value', 'login')

Pernyataan di atas akan lolos jika tombol memiliki nilai 'login'.

Pernyataan Umum Cypress

Ada satu set pernyataan Cypress umum yang kami gunakan dalam kasus pengujian kami. Kami akan menggunakannya dengan .should() . Mari kita lihat use case dan contohnya.

Beberapa pernyataan Cypress yang umum tercantum di bawah ini:

  1. Panjang
  2. Nilai
  3. Konteks Teks
  4. Kelas
  5. Adanya
  6. CSS
  7. Jarak penglihatan
  8. Negara
  9. Properti yang Dinonaktifkan

Pernyataan Panjang Cypress

length() akan memeriksa apakah elemen tertentu memiliki panjang

cy.get('dropdown').should('have.length', 5)

Pernyataan Nilai Cypress

Nilai Cypress akan menegaskan jika elemen tertentu memiliki nilai yang diharapkan

cy.get('textfield').should('have.value', 'first name')

Pernyataan Konteks Teks Cypress

Konteks teks akan menegaskan jika elemen tersebut memiliki teks tertentu

cy.get('#user-name').should('have.text', 'John Doe')

Pernyataan Kelas Cypress

Menegaskan apakah kelas ada atau elemen tertentu harus memiliki kelas

cy.get('form').find('input').should('have.class', 'disabled')

Pernyataan Keberadaan Cypress

Perintah keberadaan memeriksa apakah elemen tertentu ada atau ada di DOM atau tidak

cy.get('#button').should('exist')

Pernyataan Cypress CSS

Pernyataan CSS memeriksa apakah elemen tertentu memiliki properti tertentu

cy.get('.completed').should('have.css', 'text-decoration', 'line-through')

Pernyataan Visibilitas Cypress

Pernyataan Visibilitas Cypress menegaskan apakah elemen DOM terlihat di UI

cy.get('#form-submit').should('be.visible')

Pernyataan Negara Cypress

Menegaskan status elemen DOM

cy.get(':radio').should('be.checked')

Pernyataan Properti Penyandang Cacat Cypress

Pernyataan properti Cypress Disabled menegaskan apakah elemen dinonaktifkan

cy.get('#example-input').should('be.disabled')

Pernyataan Coba Lagi Cypress

Satu perintah diikuti dengan pernyataan akan dieksekusi secara berurutan. Awalnya, perintah dijalankan dan kemudian pernyataan akan dieksekusi. Perintah tunggal yang diikuti oleh beberapa pernyataan juga akan dieksekusi secara berurutan – masing-masing pernyataan pertama dan kedua. Jadi ketika pernyataan pertama berlalu, pernyataan pertama dan kedua akan dieksekusi bersama dengan perintah lagi.

Misalnya, perintah di bawah ini berisi keduanya .should() serta .and() perintah pernyataan, di mana .and() atau dikenal sebagai .should()

cy.get('.todo-list li') // perintah .should('have.length', 2) // pernyataan .and(($li) => { // 2 pernyataan lagi expect($li.get (0).textContent, 'item pertama').to.equal('todo A') expect($li.get(1).textContent, 'item kedua').to.equal('todo B') })

Contoh Pernyataan Cypress

Di bagian ini, kita akan membahas berbagai jenis pernyataan di Cypress seperti

  • Pernyataan Tersirat
  • Pernyataan Eksplisit

Kami akan melihat ke detail pada kedua jenis dengan contoh

Pernyataan Tersirat di Cypress

Dalam pernyataan implisit, kami menggunakan .should() or .and() perintah. Perintah pernyataan ini berlaku untuk subjek yang dihasilkan saat ini dalam rantai perintah. Mereka bergantung pada subjek yang dihasilkan sebelumnya.

Kami akan melihat contoh tentang cara menggunakan .should() or .and() perintah

cy.get('button').should('have.class', 'enabled')

Dengan .and() yang merupakan alias dari .should() , kita dapat mengaitkan beberapa pernyataan. Perintah-perintah ini lebih mudah dibaca.

cy.get('#title') .should('have.class', 'active') .and('have.attr', 'href', '/post')

Contoh di atas dirantai dengan .should() menyatakan itu harus memiliki kelas "aktif", diikuti oleh .and() dijalankan terhadap perintah yang sama. Ini sangat membantu ketika kita ingin menegaskan beberapa perintah.

Pernyataan Eksplisit di Cypress

Melewati subjek eksplisit dalam pernyataan termasuk dalam jenis eksplisit pernyataan Cypress. Di sini, kita akan menggunakan expect serta assert perintah sebagai penegasan. Pernyataan eksplisit digunakan ketika kita ingin menggunakan beberapa pernyataan untuk subjek yang sama. Kami juga menggunakan pernyataan eksplisit dalam Cypress ketika kita ingin melakukan custom logika sebelum membuat pernyataan.

Kami akan melihat ke dalam contoh untuk Cypress eksplisit pernyataan

expect(true).to.be.true //memeriksa boolean expect(object).to.equal(object)

Pernyataan Cypress Negatif

Mirip dengan pernyataan positif, ada pernyataan negatif di Cypress. Kami akan menggunakan kata kunci "tidak" yang ditambahkan ke awalan pernyataan pernyataan. Mari kita lihat contoh pernyataan negatif

cy.get('#loading').should('not.be.visible')

Pernyataan negatif direkomendasikan hanya dalam kasus untuk memverifikasi bahwa kondisi tertentu tidak lagi tersedia setelah tindakan tertentu dilakukan oleh aplikasi.

Misalnya, mari kita pertimbangkan bahwa sakelar dicentang dan memverifikasi bahwa itu telah dihapus

// pada awalnya item ditandai selesai cy.contains('li.todo', 'Write test') .should('have.class', 'completed') .find('.toggle') .click() / / kelas CSS telah dihapus cy.contains('li.todo', 'Write test').should('not.have.class', 'completed')

Pesan Pernyataan Kustom Cypress

Dengan Cypress, kami dapat memberikan informasi tambahan atau pesan khusus untuk pernyataan dengan menggunakan pustaka pencocokan. Pencocokan terdiri dari fungsi-fungsi kecil yang membedakan nilai dan akan memberikan pesan kesalahan terperinci. Chai pustaka pernyataan akan membantu kode kami terlihat lebih mudah dibaca dan kegagalan pengujian sangat berguna

const expect = require('chai').expect it('checks a number', () => { const value = 10 const expected = 3 expect(value).to.equal(expected) })
Pesan Kesalahan Kustom Cypress

Praktik Terbaik Pernyataan Cypress

Kita dapat menulis beberapa pernyataan dalam satu blok dengan menggunakan rantai perintah. Tidak perlu menulis pernyataan tunggal seperti di unit test. Banyak yang menulis pernyataan seperti di bawah ini. Tidak apa-apa untuk menulis dengan cara itu, tetapi itu meningkatkan baris kode dan redundansi.

jelaskan('formulir saya', () => { sebelum(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'memiliki atribut validasi', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // menegaskan apakah #first memiliki bidang wajib } ) it('memiliki kelas aktif', () => { cy.get('#first').should('have.class', 'active') // menyatakan apakah #first memiliki kelas aktif }) it( 'telah memformat nama depan', () => { cy.get('#first').should('have.value', 'Ashok') // menyatakan apakah #first memiliki huruf pertama yang dikapitalisasi }) })

Seperti yang Anda lihat di atas, pemilih dan tipe pernyataan yang sama terus berulang. Sebagai gantinya, kita dapat merangkai perintah-perintah ini dalam satu pernyataan tunggal yang melakukan semua pemeriksaan secara linier.

jelaskan('formulir saya', () => { sebelum(() => { cy.visit('/users/new') }) it('memvalidasi dan memformat nama depan', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .nilai', 'Ashok') }) })

Seperti disebutkan di atas, kita dapat menghubungkan pemilih tunggal dengan beberapa pernyataan! Ini adalah salah satu praktik terbaik yang direkomendasikan untuk menulis pernyataan di Cypress.

Untuk memahami tentang Model Objek Halaman di Cypress, klik disini.

Gulir ke Atas