Quick introduction to Cypress

1. E2E TEST WITH
&
FABIO BIONDI

2. Formazione front-end
Speaker & Content Creator
Community Founder
Google Developer Expert (Angular)
Microsoft MVP
Twitch Partner
FABIOBIONDI fabiobiondi.dev

3. .com/c/FabioBiondi .tv/fabio_biondi
PARTNER

4. fabiobiondi.dev

5. WHAT IS CYPRESS? fabiobiondi.dev
A JS front-end testing tool
That operates directly in the browser

6. Write, Run, Debug fabiobiondi.dev

7. FEATURES fabiobiondi.dev
Time Travel
Debuggability
Real Time Reloads
Automatic Waiting
Spies, Stubs, Interceptors
Screenshots & videos

8. CYPRESS
INSTALLATION
npm install cypress

9. npx open cypress

10. YOUR FIRST TEST

11. USE CYPRESS fabiobiondi.dev
App Preview
Specs / Files
Your Tests

12. CYPRESS is LIKE jQuery fabiobiondi.dev
cy.get(‘.myClass’)
$(‘.myClass’)
cy.get(‘main’).find(‘article’)

13. CYPRESS is NOT LIKE jQuery fabiobiondi.dev
const el$ = $(‘.myClass’)
if (el$) …
cy.get(‘.myClass’)
.then($el
=
>
…

14. HOW TO WRITE A TEST fabiobiondi.dev
Visit a Page
Query elements
Interact with elements
Make an Assertion

15. ARRANGE, ACT, ASSERT fabiobiondi.dev
cy.visit(`${url}/hello-cypress`);
1.
cy.get(‘button’).click()
2.
cy.get('h1').contains('Hello')
3.

16. ARRANGE, ACT, ASSERT fabiobiondi.dev

17. QUERYING ELEMENTS fabiobiondi.dev
cy.get(‘.hello’)
cy.get('[data-testid="hello"]')
cy.contains(‘Mario’)
cy.contains(‘Mario’).closest()

18. ASSERTIONS fabiobiondi.dev
After [ACTION]
on this [QUERY ELEMENT]
I expect [EXPECTATION]
<< After clicking on this <button>,
I expect its class to eventually be active.>>

19. DEFAULT ASSERTIONS fabiobiondi.dev
cy.visit()
cy.contains()
cy.get()
cy.find()
cy.type()
cy.click()
…

20. ASSERTIONS fabiobiondi.dev
CHAI
cy.get(‘h1’).then($el
=
>
{
expect($el).to.have.class(‘one’)
})
CHAI-jQuery
cy.get(‘h1’)
.should(‘have.class’, ‘one’)

21. WRITING ASSERTIONS fabiobiondi.dev
cy.get(‘h1’).should(‘have.class’, ‘xyz’)
IMPLICIT SUBJECT
cy.get(‘h1’).should($el
=
>
expect($el).to.have.class(‘xyz')
EXPLICIT SUBJECT

22. INTERACTING fabiobiondi.dev
cy.get(‘button’).click()
cy.get(‘input’).type(‘hello{enter}’)
cy.get(‘input’).first().focus()
cy.get(‘select’).select(‘item 1’)

23. DEMO
npx open cypress

24. LOGIN

25. CART PANEL

26. COMPONENT TESTING
FABIO BIONDI

27. CONFIGURATION

28. YOUR FIRST COMPONENT TEST

29. YOUR FIRST COMPONENT TEST

30. fabiobiondi.io
FACEBOOKCOMMUNITIES

31. fabiobiondi.dev