Your SlideShare is downloading. ×
0
WebDriver Tests for                         ExtJS Applications                              Andrii DzyniaSaturday, March 2...
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  DzyniaSaturday, March 2, 13
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  Dzynia                                  Test	  Engineer/Consultant/Tra...
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  Dzynia                                  Test	  Engineer/Consultant/Tra...
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  Dzynia                                  Test	  Engineer/Consultant/Tra...
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  Dzynia                                  Test	  Engineer/Consultant/Tra...
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  Dzynia                                             Test	  Engineer/Con...
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  Dzynia                                              Test	  Engineer/Co...
 	  	  	  	  	  	  	  	  	  	  	  	  	  	  Andrii	  Dzynia                                              Test	  Engineer/Co...
Technical Context                        • Java Enterprise Application                        • ExtJS on UI level         ...
What is ExtJS?                  Ext JS is a pure JavaScript application framework                  for building interactiv...
Demo                        http://docs.sencha.com/ext-js/4-1/extjs-build/examples/Saturday, March 2, 13
First Stage                            As UsualSaturday, March 2, 13
Locators                        • css = button[id *= ‘add_user_action’]                        • css = .x-panel.x-grid-wit...
BuildersSaturday, March 2, 13
WaitForExtJsSaturday, March 2, 13
Custom WaitersSaturday, March 2, 13
ExceptionsSaturday, March 2, 13
ActionsSaturday, March 2, 13
Results                        Traditional approach   Code can be too complex                        Help in simple cases ...
Who was solving this                              before?                        • https://github.com/mariominati/test-www...
Second Stage                        ExtJSElementObjectsSaturday, March 2, 13
ExtJSComboBoxSaturday, March 2, 13
ExtJSComboBoxSaturday, March 2, 13
ExtJSMessageBoxSaturday, March 2, 13
ExtJSGridTableSaturday, March 2, 13
ExtJSGridTableSaturday, March 2, 13
Results                        Reusable components   WebDriver is so slow                          Can be extended       I...
Stage 3                        JavaScript InjectionsSaturday, March 2, 13
ExtJS API                 Ext.get(id).dom.value                 Ext.ComponentQuery.query(panel[cls=myCls]);               ...
DemoSaturday, March 2, 13
JS InjectionSaturday, March 2, 13
Results                                     Not real-user                        Faster!                                  ...
Lessons Learned                        • Think how you will be testing at first                        • Work side-by-side ...
@a                                                    dz     me                                               yn          ...
Upcoming SlideShare
Loading in...5
×

ExtJS WebDriver

7,777

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,777
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
128
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "ExtJS WebDriver"

  1. 1. WebDriver Tests for ExtJS Applications Andrii DzyniaSaturday, March 2, 13
  2. 2.                              Andrii  DzyniaSaturday, March 2, 13
  3. 3.                              Andrii  Dzynia Test  Engineer/Consultant/TrainerSaturday, March 2, 13
  4. 4.                              Andrii  Dzynia Test  Engineer/Consultant/TrainerSaturday, March 2, 13
  5. 5.                              Andrii  Dzynia Test  Engineer/Consultant/TrainerSaturday, March 2, 13
  6. 6.                              Andrii  Dzynia Test  Engineer/Consultant/TrainerSaturday, March 2, 13
  7. 7.                              Andrii  Dzynia Test  Engineer/Consultant/Trainer @adzyniaSaturday, March 2, 13
  8. 8.                              Andrii  Dzynia Test  Engineer/Consultant/Trainer @adzynia h8p://adzynia.comSaturday, March 2, 13
  9. 9.                              Andrii  Dzynia Test  Engineer/Consultant/Trainer @adzynia h8p://adzynia.comSaturday, March 2, 13
  10. 10. Technical Context • Java Enterprise Application • ExtJS on UI level • WebDriver for Test AutomationSaturday, March 2, 13
  11. 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. 12. Demo http://docs.sencha.com/ext-js/4-1/extjs-build/examples/Saturday, March 2, 13
  13. 13. First Stage As UsualSaturday, March 2, 13
  14. 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. 15. BuildersSaturday, March 2, 13
  16. 16. WaitForExtJsSaturday, March 2, 13
  17. 17. Custom WaitersSaturday, March 2, 13
  18. 18. ExceptionsSaturday, March 2, 13
  19. 19. ActionsSaturday, March 2, 13
  20. 20. Results Traditional approach Code can be too complex Help in simple cases No reusable componentsSaturday, March 2, 13
  21. 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. 22. Second Stage ExtJSElementObjectsSaturday, March 2, 13
  23. 23. ExtJSComboBoxSaturday, March 2, 13
  24. 24. ExtJSComboBoxSaturday, March 2, 13
  25. 25. ExtJSMessageBoxSaturday, March 2, 13
  26. 26. ExtJSGridTableSaturday, March 2, 13
  27. 27. ExtJSGridTableSaturday, March 2, 13
  28. 28. Results Reusable components WebDriver is so slow Can be extended IE is critical slow!Saturday, March 2, 13
  29. 29. Stage 3 JavaScript InjectionsSaturday, March 2, 13
  30. 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. 31. DemoSaturday, March 2, 13
  32. 32. JS InjectionSaturday, March 2, 13
  33. 33. Results Not real-user Faster! actionsSaturday, March 2, 13
  34. 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 APISaturday, March 2, 13
  35. 35. @a dz me yn @a ia dz yn ia.c om ad zy n ia. co mSaturday, March 2, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×