Halo semuanya!
Nama saya Roman Mostafin. Saya seorang penguji otomatis di Clover dan biasanya menulis autotest di pytest + selenium. Baru-baru ini, tim pengembangan front-end kami mulai menggunakan Cypress untuk menulis tes UI pada proyek Smart Locomotive untuk mengotomatisasi pengujian regresi. Saya mengajukan diri untuk membantu mereka dan diilhami oleh teknologi ini. Pada artikel ini saya akan berbicara tentang Cypress, dan cara membuat tes pertama saya di sana.Cypress adalah kerangka kerja yang relatif baru untuk menulis tes Javascript. Dia menyebarkan browsernya dan menyuntikkan tes ke dalam kode halaman.Cypress memiliki keunggulan sebagai berikut:- mendukung penulisan modular, integrasi dan uji ujung ke ujung,
- memiliki dokumentasi yang baik
- memiliki antarmuka yang ramah dan intuitif untuk meluncurkan, melihat, dan debugging,
- memiliki utilitas yang berguna untuk menyederhanakan penulisan ujian.
Sebagai hasilnya, kami memiliki kerangka kerja universal dan nyaman untuk menulis berbagai jenis tes.Teori
Untuk menulis tes, enam fungsi dasar diperlukan. Pertimbangkan mereka dan beberapa argumen untuk mereka, yang dibutuhkan sebagai contoh.1. cy.visit ()
Metode ini digunakan untuk masuk ke halaman aplikasi. Sebagai argumen, dibutuhkan string dengan alamat halaman aplikasi:cy.visit(‘http:
2. cy.get ()
Metode ini digunakan untuk mendapatkan elemen dari model DOM halaman web. Dibutuhkan argumen berikut:- element locator - alamat tempat elemen dapat ditemukan;
- timeout - waktu selama cypress akan mencari elemen pada halaman (secara default adalah 4 detik).
cy.get(‘div[class=”topbar”]’, {timeout: 3000})
3. .type ()
Metode .type digunakan untuk mengisi formulir teks dan berbagai bidang. Ini memiliki argumen berikut:- Teks yang akan dimasukkan adalah teks dalam representasi string. Juga, teks dapat mengindikasikan perintah keyboard yang disorot dengan kurung kurawal;
- timeout - penundaan sebelum menjalankan perintah type.
cy.get(‘input’).type(‘Hello world’, {timeout: 3000})
4. cy.wait ()
Metode ini digunakan untuk menghentikan sementara eksekusi perintah. Itu juga dapat digunakan untuk menunggu permintaan HTTP selesai. Ini memiliki batas waktu argumen - langsung batas waktu.cy.wait(3000)
5. cy.fixture ()
Metode ini digunakan untuk mendapatkan data uji. Menerima nama file json sebagai input.6. cy.should ()
Metode untuk memeriksa ekspresi. Ia menerima argumen berikut:- perintah untuk perbandingan adalah kondisi di mana elemen akan diperiksa;
- hasil yang diharapkan - hasil yang diharapkan dari cek.
Praktek
Mari kita ambil formulir otorisasi Yandex dan, sebagai contoh, kami akan memverifikasi otorisasi dengan login yang tidak ada dan otorisasi dengan kata sandi yang tidak ada. Untuk melakukan ini, buat persiapan awal:1. Buat folder untuk proyek baru.2. Buka folder proyek dan jalankan perintah untuk menginstal Cypress:npm install cypress --save-dev
3. Jalankan perintah cypress:npx cypress open
4. Setelah memulai, pastikan bahwa hierarki berikut muncul di direktori proyek:
Sekarang Anda perlu membuat fixture. Kami membutuhkannya untuk memisahkan data uji dari tes itu sendiri.1. Buat file 'cypressTest.json' di folder 'fixt' dengan konten berikut:
2. Selanjutnya, di folder 'integrasi' buat file bernama 'habr_cypress_test.spec.js':
3. Buat deskripsi dari seluruh kasus uji menggunakan fungsi ' jelaskan ':
4. Di dalam fungsi' jelaskan 'kami akan membuat tes kami. Kami akan menulis judultes pertama :
5. Langkah selanjutnya adalah menulis panggilan data dari fixture:
Akhirnya, kami membuat tes itu sendiri, menggunakan pengetahuan fungsi Cypress.
Dengan analogi, kami membuat tes kedua.
Kita pergi ke aplikasi Cypress, temukan tes kami dan klik namanya.
Selanjutnya, halaman browser yang menjalankan Cypress terbuka, dan tes dimulai: di sebelah kiri dalam kolom terpisah Anda dapat melihat langkah-langkah rinci dari proses. Anda harus menunggu tes selesai.
Selamat, Anda menulis tes Cypress pertama Anda!PSSaya ingin berterima kasih kepada tim front-end kami, dan khususnya Adele Khamatov, atas bantuan mereka dalam mempelajari Cypress di proyek ini.