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

1. REACTive AUTOMATION:
HOW TO AVOID SHOOTING
YOURSELF IN THE FOOT?!

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
State
Component
Virtual DOM
Events
WHAT IS REACT?

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
Component
WHAT IS REACT?

6. 6
Data
Store
Component
WHAT IS REACT?

7. 7
UI
Server
Data
Store
UI events
Server events
WHAT IS REACT?

8. 8
Old VDOM
New VDOM
DIFF
Render
Component
WHAT IS REACT?

9. 9
WHAT IS REACT?
Real DOM
UI
Old VDOM
New VDOM
DIFF
Update

10. WHAT DOES IT MEAN FOR QA?
10

11. AUTOMATION CHALLENGES
11
• Locators lookup
• Wait context
• Nodes staleness
• Events triggering
• Rendering frequency

12. 12
WTF should I
do with that?

13. 13
PROCESS SIMPLIFICATION

14. 14
• Custom attributes
• Events manipulation
PROCESS SIMPLIFICATION

15. 15
ATTRIBUTES & EVENTS DEMO

16. 16
Easy elements
lookup
Team
convention
Less
maintenance
Use ReactTestUtils
Avoid 3rd party
components testing

17. 17
DATA GRID

18. 18
Expectation Reality
SORTING & FILTERING

19. 19
DATA GRID DEMO

20. 20

21. 21

22. 22

23. 23
Pay attention to types,
formatting and rounding
Always perform root
cause analysis
Use enums to encapsulate
conversion and filtering logic

24. 24
CHARTS

25. 25
CHARTS RENDERING
VS

26. 26
CHARTS TESTING
• Data (including anomalies)
• Business logic
• Visual elements (special cases)

27. 27
CHARTS DEMO

28. 28
Use SVG for
automation
Add custom
attributes
Combine mouse move
and tooltip parsing
Focus on complicated
scenarios

29. 29
CONCLUSION
• Learn your product internals
• Prefer negotiations over
workarounds
• Invest time in learning
programming languages

30. FIND OUT MORE
LinksAuthor
30