Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Automated UI Testing
with jQuery
Menno van Slooten




             Bay Area jQuery Conference 2010
Overview
Intro
Automated Testing
Case study: eBuddy Web Messenger
UI Test Automation patterns & Beyond
What’s next?
Questi...
Automated Testing


Unit Testing
UI Testing
function add(a, b) {
    return a + b;
}


function testAdd() {
    assertEquals( 1, add( 1, 0));
    assertEquals( 2, add...
function add(a, b) {
    a = parseInt(a, 10);
    b = parseInt(b, 10);

    if (isNaN(a)) a = 0;
    if (isNaN(b)) b = 0;
...
Automated UI Testing
Demo: eBuddy Web Messenger
Actions & Tests
 Click            Visibility
 Enter text       Checked/unchecked
                  Text content
          ...
Automated UI Testing
Test Automation Patterns
Test Automation Pattern 1
Action, Assert, Repeat
UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');

UITest.log('Show result');
$('#butt...
UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');

UITest.log('Show result');
$('#butt...
UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');

UITest.log('Show result');
$('#butt...
UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');

UITest.log('Show result');
$('#butt...
Test Automation Pattern 1
Adding Boilerplate Code
UITest.addTestScript({
    name    : 'Demo Test',
    url     : 'demo/demo.html'
});
UITest.addTestScript({
    name     : 'Demo Test',
    url      : 'demo/demo.html',
    test     : function() {
         U...
UITest.addTestScript({
    name     : 'Demo Test',
    url      : 'demo/demo.html',
    waitFor : 'pageToLoad',
    thenRu...
Other UITest asserts

 assertIsElement()
 assertContainsText()
 assertIsChecked()
 assertHasValue()
 ...etc
Test Automation Pattern 1
Cannot deal with asynchronous actions
$('#button-load-ajax').click();
UITest.assertVisible('#result p');
Test Automation Pattern 2
Action, WaitFor, Repeat
UITest.addTestScript({
    name    : 'Demo Test',
    url     : 'demo/demo.html',
    tests   : [
         {
            w...
Test Automation Pattern 2
Demo 2: Animation
UITest.addTestScript({
    name    : 'Demo Test',
    url     : 'demo/demo.html',
    tests   : [
         {
            w...
Going beyond
Removing dependencies with a mock backend
Friend   User
Friend   eBuddy    User
          Client
Friend   eBuddy    eBuddy    User
          Server    Client
Friend    IM      eBuddy    eBuddy    User
         Server    Server    Client
Friend    IM      eBuddy    eBuddy    User
         Server    Server    Client
Friend    IM      eBuddy    eBuddy    User
         Server    Server    Client
Friend    IM      eBuddy    eBuddy      Test
         Server    Server    Client    Driver

                            UI...
$()




Friend    IM      eBuddy    eBuddy      Test
         Server    Server    Client    Driver

                      ...
$.ajax()




Friend    IM      eBuddy    eBuddy      Test
         Server    Server    Client    Driver

                 ...
$.ajax()




 Mock     eBuddy      Test
Backend    Client    Driver

          UI Test Framework
$.ajax()




 Mock     eBuddy      Test
Backend    Client    Driver

          UI Test Framework
Mock Backend Use Case
Connection Handling
function generateDisconnect() {
    var response = {
        status : 0,

       getResponseHeader :
       function(name)...
Going beyond
Reading the JavaScript memory
memory




 Mock       eBuddy      Test
Backend      Client    Driver

            UI Test Framework
Memory Reading Use Case
Emoticon Parsing
Bonus
Basic jQuery UI Tests
Further uses


Monitoring
Performance measurements
...?
So now what?
Open Source for Make Benefit Glorious
Community of jQuery
Thank you for your time
Questions?
jQuery Bay Area Conference 2010
Upcoming SlideShare
Loading in …5
×

jQuery Bay Area Conference 2010

6,682 views

Published on

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

Published in: Technology
  • Be the first to comment

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?

×