• Save
jQuery Bay Area Conference 2010
Upcoming SlideShare
Loading in...5
×
 

jQuery Bay Area Conference 2010

on

  • 6,698 views

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

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

Statistics

Views

Total Views
6,698
Views on SlideShare
4,493
Embed Views
2,205

Actions

Likes
5
Downloads
0
Comments
0

4 Embeds 2,205

http://speakerrate.com 2181
http://paper.li 12
http://www.slideshare.net 11
http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

jQuery Bay Area Conference 2010 Presentation Transcript

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