Creating a flawless user experience, end to-end, functional to visual - Slides by Gil Tayar
•
0 likes•2,365 views
** Full webinar recording: ** Creating and maintaining a flawless and smooth user experience is no small feat. Not only do you need to ensure that the backend and front-end are functioning and appearing as expected, but also you must verify that this is the case across hundreds (if not thousands) of possible combos of screen-size/browser/operating systems. And if that wasn't enough - you are deploying and releasing continuously, in a rapidly-changing ecosystem of devices, competitors, and technologies. So how do you keep track of all those moving parts, in real time, in order to prevent functional and UI fails? In this hands-on session, we demonstrated how you can safeguard your app's functionality and UI across all digital platforms. We presented -- step-by-step -- how to write functional tests, which ensure that the application performs user actions correctly, as well as how to write visual tests that guarantee that the application does not suffer embarrassing UI bugs, glitches and regressions. Watch this practical, hands-on session, and learn how to: * Write functional end-to-end tests, while consistently capturing application screenshots for image comparison * Add visual regression tests to ensure that the application still appears as expected * Analyze visual diffs to determine the root cause of visual bugs
Recommended
More Related Content
Similar to Creating a flawless user experience, end to-end, functional to visual - Slides by Gil Tayar
Similar to Creating a flawless user experience, end to-end, functional to visual - Slides by Gil Tayar (20)
More from Applitools
More from Applitools (20)
Recently uploaded
Recently uploaded (20)
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