Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Creating a flawless user experience, end to-end, functional to visual - Slides by Gil Tayar

818 visualizaciones

Publicado el

** 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

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Creating a flawless user experience, end to-end, functional to visual - Slides by Gil Tayar

  1. 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. 2. @giltayar 2 VP of Engineering, Cypress.io Senior Architect, Applitools
  3. 3. @giltayar Why Do We Write Tests? 3
  4. 4. @giltayar Answer: To Remove Fear 4
  5. 5. @giltayar Fear of Adding Code 5
  6. 6. @giltayar Fear of Removing Code 6
  7. 7. @giltayar Fear of Refactoring 7 7
  8. 8. @giltayar Functional Testing Solve That ● I add/remove/refactor, run the tests, and voila! ● Fearless 8
  9. 9. @giltayar And Cypress is the perfect tool for that! 9
  10. 10. @giltayar (although I will let Gleb expound on that) 10
  11. 11. @giltayar Except for one teeny tiny area of my code 11
  12. 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. 13. @giltayar Visual testing enables you to… ● Add markup ● Remove markup ● Refactor markup Without Fear 13
  14. 14. @giltayar And Applitools Eyes is the perfect tool for that! 14
  15. 15. @giltayar Functional and Visual Tests enable you to cover your application cover to cover 15
  16. 16. @giltayar Cypress Functional Testing 16
  17. 17. @giltayar Take it, Gleb! 17
  18. 18. @giltayar Applitools Visual Testing 18
  19. 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. 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. 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. 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. 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. 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
  25. 25. @giltayar Simple, Right? 25
  26. 26. @giltayar Building a UI that you use to accept or reject a difference 26
  27. 27. @giltayar 27
  28. 28. @giltayar 28
  29. 29. @giltayar 29
  30. 30. @giltayar A Huge Difficulty: False Positives 30
  31. 31. @giltayar
  32. 32. @giltayar
  33. 33. @giltayar
  34. 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. 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. 36. @giltayar Run each test ten times? 36
  37. 37. @giltayar Run each test ten times? (not even with Cypress…) 37
  38. 38. @giltayar Why is this not a problem in functional e2e tests? Because browsers have converged functionally 38
  39. 39. @giltayar How do we solve this problem? We parallelize 39
  40. 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. 41. @giltayar There’s a better solution 41
  42. 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. 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. 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. 45. @giltayar The Applitools Visual Grid DOM Snapshot Screenshots Applitools Eyes Server 45
  46. 46. @giltayar OK, OK. But how? How do I write tests? Show me some code! 46
  47. 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. 48. @giltayar Coming Soon ● A Cypress course in TestAutomationU ○ https://testautomationu.applitools.com/ ○ Written by yours truly 48
  49. 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
  50. 50. @giltayar Question 50

×