Access Granted!

Discover the key to effortlessly testing authentication aspects with our workshop: "Access Granted." With the help of the Cypress testing framework, you'll learn how to ensure sturdy security and seamless user experiences by tackling one of the most crucial parts: The Login. So join us in exploring login page testing strategies, including the standard username-password process, social authentication, and passwordless authentication. Whether you're an experienced QA professional, a curious frontend developer, or someone passionate about testing, "Access Granted" will equip you with the skills and knowledge needed to elevate your login page testing game.

Transcript

1. A Starting Point into Login Page Testing with Cypress
2. Access granted! @leichteckig
3. Access granted! @leichteckig AGENDA • Login - Why bother? • Project Setup • "Default" UI login test • Social Login Test • What’s withPasswordless Is this a Cypress login workshop?
4. Access granted! @leichteckig
5. Access granted! @leichteckig HTTPS://AUTH0-VUE- SAMPLE.NETLIFY.APP/ test / TestTest1!
6. Access granted! @leichteckig
7. Access granted! @leichteckig CYPRESS SETUP <3
8. Access granted! @leichteckig
9. Access granted! @leichteckig
10. Access granted! @leichteckig WHAT DO I CONSIDER DEFAULT LOGIN? • A form with two input fields • Username / email and passwort • Single Factor Authentication …know. …have. …are.
11. Access granted! @leichteckig WHAT DO I CONSIDER DEFAULT LOGIN? • A form with two input fields • Username / email and passwort • Single Factor Authentication …know. …have. …are.
12. Access granted! @leichteckig WHAT DO I CONSIDER DEFAULT LOGIN? • A form with two input fields • Username / email and passwort • Single Factor Authentication …know. …have. …are. • Sends credentials to server, where validation takes place • If credentials map to user, they will be granted access
13. Access granted! @leichteckig DEFAULT LOGIN TEST <3
14. Access granted! @leichteckig TL;DR STANDARD LOGIN • cy.origin for multi domain testing • building a custom command "loginViaAuth0Ui" • Beware rate limit, can be cirmcumvented • Remove the blocked ip address by management API
15. Access granted! @leichteckig
16. Access granted! @leichteckig
17. Access granted! @leichteckig WHAT IS SOCIAL LOGIN? • Single sign on for end users • Using existing login information to sign in • Like Google, X, Facebook, GitHub, LinkedIn (Social Providers) • Social Provider validates the user‘s identity
18. Access granted! @leichteckig SOCIAL LOGIN <3
19. Access granted! @leichteckig TL;DR SOCIAL LOGIN • Evolution of the standard • "experimentalModifyObstructiveThirdPartyCode " must be set to true • Some querks of the social providers need to be taken into account • React to them inside your custom command
20. Access granted! @leichteckig TASK: WRITE A TEST • Install Cypress • Decide on the login case you want to use for your test • Try it out <3 • Let me know if you need support • Time: Let's meet back at 3:45
21. Access granted! @leichteckig CASE: PASSWORDLESS • Often, tools are involved, see next slide • Catch the mail and fetch OTP or link from it • Open source way: smtp-tester (SMTP server in Cypress) • In most tools: Setting up + Using custom commands or tasks • Alternative: Mocking
22. Access granted! @leichteckig Mailosaur-cypress Keep mailosaur on a minimum Mailhog-cypress
23. Access granted! @leichteckig EXTRA-CONTENT: LOGIN PER API • You will not likely log in per UI for every test • Just once, in dedicated Login test • Otherwise way too slow • use programmatic login
24. Access granted! @leichteckig PROGRAMMATIC LOGIN <3
25. Access granted! @leichteckig
26. Access granted! @leichteckig cy.origin
27. Access granted! @leichteckig cy.origin Social login is similar to default workflow
28. Access granted! @leichteckig cy.origin Social login is similar to default workflow Mailosaur or Mailhog
29. Access granted! @leichteckig cy.origin Social login is similar to default workflow Prefer tool usage over mocking Mailosaur or Mailhog
30. Access granted! @leichteckig
31. Access granted! @leichteckig These slides Find me ❤
32. Access granted! @leichteckig