Comment tester de bout en bout votre application à l'aide de Cypress.io

Dans cet article, vous apprendrez:

• Qu'est-ce que Cypress et quand l'utiliser

  
  
  
  
  

• Bases des tests avec Cypress

  
  
  
  
  

• Commandes Cypress avancées

  
  
  
  
  

• Interagir avec les éléments de l'interface utilisateur

  
  
  
  
  

• Meilleures pratiques d'utilisation de Cypress

  
  
  
  
  

---

introduction

Pour tester vos applications, vous devez suivre les étapes suivantes:

• Lancez l'application

  
  
  
  
  

• Attendez que le serveur démarre

  
  
  
  
  

• ( , )

  
  
  
  
  

• , ( , ..)

  
  
  
  
  

• 
  
  
  
  

. , .

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

  
  
  
  
  

---

Le test est une étape clé du processus de développement car il garantit le bon fonctionnement de votre application. Certains programmeurs préfèrent tester manuellement leurs programmes car l'écriture des tests prend beaucoup de temps et d'énergie. Heureusement, Cypress a résolu ce problème en permettant au développeur d'écrire des tests dans un court laps de temps.

Merci d'être venu jusqu'au bout! En cas de confusion, je vous conseille de jouer avec le code et de parcourir les exemples.