I'm Yong Shean. I'll give you a brief overview on what Cypress can do and how to get started.

1. Automate your tests
with Cypress
Yong Shean

2. About myself
Yong Shean
Frontend Engineer /
WWCodeKL member
Blog :
:
:
yshean
@shin_chong
yshean.logdown.com
(moving to yshean.github.io)

3. What this talk covers
• Helps you convince yourself / your manager to put time
and effort into writing tests
• High-level use cases
• 🔥 Some tips and tricks
• Link you up to key resources

4. What would not be covered
• Advanced use cases
• What is already covered in Cypress official documentation

5. What is ?
• A UI end-to-end testing framework
• Test scripts are written in Javascript
• Doesn’t matter how your web application is built

6. The Testing Trophy 🏆
Source: https://testingjavascript.com/

7. Why do we need it?
• Give confidence, to you and to your users
• ⌛ Save time from repetitive work
• Less worries when refactoring and dealing with change
requests

8. Why Cypress out of <…>?
• <…> : Selenium, Puppeteer, TestCafe, etc.
• Easy to setup
• Easy to write (it is Javascript)
• 🐞 Easy to debug
• Well-documented and easy to understand
• Fast to execute - can be incorporated into CI/CD pipeline

9. What Cypress cannot do
• Doesn’t support:
• certain native browser events: https://github.com/cypress-io/cypress/issues/
311 (file upload, mouse over, etc.)
• cross browser testing - yet (only Chrome and Electron for now)
• headless Chrome - yet
• iframe - yet
• Cross-domain testing
• OAuth
• Read up on permanent and temporary trade-offs (https://docs.cypress.io/
guides/references/trade-offs.html#Permanent-trade-offs-1) and known issues:
https://docs.cypress.io/guides/references/known-issues.html

10. How to get started
• Create a new folder (say, test-my-app)
• Inside your folder, run yarn add cypress —dev
(or npm install cypress —save-dev) (yes, you need Node
installed)
• npx cypress open

11. npx cypress open

12. Where are the test
scripts?
• Open test-my-app folder
• Your tests will sit under cypress/
integration folder.
• Usually name as <module>.spec.js

13. Real-world example
http://demo.realworld.io/#/
Today’s content is inspired by this video:
https://www.youtube.com/watch?v=5XQOK0v_YRE

15. What to test?
List down all the pages inside:
1. Register
2. Login
3. Settings
4. List Articles
5. View Article
6. Create New Article

16. What to test?
List down all the pages inside:
1. Register
2. Login
3. Settings
4. List Articles - Pagination, likes, tags, information displayed
properly?
5. View Article - Title, description displayed properly? Can edit or
delete article? Comments - can add new comment, edit comment?
6. New Article - Form validation, links working properly? Does publish
button creates a new article with the provided input?
Form validation, links and
buttons are working properly?

17. Identify the sequence
• What should be tested first? - Depends on your app
1. Register (before login)
2. Login (before login) - need to register first
3. Settings (after login) - need to login first
4. List Articles (before/after login) - need to create new article first
5. View Article (before/after login) - need to create new article first
6. Create New Article (after login) - need to login first

18. Create the files
1. Register: register.spec.js
2. Login: login.spec.js
3. Settings: settings.spec.js
4. Create New Article: article_new.spec.js
5. List Articles: articles.spec.js
6. View Article: article.spec.js

19. register.spec.js
https://speakerdeck.com/brianmann/cypress-best-practices

20. register.spec.js
beforeEach:
is where you put the function
to run before every “it”
Useful for:
- visiting the target page
- log in process
- setting up clean state

21. register.spec.js

22. register.spec.js

23. register.spec.js
It works!

24. What if the element to
select has a dynamic
classname?

25. Let’s say you want to test the
“Home” link…
Tips: You can copy from Cypress’ selector
playground…

26. And it works, but…
When the classname change, you need to
change your test script
NOT ROBUST to
development code
refactoring

29. Cypress-testing-library to the rescue!
https://github.com/testing-library/cypress-testing-library

30. Usage
Add this line to your project's cypress/support/
commands.js:
import “cypress-testing-library/add-commands”;

31. Now you can just write like
this…

32. What if the element you
wanna test is not visible?

33. Let’s say you want to click on the
“Basic” link inside the side menu…
Because it’s hidden, you need to click
on the menu icon first…

34. Of course, you also can get the selector
from Cypress’ selector playground…
Then click on the “Basic” link when it
becomes visible…

35. But if you (or your team) use styled-components,
the generated classname might change!
And just put inside the get()…

36. Tips for selecting icon/image
element: look for alt text or title

37. This should work… 🤔

38. Oops… Cypress complains that the
element is not visible (or covered by
another element)

39. Add {force: true} if you know
what you’re doing…

40. And it works! 🎉

41. Comparing both
approaches

42. There is countless ways to select an
element… but which is the most suitable
one?
https://testing-library.com/docs/guide-which-query
Luckily there’s a guide! Use this as your testing bible:

43. Takeaways
• Cypress can be used to test your web application as long
as it can be opened with Chrome
• Planning your tests is as important as executing them
• Test as if you’re the tester, not as if you’re the developer
• Read up docs and guides on Cypress
• Listen to Kent C. Dodds for testing advice

44. We’re hiring!
• React developers
• Node + GraphQL developers
• QA engineers (bonus if you know how to write automated
tests ;))
Both experienced and non-experienced (but
passionate at learning) are welcomed!
Pls send resume to joel.choo@finexusgroup.com
(or talk to me!) if you’re interested.
finexusgroupofficial