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.
Daftar Isi
- File JSON Cypress
- Opsi JSON Default
- Opsi Global
- Batas Waktu Cypress JSON
- Cypress Baca File JSON
- Opsi Tangkapan Layar dan Video
- Area Pandang dan Kemampuan Bertindak
- Contoh JSON Cypress
- Array JSON Perlengkapan Cypress
- Cypress env JSON
- Reporter JSON Cypress
- Cypress paket-lock.json
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.
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.
| pilihan | Default | Deskripsi |
|---|---|---|
baseUrl | null | Kami 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. |
watchForFileChanges | true | Opsi ini memeriksa apakah Cypress mengawasi dan memulai ulang pengujian pada setiap perubahan file yang dilakukan. |
port | null | Kita bisa melewati nomor port pada hosting Cypress. Port acak dihasilkan, tetapi kami dapat menambahkan nomor port yang kami butuhkan. |
numTestsKeptInMemory | 50 | Opsi 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. |
redirectionLimit | 20 | Kami dapat mengonfigurasi batas berapa kali aplikasi dapat dialihkan sebelum terjadi kesalahan. |
includeShadowDom | false | Kemampuan 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.
| pilihan | Default | Deskripsi |
|---|---|---|
defaultCommandTimeout | 4000 | Opsi ini adalah menunggu perintah berbasis DOM Elements dimuat. Ini dalam milidetik. |
requestTimeout | 5000 | Waktu, dalam milidetik, untuk menunggu hingga permintaan perintah cy.wait() untuk pergi timeout. |
responseTimeout | 30000 | Batas 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 |
taskTimeout | 60000 | Batas waktu, dalam milidetik, untuk penyelesaian eksekusi cy.task() Command |
execTimeout | 60000 | Kali ini dalam milidetik adalah menunggu untuk menyelesaikan eksekusi cy.exec() perintah,yang merupakan penyelesaian dari perintah sistem |
pageLoadTimeout | 60000 | Batas waktu ini menunggu page navigation events atau perintah yang berinteraksidengan 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.
| pilihan | Default | Deskripsi |
|---|---|---|
downloadsFolder | cypress/downloads | Ini adalah jalur tempat file diunduh dan disimpan selama uji coba |
fixturesFolder | cypress/fixtures | Ini 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. | ||
integrationFolder | cypress/integration | File uji integrasi disimpan di jalur ini ke folder. |
pluginsFile | cypress/plugins/index.js | Jalur 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 | ||
testFiles | **/*.* | Jalur ke file uji yang perlu dimuat. Ini adalah string atau array pola global. |
videosFolder | cypress/videos | Jalur 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.
| pilihan | Default | Deskripsi |
|---|---|---|
screenshotOnRunFailure | true | Opsi untuk menyetel ke true atau false apakah Cypress mengambil tangkapan layar selama kegagalan pengujian saat cypress berjalan. Ini diatur ke true secara default |
trashAssetsBeforeRuns | true | Opsi ini adalah untuk membuang aset di videosFolder, downloadsFolder serta screenshotsFolder sebelum setiap cypress run |
videoCompression | 32 | Opsi 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. |
videosFolder | cypress/videos | Folder tempat video tes disimpan. |
video | true | Nilai Boolean untuk merekam video eksekusi pengujian dengan cypress run. |
videoUploadOnPasses | true | Opsi 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.
| pilihan | Default | Deskripsi |
|---|---|---|
viewportHeight | 660 | Ini untuk memberikan ketinggian default untuk aplikasi dalam piksel. Kita dapat menimpa perintah ini dengan cy.viewport() |
viewportWidth | 1000 | Opsi untuk lebar area pandang dalam piksel untuk aplikasi. Dapat ditimpa dengan cy.viewport() perintah. |
animationDistanceThreshold | 5 | Nilai ambang batas untuk jarak yang diukur dalam piksel di mana suatu elemen harus melebihi mempertimbangkan waktu untuk menghidupkan. |
waitForAnimations | true | Opsi untuk menunggu elemen menyelesaikan animasi sebelum melakukan perintah apa pun. |
scrollBehavior | top | Ini 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.
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
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 value1Kami 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/"
}
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.
reporter | spec | Di sini, Anda dapat menentukan reporter yang harus dihasilkan selama menjalankan cypress. Ini diatur ke spec sebagai reporter default. |
reporterOptions | null | Ini 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 mochawesomeInstal 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.
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.
