jQuery Bay Area Conference 2010

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? Questions

Automated Testing Unit Testing UI Testing

function add(a, b) { return a + b; } function testAdd() { assertEquals( 1, add( 1, 0)); assertEquals( 2, add( 1, 1)); assertEquals(20, add(10, 10)); }

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)); }

Automated UI Testing Demo: eBuddy Web Messenger

Actions & Tests Click Visibility Enter text Checked/unchecked Text content Number of elements

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'); $('#button-show').click(); UITest.assertVisible('#result');

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() { UITest.log('Hide result'); $('#button-hide').click(); UITest.assertHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertVisible('#result'); } });

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'); } });

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 : [ { waitFor: 'pageToLoad', thenRun: function() { UITest.log('Load async ajax'); $('#button-load-ajax').click(); } }, { waitFor: '#result p', thenRun: function() { UITest.log('Ajax load done'); } } ] });

Test Automation Pattern 2 Demo 2: Animation

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'); } } ] });

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 Test Server Server Client Driver UI Test Framework

$() Friend IM eBuddy eBuddy Test Server Server Client Driver UI Test Framework

$.ajax() Friend IM eBuddy eBuddy Test Server Server Client Driver UI Test Framework

$.ajax() Mock eBuddy Test Backend Client Driver UI Test Framework

Mock Backend Use Case Connection Handling

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 Beneﬁt Glorious Community of jQuery

Thank you for your time Questions?

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

jQuery Bay Area Conference 2010

by mennovanslooten

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 1,252

Statistics

jQuery Bay Area Conference 2010 Presentation Transcript