Strategies for End-to-End Web Apps Testing

Strategies for End-to-End Ariya Hidayat Web Apps Testing

Amazon KindleCloud ReaderFinancial Times

Edit Develop QA

Code Editing

Do not provoke ambiguitiesAvoid silly mistakes Learn better code patternWrite readable code Improve future maintenance

JavaScript Engine Building Blocks Built-in objects, host objects, ... Runtime Syntax Tree Virtual Source Parser Machine/ Interpreter Fast and conservative

Parsing Stage identiﬁer number var answer = 42; keyword equal sign semicolon Variable Declaration Identiﬁer Literal Constant

JavaScript Parser (Written in JavaScript) Esprima UglifyJS Narcissus ZeParser Traceur Es-Lab

Syntax Tree Visualization answer = 42

Style Formatter https://github.com/fawek/codepainter Sample code Source CodePainter Formatted source Indentation Infer coding Quote for string styles literal Whitespace

Code Outline EclipseFunctions Variables

Application StructureExt.define(My.sample.Person, { Class manifest name: Mr. Unknown, age: 42, { constructor: function(name) {}, className: My.sample.Person, functions: [walk, run], walk: function(steps) {} properties: [name, age] run: function(steps) {} }});

Content Assist (aka Intellisense aka Autocomplete) Eclipse http://contraptionsforprogramming.blogspot.com/2012/02/better-javascript-content-assist-in.html

Error Tolerant Mismatched quote var msg = "Hello’; Too many dots person..age = 18; Incomplete, still typing if (person. use strict; Strict mode violation with (person) { }

