1. WebDriver Tests for
ExtJS Applications
Andrii Dzynia
Saturday, March 2, 13

2.
Andrii
Dzynia
Saturday, March 2, 13

3.
Andrii
Dzynia
Test
Engineer/Consultant/Trainer
Saturday, March 2, 13

4.
Andrii
Dzynia
Test
Engineer/Consultant/Trainer
Saturday, March 2, 13

5.
Andrii
Dzynia
Test
Engineer/Consultant/Trainer
Saturday, March 2, 13

6.
Andrii
Dzynia
Test
Engineer/Consultant/Trainer
Saturday, March 2, 13

7.
Andrii
Dzynia
Test
Engineer/Consultant/Trainer
@adzynia
Saturday, March 2, 13

8.
Andrii
Dzynia
Test
Engineer/Consultant/Trainer
@adzynia
h8p://adzynia.com
Saturday, March 2, 13

9.
Andrii
Dzynia
Test
Engineer/Consultant/Trainer
@adzynia
h8p://adzynia.com
Saturday, March 2, 13

10. Technical Context
• Java Enterprise Application
• ExtJS on UI level
• WebDriver for Test Automation
Saturday, March 2, 13

11. What is ExtJS?
Ext JS is a pure JavaScript application framework
for building interactive web applications
using techniques such as
Ajax, DHTML and DOM scripting.
Saturday, March 2, 13

12. Demo
http://docs.sencha.com/ext-js/4-1/extjs-build/examples/
Saturday, March 2, 13

13. First Stage
As Usual
Saturday, March 2, 13

14. Locators
• css = button[id *= ‘add_user_action’]
• css = .x-panel.x-grid-with-row-lines
• name = title
• xpath = "//*[@class='x-column-header-text'
and text()='Due Date']"
Saturday, March 2, 13

15. Builders
Saturday, March 2, 13

16. WaitForExtJs
Saturday, March 2, 13

17. Custom Waiters
Saturday, March 2, 13

18. Exceptions
Saturday, March 2, 13

19. Actions
Saturday, March 2, 13

20. Results
Traditional approach Code can be too complex
Help in simple cases No reusable components
Saturday, March 2, 13

21. Who was solving this
before?
• https://github.com/mariominati/test-www-
selenium-extjs/tree/master/Test-WWW-
Selenium-ExtJS
• https://github.com/asaflevy/SelenuimExtend/
• https://github.com/cathoderay/selenium-
extjs
• http://code.google.com/p/extenium/
Saturday, March 2, 13

22. Second Stage
ExtJSElementObjects
Saturday, March 2, 13

23. ExtJSComboBox
Saturday, March 2, 13

24. ExtJSComboBox
Saturday, March 2, 13

25. ExtJSMessageBox
Saturday, March 2, 13

26. ExtJSGridTable
Saturday, March 2, 13

27. ExtJSGridTable
Saturday, March 2, 13

28. Results
Reusable components WebDriver is so slow
Can be extended IE is critical slow!
Saturday, March 2, 13

29. Stage 3
JavaScript Injections
Saturday, March 2, 13

30. ExtJS API
Ext.get('id').dom.value
Ext.ComponentQuery.query('panel[cls=myCls]');
Ext.select(selector)
Ext.core.Element.select(selector, unique, root)
Ext.getDom(el)
Saturday, March 2, 13

31. Demo
Saturday, March 2, 13

32. JS Injection
Saturday, March 2, 13

33. Results
Not real-user
Faster!
actions
Saturday, March 2, 13

34. Lessons Learned
• Think how you will be testing at first
• Work side-by-side with front-end
developers
• Delegate ExtJS magic for your Elements API
Saturday, March 2, 13

35. @a
dz
me yn
@a ia
dz
yn
ia.c
om
ad
zy
n ia.
co
m
Saturday, March 2, 13