Daftar Isi
- Apa itu Perintah Cypress?
- Perintah Interaksi UI disediakan oleh Cypress
- Perintah Klik Kanan Cypress
- Perintah Klik Dua Kali Cypress
- Perintah Klik Cypress
- Perintah Pemicu Cypress
- Perintah Jenis Cypress
- Perintah Pilih Cypress
- Perintah Periksa Cypress
- Perintah Hapus Cypress
- Apakah Perintah Cypress tidak sinkron?
- Perintah Kustom Cypress
- Perintah Chaining Assertion di Cypress
- Menimpa perintah Cypress yang ada
- Perintah Rantai Cypress
- Perintah Kustom Induk di Cypress
- Perintah Kustom Anak di Cypress
- Perintah Kustom Ganda di Cypress
- Perintah Kustom Cypress dengan Contoh
- Perintah Impor Cypress
- Perintah Kustom Cypress IntelliSense
Apa itu Perintah Cypress?
Cypress memberi kami API dan metode untuk berinteraksi dengan UI aplikasi. Mereka dikenal sebagai Perintah Cypress dan membantu interaksi aplikasi web. Semua perintah yang tersedia memiliki metode bawaan dan kami hanya akan memanggil metode dalam kasus pengujian kami. Perintah Cypress akan mensimulasikan tindakan serupa dengan pengguna yang mencoba melakukan operasi pada aplikasi.
Perintah Interaksi UI disediakan oleh Cypress
Ada berbagai perintah yang disediakan oleh Cypress yang berinteraksi dengan UI. Kami akan melihat daftar semua perintah secara rinci.
- .klik()
- .dblklik()
- .klik kanan()
- .Tipe()
- .jernih()
- .memeriksa()
- .hapus centang()
- .Pilih()
- .pemicu()
Perintah Klik Cypress
.klik() – Perintah ini untuk klik elemen apa pun di DOM.
Berikut ini adalah sintaks untuk perintah klik:
.click()
.click(options)
.click(position)
.click(position, options)
.click(xCoordinate, yCoordinate)
.click(xCoordinate, yCoordinate, options) Seperti yang Anda lihat di atas, klik menerima parameter seperti pilihan, posisi, serta koordinat.
Opsi
Kemungkinan opsi yang dapat diteruskan ke klik adalah
| pilihan | Default | Deskripsi |
|---|---|---|
| altKey | palsu | Aktifkan tombol Alternatif (Tombol Opsi di Mac), sebagai optionKey |
ctrlKey | palsu | Nyalakan tombol kontrol. Juga dikenal sebagai: controlKey. |
| metaKey | palsu | Mengaktifkan kunci meta (tombol Windows di Windows atau tombol perintah di Mac). Juga: commandKey, cmdKey. |
| tombol Shift | palsu | Mengaktifkan tombol shift |
| mencatat | benar | Mencetak log di baris perintah |
| kekuatan | palsu | Opsi ini memaksa tindakan dan menonaktifkan kemampuan menunggu untuk ditindaklanjuti |
| beberapa | palsu | Klik beberapa elemen secara berurutan |
| batas waktu | defaultCommandTimeout | Waktu untuk .click() tunggu sebelum menyelesaikan waktu habis |
| tungguUntukAnimasi | tungguUntukAnimasi | Opsi untuk menunggu elemen menyelesaikan animasi sebelum menjalankan perintah |
posisi
Berbagai jenis posisi yang dapat diteruskan ke .click() adalah
- Tengah (kegagalan)
- meninggalkan
- benar
- puncak
- kiri atas
- kanan atas
- dasar
- kiri bawah
- kanan bawah
Contoh
cy.get('btn').click() //mengklik tombol cy.get('btn').click({ force: true }) //mengklik tombol dengan melewatkan opsi 'force' sebagai true cy. get('btn').click('bottomRight') // mengklik tombol di posisi kanan bawah cy.get('btn').click(10, 70, { force: true }) // mengklik tombol dengan nilai posisi dan gaya true
Perintah Klik Dua Kali Cypress
Klik dua kali dapat dicapai dengan menggunakan dblclick() sintaks di Cypress.
Sintaksis
.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)Opsi
.dblclick() menerima semua opsi yang diterima oleh .click(). Anda dapat menemukan opsi di bagian di atas.
posisi
Semua kemungkinan posisi yang ditentukan dalam .click() juga tersedia untuk dblclick(). Daftar posisi dapat ditemukan di bagian atas.
Contoh
cy.get('button').dblclick() // Klik dua kali pada tombol cy.focused().dblclick() // Klik dua kali pada elemen dengan fokus cy.contains('Home').dblclick() // Double klik pada elemen pertama yang berisi 'Home' cy.get('button').dblclick('top') // Klik dua kali pada tombol di posisi teratas cy.get('button').dblclick(30, 10) // Klik dua kali pada koordinat 30 dan 10
Perintah Klik Kanan Cypress
Perintah Cypress ini, klik kanan elemen DOM .rightclick() perintah tidak akan membuka menu konteks browser.rightclick() digunakan untuk menguji penanganan peristiwa terkait klik kanan dalam aplikasi seperti contextmenu.
Sintaksis
.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)Opsi
Seperti yang kita lihat di atas, semua opsi yang diterima oleh .click() perintah dapat dikonfigurasi dengan .rightclick() perintah juga.
posisi
Semua kemungkinan posisi yang bisa dilewati ke .rightclick() sama dengan .click() disebutkan di atas.
Contoh
cy.get('.welcome').rightclick() // Klik kanan pada .welcome cy.focused().rightclick() // Klik kanan pada elemen dengan fokus cy.contains('January').rightclick() / / Klik kanan pada elemen pertama yang berisi 'Januari' cy.get('button').dblclick('topRight') // Klik dua kali pada tombol di posisi kanan atas cy.get('button').dblclick(80, 20 ) // Klik dua kali pada koordinat 80 dan 20
Perintah Jenis Cypress
.type() perintah memasukkan nilai ke dalam elemen DOM.
Sintaksis
.type(text)
.type(text, options)kasus
.type() menerima string sebagai argumen. Nilai diteruskan ke .type() dapat mencakup salah satu dari urutan karakter khusus yang diberikan di bawah ini.
| Urutan | Catatan |
|---|---|
{{} | Memasuki literal { kunci |
{backspace} | Menghapus karakter dari kanan ke kiri kursor |
{del} | Menghapus karakter dari kiri ke kanan kursor |
{downarrow} | Menggeser kursor ke bawah |
{end} | Menggeser kursor ke akhir baris |
{enter} | Ketik tombol Enter |
{esc} | Ketik tombol Escape |
{home} | Menggeser kursor ke awal baris |
{insert} | Posisikan karakter di sebelah kanan kursor |
{leftarrow} | Memindahkan kursor ke kiri |
{movetoend} | Menggeser kursor ke akhir elemen yang dapat diketik |
{movetostart} | Menggeser kursor ke awal elemen yang dapat diketik |
{pagedown} | Gulir ke bawah |
{pageup} | Gulir ke atas |
{rightarrow} | Menggeser kursor ke kanan |
{selectall} | Pilih semua teks dengan membuat selection range |
{uparrow} | Menggeser kursor ke atas |
Opsi
Kita dapat meneruskan objek sebagai opsi untuk mengubah perilaku default .type()
| pilihan | Default | Deskripsi |
|---|---|---|
delay | 10 | Opsi untuk Penundaan waktu setelah setiap penekanan tombol |
force | false | Memaksa tindakan untuk dijalankan dan dinonaktifkan menunggu kemampuan bertindak |
log | true | Menampilkan log di Log perintah |
parseSpecialCharSequences | true | Parsing karakter khusus untuk string yang dikelilingi oleh {}, Seperti {esc}. Anda dapat mengatur opsi ke false untuk memasukkan karakter literal. |
release | true | Opsi ini memungkinkan pengubah tetap diaktifkan di antara perintah |
scrollBehavior | scrollBehavior | Posisi viewport ke tempat elemen yang akan digulir sebelum menjalankan perintah apa pun |
timeout | defaultCommandTimeout | Saatnya menunggu .type() perintah untuk diselesaikan sebelum waktu habis |
waitForAnimations | waitForAnimations | Untuk mengatakan apakah akan menunggu elemen untuk menyelesaikan animasi sebelum menjalankan perintah apapun. |
Contoh
Mari kita lihat contoh untuk .type() Command
cy.get('textarea').type('Hey there') // masukkan nilai di area teks cy.get('body').type('{shift}') //mengaktifkan tombol shift cy.get ('body').type('{rightarrow}') //ketik event panah kanan
Perintah Hapus Cypress
Perintah Hapus akan menghapus nilai di area input atau bidang teks.
Sintaksis
Sintaks untuk perintah clear adalah sebagai berikut.
.clear()
.clear(options)Opsi
Kami akan melihat opsi yang dapat diteruskan ke .clear() perintah.
| pilihan | Default | Deskripsi |
|---|---|---|
force | false | Ini akan memaksa tindakan dan menonaktifkan menunggu kemampuan tindakan terjadi |
log | true | Menampilkan perintah di log Perintah |
scrollBehavior | scrollBehavior | Posisi viewport ke tempat elemen harus digulir sebelum melakukan perintah |
timeout | defaultCommandTimeout | Opsi ini adalah waktu untuk menunggu .clear() untuk diselesaikan sebelum waktu habis |
waitForAnimations | waitForAnimations | Ini akan menunggu elemen untuk menyelesaikan animasi sebelum menjalankan perintah. |
Contoh
Mari kita lihat contoh untuk perintah yang jelas
cy.get('[type="text"]').clear() // Hapus input jenis teks cy.get('textarea').type('Welcome!').clear() // Hapus textarea cy .focused().clear() // Hapus input/textarea yang terfokus
Perintah Periksa Cypress
Perintah check akan mencentang atau dengan kata yang lebih sederhana, mencentang kotak centang atau tombol radio. Anda dapat menghapus centang pada kotak centang atau tombol radio dengan menggunakan .uncheck() perintah.
Sintaksis
Kami akan memahami sintaks untuk perintah cek di Cypress.
//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)
//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)Opsi
Opsi yang memungkinkan yang dapat diteruskan untuk mencentang/menghapus centang perintah adalah opsi yang sama dengan perintah hapus yang tercantum di atas
Contoh
Kita akan melihat contoh bagaimana kita dapat menggunakan perintah centang dan hapus centang.
cy.get('[type="checkbox"]').check() // Centang elemen kotak centang cy.get('[type="radio"]').first().check() // Periksa radio pertama element cy.get('[type="radio"]').check('Male') //Cek elemen radio yang memiliki Male cy.get('[type="checkbox"]').uncheck() / /Hapus centang elemen kotak centang cy.get('[type="radio"]').uncheck() //Hapus centang elemen radio pertama cy.get('[type="checkbox"]').uncheck('Breakfast') // Hapus centang pada elemen sarapan
Perintah Pilih Cypress
Perintah pilih Cypress memungkinkan Anda untuk memilih elemen dalam a menandai.
Sintaksis
Berikut ini adalah sintaks untuk perintah pilih
.select(value)
.select(values)
.select(value, options)
.select(values, options)Opsi
Kami dapat meneruskan opsi untuk mengubah perilaku default dari perintah pilih.
| pilihan | Default | Deskripsi |
|---|---|---|
force | false | Opsi ini memaksa tindakan untuk dilakukan dan menonaktifkan kemampuan menunggu untuk ditindaklanjuti |
log | true | Menampilkan log di log Perintah dan ditetapkan sebagai benar secara default |
timeout | defaultCommandTimeout | Opsi ini adalah waktu untuk menunggu .select() untuk diselesaikan sebelum waktu habis |
Contoh
Mari kita lihat contoh untuk perintah pilih
cy.get('select').select('butterfly') // Pilih opsi 'butterfly' cy.get('select').select(0) // pilih elemen dengan indeks 0 cy.get('select ').select(['parrot', 'peacock']) //memilih opsi parrot dan peacock
Perintah Pemicu Cypress
Perintah pemicu membantu memicu peristiwa apa pun pada elemen.
Sintaksis
Kami akan melihat sintaks untuk mengakses perintah pemicu
.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)pilihan
Perintah pemicu menerima semua opsi yang disebutkan untuk .clear() memerintah. Selain itu, ada beberapa opsi yang dapat kami konfigurasikan yang tercantum di bawah ini.
| pilihan | Default | Deskripsi |
|---|---|---|
bubbles | true | Apakah acara harus menggelembung |
cancelable | true | Apakah acara tersebut dapat dibatalkan |
eventConstructor | Event | Konstruktor untuk membuat objek acara (mis MouseEvent, keyboardEvent) |
Contoh
Mari kita berbagai cara menggunakan .trigger() dalam kode
cy.get('a').trigger('mouseover') // Memicu peristiwa mouseover pada tautan cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown dipicu di button 0 cy.get('button').trigger('mouseup', topRight, { bubble: false }) //mouseup dipicu pada posisi topRight dengan menyetel gelembung sebagai false
Apakah perintah Cypress tidak sinkron?
Semua perintah Cypress tidak sinkron. Mereka antri untuk dieksekusi di lain waktu dan tidak akan menunggu penyelesaian perintah. Perintah Cypress tidak melakukan apa pun pada saat mereka dipanggil, sebaliknya mereka menyimpannya untuk nanti untuk dieksekusi. Anda dapat memahami perilaku asinkron Cypress disini
Perintah Rantai Cypress
Di Cypress, kita dapat menggunakan serangkaian perintah untuk berinteraksi dengan elemen di DOM. Sangat penting untuk memahami bagaimana rantai perintah bekerja secara internal. Jika kita merantai perintah pada baris tertentu, maka Cypress akan menangani janji berdasarkan rantai perintah dan akan menghasilkan perintah berdasarkan subjek ke perintah berikutnya, hingga rantai perintah berakhir atau terjadi kesalahan.
Cypress memungkinkan kita untuk mengklik elemen atau mengetik ke dalam elemen menggunakan .click() or .type() perintah dengan mendapatkan elemen menggunakan cy.get() or cy.contains(). Mari kita lihat contoh sederhana dari perintah chaining
cy.get('textarea').type('Apa kabar?')
Dalam contoh di atas, cy.get() adalah satu perintah Cypress dan .type() adalah perintah lain, di mana kita merantai .type() perintah ke cy.get() perintah, menyuruhnya mengetik ke subjek yang dihasilkan dari cy.get() elemen. Demikian pula, kita dapat mengaitkan semua perintah yang telah kita bahas di atas.
Merantai Perintah Penegasan di Cypress
Mirip dengan merantai beberapa perintah menggunakan Cypress, kami juga dapat mengaitkan pernyataan dengan perintah. Pernyataan adalah perintah yang memungkinkan Anda untuk menggambarkan diharapkan keadaan atau perilaku aplikasi. Cypress akan menunggu hingga elemen mencapai status yang diharapkan, dan pengujian akan gagal jika pernyataan tidak lulus. Kita akan melihat bagaimana kita bisa menggunakan perintah chaining dalam menegaskan sebuah elemen.
cy.get('button').should('be.disabled') //mengharapkan apakah tombol harus dinonaktifkan cy.get('form').should('have.class', 'form-vertical') / /harapkan apakah formulir harus memiliki kelas sebagai 'form-vertical' cy.get('input').should('not.have.value', 'Name') // menegaskan apakah input tidak boleh memiliki nilai 'Name '
Seperti yang tercantum di atas, kami menggunakan cy.get() memerintahkan dan merantainya dengan .should() perintah pernyataan untuk mengharapkan perilaku berdasarkan hasil. Dengan cara ini, kita bisa menggunakan rantai perintah pernyataan di Cypress.
Perintah Kustom Cypress
Cypress memberi kami API untuk membuat perintah berdasarkan persyaratan kami. Perintah kustom Cypress mirip dengan perintah default yang sudah ada sebelumnya, kecuali: ditetapkan pengguna. Dengan perintah khusus, kita dapat bermain-main dengan perintah dan merangkainya berdasarkan kasus penggunaan kita. Perintah kustom Cypress berguna dalam alur kerja kami jika Anda perlu menggunakannya kembali berulang kali dalam pengujian.
Mari kita lihat sintaks untuk membuat perintah kustom baru di Cypress.
Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)di mana argumennya adalah sebagai berikut
nama – Nama perintah dalam string yang ingin kita tambahkan atau timpa
panggilan balikFn – Fungsi ini mengambil argumen yang diteruskan ke perintah
Pilihan – Lewati objek opsi apa pun untuk menentukan perilaku perintah
Note : opsi hanya didukung untuk perintah tambah dan tidak mendukung perintah penimpaan
| pilihan | Menerima | Default | Deskripsi |
|---|---|---|---|
prevSubject | Boolean, String or Array | false | mendefinisikan bagaimana menangani subjek yang dihasilkan sebelumnya. |
Pilihan yang prevSubject menerima adalah sebagai berikut
false– abaikan mata pelajaran sebelumnya (perintah induk)true– menerima mata pelajaran sebelumnya (perintah anak)optional– berikan apakah Anda ingin memulai rantai baru atau menggunakan rantai yang ada (perintah ganda)
Perintah Kustom Induk di Cypress
Kita akan melihat cara menambahkan perintah kustom induk di Cypress. Perintah induk akan selalu memulai rantai perintah baru, meskipun Anda telah merantai perintah sebelumnya. Perintah yang sebelumnya dirantai akan diabaikan dan perintah baru akan selalu dirantai. Beberapa perintah induk adalah cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()
Contoh
Kita akan melihat contoh cara menulis perintah kustom induk di Cypress
Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //mengklik tautan "Beli Sekarang" cy.clickLink('Beli Sekarang')
Dalam contoh di atas, 'klik Tautan' adalah nama perintah khusus kami. Ini akan mencari label. Di baris 2, perintah mendapat 'a', dan cari tautan yang berisi label dan klik elemennya. cy.clickLink() akan menjalankan tindakan dalam file pengujian dan mengklik tombol “Beli sekarang"Tautan.
Perintah Kustom Anak di Cypress
Perintah Kustom Anak di Cypress dirantai dari perintah induk atau perintah anak lainnya. Subjek dari perintah sebelumnya akan diserahkan ke fungsi panggilan balik.
Beberapa perintah Cypress yang dapat dirantai sebagai perintah anak adalah .click(), .trigger(), .should(), .find(), .as()
Contoh
Kami akan melihat contoh tentang cara merangkai perintah khusus anak
Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // bungkus subjek yang ada dan lakukan sesuatu dengannya cy.wrap(subject).click({force:true }) }) //mengakses forceClick di file pengujian cy.get("[data-test='panel-VALUES']").forceClick();
Dalam contoh di atas, kami menamai perintah khusus kami sebagai 'klik paksa'. Kami meneruskan argumen prevSubject ke elemen dan membungkus subjek yang ada. Dengan cy.wrap(), kami memaksa mengklik subjek. Kemudian di file uji, kami mengakses perintah khusus, 'klik paksa' pada suatu cy.get() perintah.
Perintah Kustom Ganda di Cypress
Perintah kustom ganda adalah hibrida antara perintah induk dan anak. Anda dapat memulai rantai perintah baru atau rantai perintah yang sudah ada. Perintah ganda sangat membantu jika kita ingin perintah kita bekerja dengan cara yang berbeda dengan atau tanpa subjek yang ada.
Beberapa perintah yang dapat digunakan untuk perintah ganda adalah cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()
Contoh
Mari kita lihat contoh cara menggunakan perintah kustom ganda
Cypress.Commands.add('getButton', { prevSubject: 'opsional' }, (subjek) => { if (subjek) { cy.get(subjek).get('btn').its('button'); } else { cy.get('btn').its('button'); } })
Dalam beberapa kasus, kita perlu mendapatkan tombol teks menggunakan getButton yang akan memperoleh semua tombol elemen. Sekarang kita dapat menggunakan getButton untuk merantai dengan elemen induk atau merantai elemen anak, di mana ia dapat memanggil elemen induk.
Karena prevSubject adalah opsional, kita dapat meneruskan subjek sebagai argumen atau menjalankan perintah tanpa subjek dalam file pengujian seperti di bawah ini
cy.getButton() // tanpa subjek cy.get('#loginBtn').getButton() // dengan subjek
Menimpa Perintah Cypress yang Ada
Kita dapat menimpa perintah Cypress yang sudah ada dan memodifikasi perilaku untuk menghindari pembuatan perintah lain yang akan mencoba menggunakan perintah asli di akhir.
Beberapa perintah Cypress asli yang dapat ditimpa adalah cy.visit(), cy.type(), cy.screenshot(), cy.contains()
Contoh
Mari kita lihat contoh tentang bagaimana kita dapat menimpa Cypress yang ada perintah.
Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // menentukan apakah argumen filter diteruskan if (typeof text === 'object') { options = teks teks = filter filter = tidak ditentukan } options.matchCase = false return originalFn(subjek, filter, teks, opsi) } )
Seperti yang kita lihat di atas, kita menggunakan Cypress.Commands.overwrite untuk mengubah perintah Cypress yang ada. Kami menamai perintah khusus kami sebagai contains dan kami meneruskan argumen untuk menentukan apakah argumen filter telah berlalu.
Perintah Impor Cypress
Di bagian ini, kita akan memahami cara mengimpor Perintah Cypress.
Kita harus membuat perintah khusus Cypress di cemara/support/commands.js mengajukan. Kami akan menambahkan perintah kustom dalam file command.js dan mengimpor file kasus uji kami untuk menggunakannya.
Perintah Kustom Cypress dengan Contoh
Kami akan memahami cara membuat perintah khusus dan menggunakannya dalam file spesifikasi kami dengan contoh waktu nyata.
Seperti yang kita lihat di atas, kita harus menambahkan perintah kustom baru di bawah perintah.js mengajukan. Dalam file itu, mari kita tambahkan perintah khusus untuk fungsi login
Cypress.Commands.add("login", (nama pengguna, kata sandi) => { //menambahkan perintah baru bernama login cy.get('[id=Email]').clear(); cy.get('[id =Email]').type(nama pengguna); cy.get('[id=Kata Sandi]').clear(); cy.get('[id=Kata Sandi]').type(sandi); cy.get( '[type=kirim]').klik(); });
Dalam kode di atas, kami menamai perintah khusus kami sebagai masuk. Di dalam perintah kustom, kami telah menambahkan langkah-langkah membersihkan bidang nama pengguna dan memasukkan nilai di bidang teks. Demikian pula, kami mengosongkan bidang dan menambahkan kata sandi di bidang kata sandi. Nanti kita klik tombol submit. Ini adalah perintah kustom sederhana yang menerima dua argumen: nama pengguna dan kata sandi. Kami akan memberikan nilai untuk nama pengguna dan kata sandi di file spesifikasi kami.
Sekarang mari kita buat file spesifikasi bernama customCommand.spec.js di bawah folder integrasi. File spesifikasi kami akan berisi kode berikut:
deskripsikan("Contoh Perintah Kustom", () => { it("harus login menggunakan perintah kustom", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .login("admin@yourstore.com", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
Seperti yang kita lihat di atas, kita mengakses perintah kustom kita sebagai cy.login() , di mana kami melewati nilai nama pengguna dan kata sandi.
Perintah Kustom Cypress IntelliSense
IntelliSense memberikan saran kode cerdas di IDE atau editor kode secara langsung saat kami menulis tes. Ini membantu dengan menampilkan popup yang menampilkan definisi perintah, tautan ke halaman dokumentasi dan contoh kode. Jika kita menggunakan editor kode modern seperti Visual Studio Code atau IntellJ, maka IntelliSense akan sangat berguna.
IntelliSense menggunakan TypeScript untuk memahami dan menampilkan sintaks. Jika kita menulis perintah khusus dan memberikan definisi TypeScript untuk perintah khusus, kita dapat menggunakan garis miring tiga untuk menampilkan IntelliSense, meskipun proyek kita hanya menggunakan JavaScript.
Untuk mengkonfigurasi IntelliSense, kita perlu menjelaskan kode dalam cemara/dukungan/index.d.ts file.
// ketik definisi untuk objek Cypress "cy" /// mendeklarasikan namespace Cypress { interface Chainable { /** * Login dengan kredensial * @example * cy.login(username,password) */ login(username: String, password: String): Chainable } }
Sekarang, kita harus memberi tahu file spesifikasi kita bahwa ada beberapa definisi TypeScript di indeks.d.ts mengajukan. Jadi, di awal file spesifikasi kami, tambahkan kode di bawah ini agar IntelliSense memberikan saran untuk kami.
// ketik definisi untuk perintah khusus seperti "login" // akan diselesaikan menjadi "cypress/support/index.d.ts" //
Seperti yang kita lihat di atas, IntelliSense memberi kami argumen yang kami berikan di file command.js kami dan membantu dalam pelengkapan otomatis.
