Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

QA Fest 2018. Сергей Король. REACTive automation: how to avoid shooting yourself in the foot

35 views

Published on

React является одной из самых популярных библиотек для построения пользовательских интерфейсов на текущий момент. Она позволяет создавать закрытые компоненты, умеющие управлять собственным состоянием, а так же - объединять их в более сложные UI блоки. Что же это может означать для автоматизаторов? В рамках предложенной темы будут рассмотрены потенциальные проблемы, с которыми вы можете столкнуться при автоматизации React приложений. Вы увидите практические примеры добавления спец. аттрибутов для закрытых компонентов, познакомитесь с нюансами работы с таблицами и графиками, а также узнаете о способе генерации различного рода событий для сложных UI элементов.

Published in: Education
  • Be the first to comment

  • Be the first to like this

QA Fest 2018. Сергей Король. REACTive automation: how to avoid shooting yourself in the foot

  1. 1. REACTive AUTOMATION: HOW TO AVOID SHOOTING YOURSELF IN THE FOOT?!
  2. 2. QAA Geek and Java fan. Consultant, speaker and open-source contributor. • Lead QAA Engineer • Consultant: http://sdclabs.com • GitHub contributor: sskorol Speaker’s info • Email: serhii.s.korol@gmail.com • Twitter: @ss_korol Contacts Sergey Korol Waverley Software ‘‘ 2 WHO AM I?
  3. 3. 3 State Component Virtual DOM Events WHAT IS REACT?
  4. 4. 4 Real DOM UI Server Old VDOM New VDOM DIFF Data Store Render Update UI events Server events Component WHAT IS REACT?
  5. 5. 5 Component WHAT IS REACT?
  6. 6. 6 Data Store Component WHAT IS REACT?
  7. 7. 7 UI Server Data Store UI events Server events WHAT IS REACT?
  8. 8. 8 Old VDOM New VDOM DIFF Render Component WHAT IS REACT?
  9. 9. 9 WHAT IS REACT? Real DOM UI Old VDOM New VDOM DIFF Update
  10. 10. WHAT DOES IT MEAN FOR QA? 10
  11. 11. AUTOMATION CHALLENGES 11 • Locators lookup • Wait context • Nodes staleness • Events triggering • Rendering frequency
  12. 12. 12 WTF should I do with that?
  13. 13. 13 PROCESS SIMPLIFICATION
  14. 14. 14 • Custom attributes • Events manipulation PROCESS SIMPLIFICATION
  15. 15. 15 ATTRIBUTES & EVENTS DEMO
  16. 16. 16 Easy elements lookup Team convention Less maintenance Use ReactTestUtils Avoid 3rd party components testing
  17. 17. 17 DATA GRID
  18. 18. 18 Expectation Reality SORTING & FILTERING
  19. 19. 19 DATA GRID DEMO
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. 23 Pay attention to types, formatting and rounding Always perform root cause analysis Use enums to encapsulate conversion and filtering logic
  24. 24. 24 CHARTS
  25. 25. 25 CHARTS RENDERING VS
  26. 26. 26 CHARTS TESTING • Data (including anomalies) • Business logic • Visual elements (special cases)
  27. 27. 27 CHARTS DEMO
  28. 28. 28 Use SVG for automation Add custom attributes Combine mouse move and tooltip parsing Focus on complicated scenarios
  29. 29. 29 CONCLUSION • Learn your product internals • Prefer negotiations over workarounds • Invest time in learning programming languages
  30. 30. FIND OUT MORE LinksAuthor 30

×