So testen Sie Ihre Anwendung durchgehend mit Cypress.io

In diesem Artikel erfahren Sie:

• Was ist Cypress und wann soll es verwendet werden?

  
  
  
  
  

• Testen der Grundlagen mit Cypress

  
  
  
  
  

• Erweiterte Cypress-Befehle

  
  
  
  
  

• Interaktion mit Elementen der Benutzeroberfläche

  
  
  
  
  

• Best Practices mit Cypress

  
  
  
  
  

---

Einführung

Um Ihre Anwendungen zu testen, müssen Sie die folgenden Schritte ausführen:

• Anwendung starten

  
  
  
  
  

• Warten Sie, bis der Server gestartet ist

  
  
  
  
  

• ( , )

  
  
  
  
  

• , ( , ..)

  
  
  
  
  

• 
  
  
  
  

. , .

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

  
  
  
  
  

---

Das Testen ist ein wichtiger Schritt im Entwicklungsprozess, da es sicherstellt, dass Ihre Anwendung ordnungsgemäß funktioniert. Einige Programmierer ziehen es vor, ihre Programme manuell zu testen, da das Schreiben von Tests viel Zeit und Energie kostet. Glücklicherweise hat Cypress dieses Problem gelöst, indem es dem Entwickler ermöglicht hat, Tests in kurzer Zeit zu schreiben.

Danke, dass du es bis zum Ende geschafft hast! Wenn Sie Verwirrung stiften, empfehle ich Ihnen, mit dem Code zu spielen und die Beispiele durchzugehen.