Creating a flawless user experience, end to-end, functional to visual - Slides by Gil Tayar
0 likes2,431 views
The document outlines a presentation by Gil Tayar on testing methodologies using Cypress and Applitools, emphasizing the importance of both functional and visual testing to ensure a flawless user experience. It highlights the fears associated with code changes and demonstrates how visual testing can mitigate those fears by allowing developers to make changes without concerns about the appearance of their application. Additionally, it discusses the challenges of parallelizing tests and proposes using DOM snapshots for efficient visual testing.
![@giltayar
How would it look like?
it('logs in', () => {
cy.contains('a.nav-link', 'Sign in').click()
cy.eyesCheckWindow ('Login page')
const user = Cypress.env('user')
cy.get('input[type="email"]' ).type(user.email)
cy.get('input[type="password"]' ).type(user.password)
cy.get('button[type="submit"]' ).click()
cy.eyesCheckWindow ('Empty home page after login' )
})
20](https://image.slidesharecdn.com/creatingaflawlessuserexperienceend-to-endfunctionaltovisual-giltayarslides-190502012724/85/Creating-a-flawless-user-experience-end-to-end-functional-to-visual-Slides-by-Gil-Tayar-20-320.jpg)
![@giltayar
How would it look like?
it('logs in', () => {
cy.contains('a.nav-link', 'Sign in').click()
cy.eyesCheckWindow ('Login page')
const user = Cypress.env('user')
cy.get('input[type="email"]').type(user.email)
cy.get('input[type="password"]').type(user.password)
cy.get('button[type="submit"]').click()
cy.eyesCheckWindow ('Empty home page after login' )
})
21
Actions](https://image.slidesharecdn.com/creatingaflawlessuserexperienceend-to-endfunctionaltovisual-giltayarslides-190502012724/85/Creating-a-flawless-user-experience-end-to-end-functional-to-visual-Slides-by-Gil-Tayar-21-320.jpg)
![@giltayar
How would it look like?
it('logs in', () => {
cy.contains('a.nav-link', 'Sign in').click()
cy.eyesCheckWindow('Login page')
const user = Cypress.env('user')
cy.get('input[type="email"]' ).type(user.email)
cy.get('input[type="password"]' ).type(user.password)
cy.get('button[type="submit"]' ).click()
cy.eyesCheckWindow('Empty home page after login')
})
22
Screenshots](https://image.slidesharecdn.com/creatingaflawlessuserexperienceend-to-endfunctionaltovisual-giltayarslides-190502012724/85/Creating-a-flawless-user-experience-end-to-end-functional-to-visual-Slides-by-Gil-Tayar-22-320.jpg)
Creating a flawless user experience, end to-end, functional to visual - Slides by Gil Tayar
- 1. @giltayar Creating a Flawless User Experience, End-To-End, Functional to Visual Gil Tayar (@giltayar) April 2019 Github repo: https://github.com/applitools/cypress-applitools-webinar This presentation: http://bit.ly/cypress-applitools-webinar Gleb’s presentation: https://slides.com/bahmutov/flawless-tests 1
- 2. @giltayar 2 VP of Engineering, Cypress.io Senior Architect, Applitools
- 3. @giltayar Why Do We Write Tests? 3
- 4. @giltayar Answer: To Remove Fear 4
- 5. @giltayar Fear of Adding Code 5
- 6. @giltayar Fear of Removing Code 6
- 8. @giltayar Functional Testing Solve That ● I add/remove/refactor, run the tests, and voila! ● Fearless 8
- 9. @giltayar And Cypress is the perfect tool for that! 9
- 10. @giltayar (although I will let Gleb expound on that) 10
- 11. @giltayar Except for one teeny tiny area of my code 11
- 12. @giltayar HTML and CSS Markup When I change my HTML and CSS, do the pages still look like they should? ● Yes, the checkbox is disabled. But does it look disabled? ● In my todo row, when it’s completed, does it look striked out? ● Does the whole page look OK? ● After I create a new row, does it still look OK? 12
- 13. @giltayar Visual testing enables you to… ● Add markup ● Remove markup ● Refactor markup Without Fear 13
- 14. @giltayar And Applitools Eyes is the perfect tool for that! 14
- 15. @giltayar Functional and Visual Tests enable you to cover your application cover to cover 15
- 19. @giltayar How does one go about visually testing an app? ● Automate the browser, do what the user would: ○ Use Cypress! ● For each page you would like to visually test: ○ Navigate/click/type to it ○ Take a screenshot ○ Check that it’s OK 19
- 20. @giltayar How would it look like? it('logs in', () => { cy.contains('a.nav-link', 'Sign in').click() cy.eyesCheckWindow ('Login page') const user = Cypress.env('user') cy.get('input[type="email"]' ).type(user.email) cy.get('input[type="password"]' ).type(user.password) cy.get('button[type="submit"]' ).click() cy.eyesCheckWindow ('Empty home page after login' ) }) 20
- 21. @giltayar How would it look like? it('logs in', () => { cy.contains('a.nav-link', 'Sign in').click() cy.eyesCheckWindow ('Login page') const user = Cypress.env('user') cy.get('input[type="email"]').type(user.email) cy.get('input[type="password"]').type(user.password) cy.get('button[type="submit"]').click() cy.eyesCheckWindow ('Empty home page after login' ) }) 21 Actions
- 22. @giltayar How would it look like? it('logs in', () => { cy.contains('a.nav-link', 'Sign in').click() cy.eyesCheckWindow('Login page') const user = Cypress.env('user') cy.get('input[type="email"]' ).type(user.email) cy.get('input[type="password"]' ).type(user.password) cy.get('button[type="submit"]' ).click() cy.eyesCheckWindow('Empty home page after login') }) 22 Screenshots
- 23. @giltayar This is how test code looks like Navigate Click, type, click checkScreenshot Click, click, type checkScreenshot Type, click, click checkScreenshot Click, click, click checkScreenshot 23
- 24. @giltayar How do we check that the screenshot is OK? You send us screenshots of your app We compare the screenshots with baseline images We report any differences found You accept or reject the differences
- 26. @giltayar Building a UI that you use to accept or reject a difference 26
- 27. @giltayar 27
- 28. @giltayar 28
- 29. @giltayar 29
- 30. @giltayar A Huge Difficulty: False Positives 30
- 31. @giltayar
- 32. @giltayar
- 33. @giltayar
- 34. @giltayar But also what about…? ● Different browsers ○ Chrome, Firefox, Safari ● Different responsive widths and pixel densities ○ Smartphone width and pixel density ○ Tablet width ○ Regular desktop width ○ Retina display width and pixel density 34
- 35. @giltayar So... Navigate Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot 1024 Navigate Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot 2500 Navigate Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot 1024 … 35
- 36. @giltayar Run each test ten times? 36
- 37. @giltayar Run each test ten times? (not even with Cypress…) 37
- 38. @giltayar Why is this not a problem in functional e2e tests? Because browsers have converged functionally 38
- 39. @giltayar How do we solve this problem? We parallelize 39
- 40. @giltayar Solution: Parallelizing the tests Navigate Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot 1024 Navigate Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot 1024 Navigate Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot Click, click, click checkScreenshot 2500 40
- 41. @giltayar There’s a better solution 41
- 42. @giltayar Parallelize the screenshots! Navigate Click, click, click checkScreenshot #1 Click, click, click checkScreenshot #2 Click, click, click checkScreenshot #3 Click, click, click checkScreenshot #4 ...768 ,1024,2500 ...768 ,1024,2500 ...768 ,1024,2500 ...768 ,1024,2500 screen #1 @ 768 screen #1 @ 1024 screen #1 @ 2500 screen #2 @ 768 screen #1 @ 768 screen #1 @ 1024 screen #1 @ 2500 screen #2 @ 768 42
- 43. @giltayar How? DOM Snapshots! Navigate Click, click, click checkScreenshot #1 Click, click, click checkScreenshot #2 Click, click, click checkScreenshot #3 Click, click, click checkScreenshot #4 screen #1 @ 768 screen #1 @ 1024 screen #1 @ 2500 screen #1 @ 768 screen #1 @ 1024 screen #1 @ 2500 DOM Snapshot #1 Screenshots!43
- 44. @giltayar How? DOM Snapshots! Navigate Click, click, click checkScreenshot #1 Click, click, click checkScreenshot #2 Click, click, click checkScreenshot #3 Click, click, click checkScreenshot #4 screen #1 @ 768 screen #1 @ 1024 screen #1 @ 2500 screen #1 @ 768 screen #1 @ 1024 screen #1 @ 2500 DOM Snapshot #1 Screenshots!44
- 45. @giltayar The Applitools Visual Grid DOM Snapshot Screenshots Applitools Eyes Server 45
- 46. @giltayar OK, OK. But how? How do I write tests? Show me some code! 46
- 47. @giltayar Things we haven’t shown ● Take selective screenshot using selector ● Github and Bitbucket integration ● JIRA integration ● Shadow DOM and Canvas support: coming soon ● Ignore regions, floating ignore regions ● Layout mode! 47
- 48. @giltayar Coming Soon ● A Cypress course in TestAutomationU ○ https://testautomationu.applitools.com/ ○ Written by yours truly 48
- 49. @giltayar Thank You Github repo: https://github.com/applitools/cypress-applitools-webinar This presentation: http://bit.ly/cypress-applitools-webinar Gleb’s presentation: https://slides.com/bahmutov/flawless-tests 49