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,100
-1

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,100
On Slideshare
0
From Embeds
0
Number of Embeds
2
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?

    ×