Apa itu Cypress Json: 11 Fakta Yang Harus Anda Ketahui

Kami akan membahas struktur JSON, contoh, dan pengalaman langsung yang mendetail untuk menulis JSON dalam kode kami. Tapi, pertama-tama, mari selami artikel kami!

Apa itu Cypress Json: Contoh, Skema, Analisis Langsung Terperinci

Di sebelumnya kami artikel, kami membahas variabel dan alias dan cara menulis kasus uji pertama kami. Sekarang, kita akan membahas Cypress JSON dan bagaimana memasukkannya ke dalam kode kita.

cemara json

Daftar Isi

File JSON Cypress

Seperti yang kita lihat sebelumnya, pertama kali kita membuka Cypress Test Runner kita, itu menciptakan cemara.json mengajukan. File ini digunakan untuk meneruskan nilai konfigurasi apa pun yang kami perlukan. Jadi pertama-tama, kita akan melihat opsi yang bisa kita lewati di cypress.json file.

Opsi JSON Default

Opsi tertentu diatur secara default di Cypress. Namun, kami dapat menyesuaikannya sesuai dengan proyek kami. Untuk mengidentifikasi nilai default yang ditetapkan oleh Cypress, navigasikan ke Settings folder di Cypress Test Runner kami. Dari sana, perluas opsi Konfigurasi untuk melihat opsi default yang ditetapkan oleh Cypress.

File JSON Cypress

Pilihannya adalah konfigurasi default yang disediakan oleh Cypress.

{
animationDistanceThreshold:5
baseUrl:null
blockHosts:null
browsers:Chrome, Firefox, Electron
chromeWebSecurity:true
component:{}
componentFolder:"cypress/component"
defaultCommandTimeout:4000
downloadsFolder:"cypress/downloads"
e2e:{}
env:null
execTimeout:60000
experimentalFetchPolyfill:false
experimentalInteractiveRunEvents:false
experimentalSourceRewriting:false
experimentalStudio:false
fileServerFolder:""
firefoxGcInterval:runMode, openMode
fixturesFolder:"cypress/fixtures"
hosts:null
ignoreTestFiles:".hot-update.js" includeShadowDom:false integrationFolder:"cypress/integration" modifyObstructiveCode:true nodeVersion:"default" numTestsKeptInMemory:50 pageLoadTimeout:60000 pluginsFile:"cypress/plugins" port:null projectId:"hpcsem" redirectionLimit:20 reporter:"spec" reporterOptions:null requestTimeout:5000 responseTimeout:30000 retries:runMode, openMode screenshotOnRunFailure:true screenshotsFolder:"cypress/screenshots" scrollBehavior:"top" supportFile:"cypress/support" taskTimeout:60000 testFiles:"/.*"
trashAssetsBeforeRuns:true
userAgent:null
video:true
videoCompression:32
videosFolder:"cypress/videos"
videoUploadOnPasses:true
viewportHeight:660
viewportWidth:1000
waitForAnimations:true
watchForFileChanges:true
}

Opsi

Kami dapat mengubah opsi default Cypress dengan meneruskan argumen apa pun yang kompatibel dengan proyek kami. Seperti namanya, cypress.json adalah file JSON, jadi kami harus meneruskan argumen kami dalam format JSON. Dalam kode VS kami, Anda dapat melihat bahwa cypress.json kosong tanpa argumen yang diteruskan ke sana. Sekarang mari kita lihat berbagai opsi yang dapat kita lewati di file JSON kita.

Opsi Global

Kami dapat meneruskan opsi global ke argumen yang perlu diakses secara global. Misalnya, pada tabel di bawah ini, kolom Opsi mewakili kata kunci yang akan kita lewati dalam file JSON kita; Default menunjukkan nilai default dari opsi tertentu yang ditetapkan oleh Cypress, dan Deskripsi menunjukkan arti dari opsi tersebut.

