Cara menguji aplikasi Anda secara end-to-end menggunakan Cypress.io

Di artikel ini, Anda akan mempelajari:

• Apa itu Cypress dan kapan menggunakannya

  
  
  
  
  

• Dasar-dasar Pengujian Menggunakan Cypress

  
  
  
  
  

• Perintah Cypress Tingkat Lanjut

  
  
  
  
  

• Berinteraksi dengan elemen antarmuka pengguna

  
  
  
  
  

• Praktik Terbaik Menggunakan Cypress

  
  
  
  
  

---

pengantar

Untuk menguji aplikasi Anda, Anda perlu melakukan langkah-langkah berikut:

• Luncurkan aplikasinya

  
  
  
  
  

• Tunggu server dimulai

  
  
  
  
  

• ( , )

  
  
  
  
  

• , ( , ..)

  
  
  
  
  

• 
  
  
  
  

. , .

Cypress. Cypress , , :

• ( , ..)

  
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

!  Cypress .  , , , .

, — , . Cypress .

, Cypress, .

---

Cypress

, :

, Cypress:

 . Linux,   ,  Cypress NPM.

, Cypress , :

(Test Runner):

.

---

Cypress

Cypress ,   cypress/integration



.  :

JavaScript  basicTest.js



:

Cypress, Test Runner :

.

/cypress/integration/basicTest.js



:

• 1:  describe
  
  
  
  Cypress .

  
  
  
  
  

• 2:  it
  
  
  
  , .

  
  
  
  
  

• 3: .  , 2 + 2 4.  false
  
  
  
  , .

  
  
  
  
  

,  basicTest.js



Cypress.

:

! , .

, ?   /cypress/integration/basicTest.js



   describe



:

• 2: 4 5 10, . , .

  
  
  
  
  

.  :

, .  , .

.  basicTest.js



  :

• 2: 5 5   100, .

  
  
  
  
  

:

!  .  expect



  BDD (behavior-driven) .  , (test-driven assertions).

 /cypress/integration/basicTest.js



:

(test-driven assertions) assert

TDD  assert



.

 basicTest.js



:

• 2:  name



  age
  
  
  
  .

  
  
  
  
  

• 6:  isObject
  
  
  
  ,  person
  
  
  
  .   true
  
  
  
  ,  value is object
  
  
  
  .  , .

  
  
  
  
  

• 10: ,  name
  
  
  
    .

  
  
  
  
  

• 14: ,  name
  
  
  
    .

  
  
  
  
  

.  :

!  .  Cypress.

 basicTest.js



:

-

 Demoblaze , , .

 /cypress/integration/



 basicCommandsTest.js



.  :

• 3:  visit
  
  
  
  , Cypress - Demoblaze.

  
  
  
  
  

 basicCommandsTest.js



Test Runner:

:

!  .  Cypress.

 basicCommandsTest.js



:

---

Cypress:

. , , HTML Cypress.

Cypress   JQuery  -.

, myButton



id



, :

, myButton



, :

.

  The-Internet  .  -   / .

« ».

DevTools, ,  button



 onclick



,  addElement()



.

  :

 /cypress/integration



 runningClickCommand.js



.  :

• 2: -.

  
  
  
  
  

• 6: button
  
  
  
  .

  
  
  
  
  

. :

, !  , ,  Add Element



.

.

  The-Internet’s login.  .

username



 id



 username



,  password



 id



 password



.  , Login



 type



 submit



.  ,  username



 password



,   JQuery id



:

,  button



,    , :

 /cypress/integration



 runningTypeCommand.js



.  :

• 3: .

  
  
  
  
  

• 6:  username



 type
  
  
  
    ,  tomsmith
  
  
  
  .

  
  
  
  
  

• 7:  password



 SuperSecretPassword
  
  
  
  .

  
  
  
  
  

• 10: «».

  
  
  
  
  

.  :

!  .

  The-Internet .

DevTools:

 type



  checkbox



.  ,   form



 id



 checkboxes



.    JQuery -:

 /cypress/integration/



 runningCheckCommand.js



:

• 4: ,  check
  
  
  
  , .

  
  
  
  
  

• 7: Cypress .

  
  
  
  
  

• 8: .   uncheck
  
  
  
  , .

  
  
  
  
  

. :

!  .  Cypress.

.  , HTML, ,  ul



 li



.

 should



.     — The-Internet’s Add Element

 Delete



 added-manually



.   button



:

:

, :

:

 /cypress/integration/runningClickCommand.js



:

• 1:  added-manually
  
  
  
  .  , (have.length)
  
  
  
    .

  
  
  
  
  

• 3:  Add Element
  
  
  
  , , (have.text)



   Add Element
  
  
  
  .

  
  
  
  
  

.  :

!  .   each



.

 cypress/integration/runningClickCommand.js



:

each

   The-Internet’s Add Elements page:

,  Delete



.  ;  ,  Delete



  . , .

-  each



. , .   Delete



 click



.

Developer Tools:

 Delete



 class



 added-manually



.       each



, :

 /cypress/integration/runningClickCommand.js



:

• 2: ,  .added-manually
  
  
  
  .   $el
  
  
  
  .

  
  
  
  
  

• 3: , Cypress.  .

  
  
  
  
  

:

!  , .

:

:

• 2: , Cypress,  Add Element
  
  
  
  20 .

  
  
  
  
  

.  :

, - . !

, Cypress.

 cypress/integration/runningClickCommand.js



:

---

, .  :

Test Runner :

Cypress , .  , :

, :

:

,     get



 type



.    ,  .

 cypress/support/commands.js



:

• 1: ,  identifier



 data
  
  
  
  .

  
  
  
  
  

• 2: , .

  
  
  
  
  

 .  /cypress/support/commands.js



.

:

, .

«»

:

HTML  id



 first



.

Cypress .  , , :

 and



 should



.

Cypress

exec



  .  .

 localhost



, ,    Cypress.

GitHub

GitHub

• 
  
  
  
  

• Cypress Tutorial Videos

  
  
  
  
  

• End-To-End Testing With Cypress by codedamn

  
  
  
  
  

• Real Confidence With Cypress

  
  
  
  
  

• Best practices with Cypress: AssertJS Conference

  
  
  
  
  

---

Pengujian adalah langkah kunci dalam proses pengembangan karena ini memastikan bahwa aplikasi Anda berfungsi dengan benar. Beberapa programmer lebih suka menguji program mereka secara manual karena tes menulis membutuhkan banyak waktu dan energi. Untungnya, Cypress telah memecahkan masalah ini dengan mengizinkan pengembang untuk menulis tes dalam jangka waktu yang singkat.

Terima kasih telah mencapai akhir! Jika Anda merasa bingung, saya menyarankan Anda untuk bermain-main dengan kode dan melihat contoh.