Code Linting var fs = require(fs), Not a strict equal esprima = require(./esprima), files = process.argv.splice(2); files.forEach(function (filename) {if (x == 9) { var content = fs.readFileSync(filename, utf-8), // do Something syntax = esprima.parse(content, { loc: true }); } JSON.stringify(syntax, function (key, value) { if (key === test && value.operator === ==) console.log(Line, value.loc.start.line); return value; }); });

Copy Paste Mistake function inside(point, rect) { return (point.x >= rect.x1) && (point.y >= rect.y1) && (point.x <= rect.x2) && (point.y <= rect.y1); } Wrong check

“Boolean Trap” Finder http://ariya.oﬁlabs.com/2011/08/hall-of-api-shame-boolean-trap.html Obfuscated choice var volumeSlider = new Slider(false); Double-negative component.setHidden(false); filter.setCaseInsensitive(false);Can you make up your mind? treeItem.setState(true, false); The more the merrier event.initKeyEvent("keypress", true, true, null, null, false, false, false, false, 9, 0);

Refactoring Helper // Add two numbers // Add two numbers function add(firt, two) { function add(first, two) { return firt + two; return first + two; } }

Syntax = Messagevar Foo = (function () { return { module Foo { bar: function (x, y) { export function bar (x, y) { // do Something // do something } } }; }}; ES 5.1 Harmony Today ES 6/7, Future

Transpilation // Object literal property shorthand. function Point(x, y) { Harmony return { x, y }; } // Object literal property shorthand. ES 5.1 function Point(x, y) { return { x: x, y: y }; }

Development

Unit Test Frameworkhttp://www.trollquotes.org/image/5-gandalf-troll-quote.jpg

Automatic Reload Modiﬁed source Reload content

Remote Interaction http://www.sencha.com/blog/remote-javascript-debugging-on-android/ Weinre, Adobe Shadow, Remote Web Inspector,...

Fast Smoke Test Feedback Cycle

Precommit CheckTypical Scenario This is awesome! un t to r forge tests the Git: precommit hook http://ariya.oﬁlabs.com/2012/03/git-pre-commit-hook-and-smoke-testing.html

Zombie.js var Browser = require("zombie"); browser = new Browser(); browser.visit("http://mobileconference.nl", function () { console.log(browser.text("title")); });

PhantomJS (Headless WebKit) Paint Normal Browser Layout Display Paint XHeadless Operation Layout Display

Screen Capture = Pixel-Perfect Comparison phantomjs rasterize.js URL output

CasperJS var casper = require(casper).create(); casper.start(http://www.mobileconference.nl/, function() { this.echo(Page title is: + this.evaluate(function() { return document.title; }), INFO); }); casper.run();

Postcommit Quality Metrics Quality Factor 1 Check-in Quality Factor 2

Identifier Length Distribution mean of the identifier length is 8.27 characters 750 500 250 0 0 5 10 15 20 25 30 35 40 45 prototype-1.7.0.0.js SCRIPT_ELEMENT_REJECTS_TEXTNODE_APPENDING prototype-1.7.0.0.js MOUSEENTER_MOUSELEAVE_EVENTS_SUPPORTED jquery-1.7.1.js subtractsBorderForOverflowNotVisible jquery.mobile-1.0.js getClosestElementWithVirtualBinding prototype-1.7.0.0.js HAS_EXTENDED_CREATE_ELEMENT_SYNTAX http://ariya.ofilabs.com/2012/05/javascript-identifier-length-distribution.html

Statement DistributionExpressionStatement 6728 BlockStatement 6353 IfStatement 3063 ReturnStatement 2878 var fs = require(fs), VariableDeclaration 2116 esprima = require(esprima), FunctionDeclaration 371 files = process.argv.splice(2); ForStatement 293 files.forEach(function (filename) { ForInStatement 143 var content = fs.readFileSync(filename, utf-8), WhileStatement 131 syntax = esprima.parse(content); BreakStatement 115 JSON.stringify(syntax, function (key, value) { TryStatement 84 if (key === type) { EmptyStatement 66 if (value.match(/Declaration$/) || ThrowStatement 38 value.match(/Statement$/)) { SwitchStatement 35 console.log(value); ContinueStatement 25 } } DoWhileStatement 12 return value; LabeledStatement 6 }); }); http://ariya.oﬁlabs.com/2012/04/most-popular-javascript-statements.html

Platform Proliferation

BusterJS Test Suite Server Interface Test Server

Selenium Firefox Opera WebDriver Chrome WebDriver WebDriver WebDriver WebDriver Client

Code Coverage https://github.com/itay/node-cover https://github.com/coveraje/coveraje https://github.com/pmlopes/coberturajs x = 42; if (false) x = -1; http://ariya.oﬁlabs.com/2012/03/javascript-code-coverage-and-esprima.html

Instrumentation for Code Coverage { var a = 5; Statement __statement_ZyyqFc(1); var a = 5; } { __statement_ZyyqFc(2); foo(); Expression __expression_kC$jur(3), foo(); } function foo() { function foo() { __block_n53cJc(1); Block ... ... }; } http://itay.github.com/snug_codecoverage_slides/

Performance via Benchmarks.js var suite = new Benchmark.Suite; suite.add(String#indexOf, function() { Hello World!.indexOf(o) > -1; }) .on(complete, function() { console.log(Fastest is + this.filter(fastest).pluck(name)); }) .run(); JSPerf.com

Performance Baseline Baseline Execution time Application revision

Scalability via Run-time Complexity Analysis Array.prototype.swap = function (i, j) { var k = this[i]; this[i] = this[j]; this[j] = k; } Array.prototype.swap = function (i, j) { Log({ name: Array.prototype.swap, lineNumber: 1, range: [23, 94] }); var k = this[i]; this[i] = this[j]; this[j] = k; } http://ariya.oﬁlabs.com/2012/01/scalable-web-apps-the-complexity-issue.html

Execution Tracing 4640 function calls https://gist.github.com/1823129 jQuery Mobile startup log jquery.js 26 jQuery jquery.js 103 init undefined, undefined, [object Object] jquery.js 274 each (Function) jquery.js 631 each [object Object], (Function), undefined jquery.js 495 isFunction [object Object] jquery.js 512 type [object Object] jquery.mobile.js 1857 [Anonymous] jquery.mobile.js 642 [Anonymous] jquery.mobile.js 624 enableMouseBindings jquery.mobile.js 620 disableTouchBindingshttp://ariya.oﬁlabs.com/2012/02/tracking-javascript-execution-during-startup.html

Wrap-up

Coding style/lint, semantic outline, autocomplete, Edit API usage, refactoring, better syntax Test framework, remote control, precommit check,Develop automatic reload, fast smoke testing, preﬂight metrics Comprehensive browser driver, code coverage, QA performance baseline, execution tracking

To boldly analyze what no man has analyzed before...

Thank You ariya.hidayat@gmail.com ariya.oﬁlabs.com @AriyaHidayat

Strategies for End-to-End Web Apps Testing

by Ariya Hidayat on Jun 09, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 9

Statistics

Strategies for End-to-End Web Apps Testing Presentation Transcript

https://twitter.com	8
http://www.unscatter.com	1