pilihanDefaultDeskripsi
baseUrlnullKami dapat mengatur URL secara global alih-alih meneruskan setiap file. Dapat digunakan untuk cy.visit() or cy.request() perintah
clientCertificates[]Anda dapat menggunakan opsi ini untuk mengonfigurasi sertifikat klien berdasarkan URL
env{}Anda dapat meneruskan variabel lingkungan apa pun sebagai nilai. Opsi ini akan berguna jika kita menguji aplikasi kita di lingkungan yang berbeda seperti staging atau produksi.
watchForFileChangestrueOpsi ini memeriksa apakah Cypress mengawasi dan memulai ulang pengujian pada setiap perubahan file yang dilakukan.
portnullKita bisa melewati nomor port pada hosting Cypress. Port acak dihasilkan, tetapi kami dapat menambahkan nomor port yang kami butuhkan.
numTestsKeptInMemory50Opsi ini adalah jumlah snapshot pengujian dan data perintah yang disimpan dalam memori. Jika ada konsumsi memori yang tinggi di browser selama uji coba, kami dapat mengurangi jumlahnya.
retries{ "runMode": 0, "openMode": 0 }Opsi ini adalah untuk menentukan berapa kali untuk mencoba kembali tes yang gagal. Kami dapat mengonfigurasinya secara terpisah untuk lari cemara serta cemara terbuka.
redirectionLimit20Kami dapat mengonfigurasi batas berapa kali aplikasi dapat dialihkan sebelum terjadi kesalahan.
includeShadowDomfalseKemampuan untuk menavigasi di dalam Shadow DOM untuk berinteraksi dengan elemen. Secara default, ini disetel ke false. Jika aplikasi kami memiliki elemen apa pun yang memerlukan navigasi root bayangan, Anda dapat mengaturnya ke true.

Batas Waktu Cypress JSON

Timeout adalah salah satu konsep terpenting dalam kerangka otomatisasi apa pun. Cypress menyediakan berbagai opsi yang membantu dalam menangani batas waktu di skrip kami. Pertama, kita akan melihat opsi yang dapat kita konfigurasikan.

pilihanDefaultDeskripsi
defaultCommandTimeout4000Opsi ini adalah menunggu perintah berbasis DOM Elements dimuat. Ini dalam milidetik.
requestTimeout5000Waktu, dalam milidetik, untuk menunggu hingga permintaan perintah cy.wait() untuk pergi timeout.
responseTimeout30000Batas waktu ini adalah menunggu hingga respons dalam serangkaian perintah seperti  cy.request()cy.wait()cy.fixture()cy.getCookie()
cy.getCookies()cy.setCookie()cy.clearCookie()cy.clearCookies(), dan cy.screenshot() perintah
taskTimeout60000Batas waktu, dalam milidetik, untuk penyelesaian eksekusi cy.task() Command
execTimeout60000Kali ini dalam milidetik adalah menunggu untuk menyelesaikan eksekusi cy.exec() perintah,
yang merupakan penyelesaian dari perintah sistem
pageLoadTimeout60000Batas waktu ini menunggu page navigation events atau perintah yang berinteraksi
dengan halaman seperti cy.visit()cy.go()cy.reload()

Cypress Baca File JSON

Terkadang, kita perlu berinteraksi dengan folder atau file dalam proyek kita. Untuk berinteraksi, kita harus mengatur opsi tertentu di cypress.json file untuk memanipulasi file. Jadi, pertama-tama, mari kita lihat opsi yang tersedia di konfigurasi folder/file kita.

