jQuery Bay Area Conference 2010

6,261 views
6,184 views

Published on

My presentation from the 2010 jQuery Bay Area conference about automated UI testing of jQuery projects.

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

No Downloads
Views
Total views
6,261
On SlideShare
0
From Embeds
0
Number of Embeds
2,349
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide













































  • jQuery Bay Area Conference 2010

    1. 1. Automated UI Testing with jQuery Menno van Slooten Bay Area jQuery Conference 2010
    2. 2. Overview Intro Automated Testing Case study: eBuddy Web Messenger UI Test Automation patterns & Beyond What’s next? Questions
    3. 3. Automated Testing Unit Testing UI Testing
    4. 4. function add(a, b) { return a + b; } function testAdd() { assertEquals( 1, add( 1, 0)); assertEquals( 2, add( 1, 1)); assertEquals(20, add(10, 10)); }
    5. 5. function add(a, b) { a = parseInt(a, 10); b = parseInt(b, 10); if (isNaN(a)) a = 0; if (isNaN(b)) b = 0; return a + b; } function testAdd() { assertEquals(20, add( 10, 10)); assertEquals( 0, add("a", [])); assertEquals( 3, add( 3, new Date)); }
    6. 6. Automated UI Testing Demo: eBuddy Web Messenger
    7. 7. Actions & Tests Click Visibility Enter text Checked/unchecked Text content Number of elements
    8. 8. Automated UI Testing Test Automation Patterns
    9. 9. Test Automation Pattern 1 Action, Assert, Repeat
    10. 10. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertVisible('#result');
    11. 11. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertVisible('#result');
    12. 12. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertVisible('#result');
    13. 13. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertVisible('#result');
    14. 14. Test Automation Pattern 1 Adding Boilerplate Code
    15. 15. UITest.addTestScript({ name : 'Demo Test', url : 'demo/demo.html' });
    16. 16. UITest.addTestScript({ name : 'Demo Test', url : 'demo/demo.html', test : function() { UITest.log('Hide result'); $('#button-hide').click(); UITest.assertHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertVisible('#result'); } });
    17. 17. UITest.addTestScript({ name : 'Demo Test', url : 'demo/demo.html', waitFor : 'pageToLoad', thenRun : function() { UITest.log('Hide result'); $('#button-hide').click(); UITest.assertHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertVisible('#result'); } });
    18. 18. Other UITest asserts assertIsElement() assertContainsText() assertIsChecked() assertHasValue() ...etc
    19. 19. Test Automation Pattern 1 Cannot deal with asynchronous actions
    20. 20. $('#button-load-ajax').click(); UITest.assertVisible('#result p');
    21. 21. Test Automation Pattern 2 Action, WaitFor, Repeat
    22. 22. UITest.addTestScript({ name : 'Demo Test', url : 'demo/demo.html', tests : [ { waitFor: 'pageToLoad', thenRun: function() { UITest.log('Load async ajax'); $('#button-load-ajax').click(); } }, { waitFor: '#result p', thenRun: function() { UITest.log('Ajax load done'); } } ] });
    23. 23. Test Automation Pattern 2 Demo 2: Animation
    24. 24. UITest.addTestScript({ name : 'Demo Test', url : 'demo/demo.html', tests : [ { waitFor: 'pageToLoad', thenRun: function() { UITest.log('FadeOut result'); $('#button-fadeout').click(); } }, { waitFor: '!#result', thenRun: function() { UITest.log('Result hidden'); } } ] });
    25. 25. Going beyond Removing dependencies with a mock backend
    26. 26. Friend User
    27. 27. Friend eBuddy User Client
    28. 28. Friend eBuddy eBuddy User Server Client
    29. 29. Friend IM eBuddy eBuddy User Server Server Client
    30. 30. Friend IM eBuddy eBuddy User Server Server Client
    31. 31. Friend IM eBuddy eBuddy User Server Server Client
    32. 32. Friend IM eBuddy eBuddy Test Server Server Client Driver UI Test Framework
    33. 33. $() Friend IM eBuddy eBuddy Test Server Server Client Driver UI Test Framework
    34. 34. $.ajax() Friend IM eBuddy eBuddy Test Server Server Client Driver UI Test Framework
    35. 35. $.ajax() Mock eBuddy Test Backend Client Driver UI Test Framework
    36. 36. $.ajax() Mock eBuddy Test Backend Client Driver UI Test Framework
    37. 37. Mock Backend Use Case Connection Handling
    38. 38. function generateDisconnect() { var response = { status : 0, getResponseHeader : function(name) { return ''; }, getAllResponseHeaders : function() { return ''; }, responseText : '' }; return response; }
    39. 39. Going beyond Reading the JavaScript memory
    40. 40. memory Mock eBuddy Test Backend Client Driver UI Test Framework
    41. 41. Memory Reading Use Case Emoticon Parsing
    42. 42. Bonus Basic jQuery UI Tests
    43. 43. Further uses Monitoring Performance measurements ...?
    44. 44. So now what? Open Source for Make Benefit Glorious Community of jQuery
    45. 45. Thank you for your time Questions?

    ×