pilihanDefaultDeskripsi
downloadsFoldercypress/downloadsIni adalah jalur tempat file diunduh dan disimpan selama uji coba
fixturesFoldercypress/fixturesIni adalah jalur ke folder yang berisi file perlengkapan. Kita bisa lulus false untuk menonaktifkan penyimpanan file.
ignoreTestFiles*.hot-update.jsYou can pass this as a string or array of global patterns to ignore test files for the test run. However, it would be displayed in the test files.
integrationFoldercypress/integrationFile uji integrasi disimpan di jalur ini ke folder.
pluginsFilecypress/plugins/index.jsJalur ini adalah tempat plugin disimpan. Anda dapat meneruskan argumen sebagai false untuk menonaktifkan konfigurasi ini.
screenshotsFoldercypress/screenshotsScreenshots from the execution of cy.screenshot() command and test failure during cypress run are stored in this foldersupportFilecypress/support/index.jsHere the test files that load before the test are stored. You have the option to disable by passing false
testFiles**/*.*Jalur ke file uji yang perlu dimuat. Ini adalah string atau array pola global.
videosFoldercypress/videosJalur folder yang akan menyimpan video selama eksekusi pengujian

Tangkapan Layar dan Opsi Video

Kami dapat mengonfigurasi snapshot dan video kami di file cypress.json() kami, dan Cypress memberi kami beberapa opsi untuk menyesuaikan konfigurasi kami.

pilihanDefaultDeskripsi
screenshotOnRunFailuretrueOpsi untuk menyetel ke true atau false apakah Cypress mengambil tangkapan layar selama kegagalan pengujian saat cypress berjalan. Ini diatur ke true secara default
trashAssetsBeforeRunstrueOpsi ini adalah untuk membuang aset di videosFolder, downloadsFolder serta screenshotsFolder sebelum setiap cypress run
videoCompression32Opsi ini adalah kualitas kompresi video yang diukur dalam Constant Rate Factor (CRF). Dengan melewati false, Anda juga dapat menonaktifkan opsi ini. Anda dapat memberikan nilai dari 0 hingga 51, di mana nilai terendah memberikan kualitas yang lebih baik.
videosFoldercypress/videosFolder tempat video tes disimpan.
videotrueNilai Boolean untuk merekam video eksekusi pengujian dengan cypress run.
videoUploadOnPassestrueOpsi ini adalah untuk mengunggah video ke Dasbor ketika semua kasus uji dalam file spesifikasi lulus.

Area Pandang dan Kemampuan Bertindak

Anda dapat mengonfigurasi dan meneruskan nilai untuk mengubah tinggi dan lebar viewport dengan opsi yang disediakan oleh Cypress. Opsi kemampuan tindakan juga dapat dikonfigurasi.

pilihanDefaultDeskripsi
viewportHeight660Ini untuk memberikan ketinggian default untuk aplikasi dalam piksel. Kita dapat menimpa perintah ini dengan cy.viewport()
viewportWidth1000Opsi untuk lebar area pandang dalam piksel untuk aplikasi. Dapat ditimpa dengan cy.viewport() perintah.
animationDistanceThreshold5Nilai ambang batas untuk jarak yang diukur dalam piksel di mana suatu elemen harus melebihi mempertimbangkan waktu untuk menghidupkan.
waitForAnimationstrueOpsi untuk menunggu elemen menyelesaikan animasi sebelum melakukan perintah apa pun.
scrollBehaviortopIni adalah opsi viewport yang harus menggulir ke elemen sebelum melakukan perintah apa pun. Pilihan yang tersedia adalah 'center''top''bottom''nearest', atau false, Dimana false menonaktifkan pengguliran.

Contoh JSON Cypress

Sebelumnya, kami melihat konfigurasi berbeda yang dapat kami lewati di cypress.json mengajukan. Sekarang, kita akan melihat contoh bagaimana menggunakannya dalam proyek kita.

Mengganti nilai default dalam file cypress.json

Dalam kode VS kami, buka cypress.json mengajukan. Kami akan menimpa defaultCommandTimeout perintah untuk 8000.

{
    "defaultCommandTimeout" : 8000
}

Ini adalah tampilannya di proyek kode VS kami.

file cypress.json

Dengan mengubah cypress.json file, itu berlaku untuk seluruh kerangka kerja. Kami dapat memverifikasi dengan menavigasi ke pengaturan Cypress kami. Itu telah berubah dari nilai default 4000 untuk 8000

Nilai default pengaturan Cypress

Mengganti nilai default melalui skrip pengujian

Kami juga dapat memanipulasi nilai default melalui skrip pengujian kami. Alih-alih lewat di cypress.json file, kami akan meneruskannya di file pengujian kami.


//Changing the timeout from 4 seconds to 8 seconds
Cypress.config('defaultCommandTimeout',8000)

// Test code
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
cy.get('#login_btn').click()

Dengan cara ini, kami dapat mengganti nilai default di file pengujian kami. Namun, ini tidak memengaruhi perubahan konfigurasi apa pun pada tingkat kerangka kerja. Cypress mengutamakan nilai dalam cypress.json. Terakhir, dibutuhkan konfigurasi global.

Array JSON Perlengkapan Cypress

Cypress cy.fixture() adalah fungsi yang memuat sekumpulan data tetap dalam sebuah file. Kita dapat menggunakan fixture sebagai JSON untuk memuat nilai atau larik apa pun dalam file JSON. Pertama, mari kita pahami cara mengakses file JSON di proyek kita.

File JSON saya memiliki dua properti: nama pengguna dan kata sandi. Nama file JSON saya adalah examples.json.

{
"email": "test@gmail.com",
"password" : test123
}

Dalam file spesifikasi kami, kami akan mengakses perlengkapan kami dengan perintah cy.fixture() dan konsep alias.

 cy.fixture('example.json').as('example')

 //Using the alias name to this keyword, So we can use globally  
        const userObj = this.userData
//looping our .json data with a new variable users
         cy.get(userData).each((users) => 
         {
              //Write the test code.
        cy.get('#username').type(users.email)
        cy.get('#pswd').type(users.password)
          }       

Cypress env JSON

Variabel lingkungan digunakan di banyak proyek dalam organisasi. Kami menggunakan variabel lingkungan

  • ketika nilai dinamis di mesin yang berbeda
  • ketika kami ingin menguji di bawah lingkungan yang berbeda seperti pementasan, pengujian, pengembangan, produksi/langsung

Kasus-kasus ini mengharuskan kita untuk mendefinisikan variabel lingkungan. Namun, jika kita menetapkan variabel env dalam satu file spesifikasi, itu tidak tercermin di seluruh file spesifikasi lainnya. Ini karena Cypress menjalankan setiap file spesifikasi secara independen. Dengan cara ini, kita perlu mengonfigurasi variabel env secara terpisah.

Kami mengakses file lingkungan kami dari file Cypress JSON kami, yaitu, cypress.json mengajukan. Jadi kami akan diminta untuk menetapkan opsi di . kami cypress.json file dan menggunakannya di seluruh file spesifikasi kami. Jadi mari kita selami contoh kita.

Kami dapat mengatur variabel lingkungan kami di file konfigurasi kami atau cypress.env.json file.

Mengatur variabel lingkungan dalam file cypress.json

Kami menetapkan properti env dengan pasangan nilai kunci. Nilai apa pun yang diteruskan di bawah kata kunci env berada di bawah variabel lingkungan, dan Cypress mengambil argumen dari env kata kunci. Sintaksnya terlihat seperti di bawah ini.

{
  "env": {
    "key1": "value1",
    "key2": "value2"
  }
}

Jika kita ingin mengakses env variabel dalam file spesifikasi kami, kami menetapkannya seperti yang disebutkan di bawah ini.

Cypress.env() //returns both the key1,value1 and key2, value2

Cypress.env(key1) //returns only the value1

Kami akan menambahkan env konfigurasi di proyek kami dan akan mengaksesnya di file spesifikasi kami. Di kami cypress.json file, tambahkan konfigurasi berikut. Kami sedang mengatur URL properti dan menugaskannya ke URL kami. Di Sini, URL adalah kuncinya, dan https://lambdageeks.com/technology/ adalah nilai.

{
  "env" : {
      "url" : "https://lambdageeks.com/technology/"
    }
}

Karena kami telah mendeklarasikan konfigurasi, kami akan mengaksesnya di file spesifikasi kami. Itu terlihat seperti di bawah ini. Seperti disebutkan di atas, kami akan menggunakan Cypress.env() metode untuk mengakses variabel env.

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

describe('Cypress Example ', function () {

    it('accessing the environment variable', function () {

        //Calling URL from cypress.json
        cy.visit(Cypress.env('url'));

    })
})

Mengatur variabel lingkungan di file cypress.env.json

Kami dapat menetapkan variabel lingkungan kami di file cypress env JSON kami. Untuk itu, kita harus membuat file baru bernama cypress.env.json pada akar proyek. Kami tidak akan meminta env kata kunci; sebagai gantinya, kita dapat langsung mengaksesnya dengan melewatkan pasangan nilai kunci.

{
    "key1": "value1",
    "key2": "value2"
}

Mari kita lihat cara menugaskannya di cypress.env.json file.

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}
Pembuatan file cypress.env.json

Seperti yang Anda lihat di atas, kami telah membuat file baru, cypress.env.json, dan menambahkan kami URL properti. Cara mengakses variabel lingkungan akan sama seperti yang disebutkan di atas pada bagian sebelumnya.

Reporter JSON Cypress

Seperti yang kita ketahui, Cypress dibangun di atas Mocha; reporter apa pun yang dibuat untuk Mocha dapat digunakan. Kami dapat mengonfigurasi reporter dalam file JSON kami secara global di . kami cypress.json file.

reporterspecDi sini, Anda dapat menentukan reporter yang harus dihasilkan selama menjalankan cypress. Ini diatur ke spec sebagai reporter default.
reporterOptionsnullIni untuk menentukan opsi yang didukung untuk reporter.

Opsi yang disebutkan di atas adalah konfigurasi yang diatur dalam reporter secara default. Selain itu, spec reporter diatur secara default. Jadi, di reporter, kita bisa mengatur reporter apa saja yang kompatibel dengan Mocha. reporterOptions adalah untuk menentukan opsi yang didukung tergantung pada reporter yang kami konfigurasikan.

Mari kita lihat cara mengkonfigurasi reporter di kami cypress.json file.

Mari kita anggap multi reporter mochawesome sebagai reporter kita. Kami pertama-tama akan menginstal reporter dan menambahkannya ke kami cypress.json file.

npm install --save-dev mocha cypress-multi-reporters mochawesome

Instal reporter dengan meneruskan perintah di atas di baris perintah. Sekarang, di kami cypress.json file, tambahkan properti berikut.

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
      "reportDir": "cypress/reports/multireports",
      "overwrite": false,
      "html": false,
      "json": true
    }

Kami akan memahami masing-masing properti secara rinci.

reporter: Nama reporter yang kami konfigurasikan dalam proyek kami

laporDir: Direktori tempat kita akan menampilkan hasil kita.

menimpa: Bendera ini meminta untuk menimpa laporan sebelumnya.

html: Menghasilkan laporan penyelesaian tes.

json: Apakah akan menghasilkan file JSON pada penyelesaian tes.

Reporter Cypress di file cypress JSON

Cypress paket-lock.json

The package-lock.json file dibuat secara otomatis untuk operasi apa pun ketika npm memodifikasi modul node atau file package.json. Saat kami menambahkan opsi apa pun atau instal semua dependensi baru ke Cypress kami paket file JSON, lalu Cypress package-lock.json diperbarui secara otomatis.

Paket Cypess.lock JSON file melacak setiap paket dan versinya sehingga instalasi dipertahankan dan diperbarui pada setiap npm install secara global. Jadi dalam file JSON paket Cypress kami, ketika kami memperbarui versi atau menambahkan ketergantungan apa pun, package-lock.json juga diperbarui, dan kami tidak ingin membuat perubahan apa pun padanya.

File paket-lock.json Cypress
Gulir ke Atas