use sync-webdriver for selenium tests

package.json

@@ -4,7 +4,7 @@
   "description": "Screenshots with JavaScript",
   "version": "0.4.0",
   "author": {
-    "name":"Niklas von Hertzen (@niklasvh)"
+    "name": "Niklas von Hertzen (@niklasvh)"
   },
   "engines": {
     "node": ">=0.8.0"
@@ -12,9 +12,11 @@
   "dependencies": {
     "base64-arraybuffer": ">= 0.1.0",
     "png-js": ">= 0.1.1",
-    "webdriver.js": ">= 0.1.0"
+    "sync-webdriver": ">=0.1.1",
+    "express": "~3.2.3",
+    "baconjs": "~0.3.15"
   },
-  "devDependencies":{
+  "devDependencies": {
     "grunt": ">=0.4.0",
     "grunt-contrib-concat": "*",
     "grunt-contrib-uglify": "*",
@@ -22,8 +24,9 @@
     "grunt-contrib-qunit": "*"
   },
   "homepage": "http://html2canvas.hertzen.com",
-  "licenses": [{
+  "licenses": [
-    "type": "MIT"
+    {
-  }]
+      "type": "MIT"
-
+    }
-}
+  ]
+}

tests/selenium.js

@@ -1,303 +1,265 @@
 (function(){
-  "use strict;"
+    "use strict;";
-  var webdriver = require("webdriver.js").webdriver,
+    var WebDriver = require('sync-webdriver'),
-  http = require("http"),
+        Bacon = require('baconjs').Bacon,
-  url = require("url"),
+        express = require('express'),
-  path = require("path"),
+        http = require("http"),
-  base64_arraybuffer = require('base64-arraybuffer'),
+        url = require("url"),
-  PNG = require('png-js'),
+        path = require("path"),
-  fs = require("fs");
+        base64_arraybuffer = require('base64-arraybuffer'),
+        PNG = require('png-js'),
+        fs = require("fs");
 
-  function createServer(port) {
+    var port = 8080,
-    return http.createServer(function(request, response) {
+        app = express(),
-      var uri = url.parse(request.url).pathname,
+        colors = {
-      filename = path.join(process.cwd(), uri);
+            red: "\x1b[1;31m",
+            blue: "\x1b[1;36m",
+            violet: "\x1b[0;35m",
+            green: "\x1b[0;32m",
+            clear: "\x1b[0m"
+        };
 
-      fs.exists(filename, function(exists) {
+    var server = app.listen(port);
-        if(!exists) {
+    app.use('/', express.static(__dirname + "/../"));
-          response.writeHead(404, {
+
-            "Content-Type": "text/plain"
+    function mapStat(item) {
-          });
+        return Bacon.combineTemplate({
-          response.write("404 Not Found\n");
+            stat: Bacon.fromNodeCallback(fs.stat, item),
-          response.end();
+            item: item
-          return;
+        });
+    }
+
+    function isDirectory(item) {
+        return item.stat.isDirectory();
+    }
+
+    function getItem(item) {
+        return item.item;
+    }
+
+    function isFile(item) {
+        return !isDirectory(item);
+    }
+
+    function arrayStream(arr) {
+        return Bacon.fromArray(arr);
+    }
+
+    function getTests(path) {
+        var items = Bacon.fromNodeCallback(fs.readdir, path).flatMap(arrayStream).map(function(name) {
+            return path + "/" + name;
+        }).flatMap(mapStat);
+        return items.filter(isFile).map(getItem).merge(items.filter(isDirectory).map(getItem).flatMap(getTests));
+    }
+
+
+    function getPixelArray(base64) {
+        return Bacon.fromCallback(function(callback) {
+            var arraybuffer = base64_arraybuffer.decode(base64);
+            (new PNG(arraybuffer)).decode(callback);
+        });
+    }
+
+    function calculateDifference(h2cPixels, screenPixels) {
+        var len = h2cPixels.length, index = 0, diff = 0;
+        for (; index < len; index++) {
+            if (screenPixels[index] - h2cPixels[index] !== 0) {
+                diff++;
+            }
+        }
+        return (100 - (Math.round((diff/h2cPixels.length) * 10000) / 100));
+    }
+
+    function canvasToDataUrl(canvas) {
+        return canvas.toDataURL("image/png").substring(22);
+    }
+
+    function createImages(data) {
+        return Bacon.combineTemplate({
+            dataurl: Bacon.fromNodeCallback(fs.writeFile, "tests/results/captures/" + data.testCase.replace(/\//g, "-") + "-html2canvas.png", data.dataUrl, "base64"),
+            screenshot: Bacon.fromNodeCallback(fs.writeFile, "tests/results/captures/" + data.testCase.replace(/\//g, "-") + "-screencapture.png", data.screenshot, "base64"),
+            data: Bacon.constant(data)
+        });
+    }
+
+    function closeServer() {
+        server.close();
+    }
+
+    function findResult(testName, tests) {
+        var item = null;
+        return tests.some(function(testCase) {
+            item = testCase;
+            return testCase.test === testName;
+        }) ? item : null;
+    }
+
+    function compareResults(oldResults, newResults, browser) {
+        var improved = [],
+            regressed = [],
+            newItems = [];
+
+        newResults.forEach(function(testCase){
+            var testResult = testCase.result,
+                oldResult = findResult(testCase.test, oldResults),
+                oldResultValue = oldResult ? oldResult.result : null,
+                dataObject = {
+                    amount: (Math.abs(testResult - oldResultValue) < 0.01) ? 0 : testResult - oldResultValue,
+                    test: testCase.test
+                };
+            if (oldResultValue === null) {
+                newItems.push(dataObject);
+            } else if (dataObject.amount > 0) {
+                improved.push(dataObject);
+            } else if (dataObject.amount < 0) {
+                regressed.push(dataObject);
+            }
+        });
+
+        reportChanges(browser, improved, regressed, newItems);
+    }
+
+    function reportChanges(browser, improved, regressed, newItems) {
+        if (newItems.length > 0 || improved.length > 0 || regressed.length > 0) {
+            console.log((regressed.length > 0) ? colors.red : colors.green, browser);
+
+            regressed.forEach(function(item) {
+                console.log(colors.red, item.amount + "%", item.test);
+            });
+
+            improved.forEach(function(item) {
+                console.log(colors.green, item.amount + "%", item.test);
+            });
+
+            newItems.forEach(function(item) {
+                console.log(colors.blue, "NEW", item.test);
+            });
+        }
+    }
+
+    function writeResults() {
+        Object.keys(results).forEach(function(browser) {
+            var filename = "tests/results/" + browser + ".json";
+            try {
+                var oldResults = JSON.parse(fs.readFileSync(filename));
+                compareResults(oldResults, results[browser], browser);
+            } catch(e) {}
+
+            console.log(colors.violet, "Writing", browser + ".json");
+            fs.writeFile(filename, JSON.stringify(results[browser]));
+        });
+    }
+
+    function webdriverOptions(browserName, version, platform) {
+        var options = {};
+        if (process.env.SAUCE_USERNAME && process.env.SAUCE_ACCESS_KEY) {
+            options = {
+                port: 4445,
+                hostname: "localhost",
+                username: process.env.SAUCE_USERNAME,
+                password: process.env.SAUCE_ACCESS_KEY,
+                desiredCapabilities: {
+                    browserName: browserName,
+                    version: version,
+                    platform: platform,
+                    "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER
+                }
+            };
+        }
+        return options;
+    }
+
+    function mapResults(result) {
+        if (!results[result.browser]) {
+            results[result.browser] = [];
         }
 
-        if (fs.statSync(filename).isDirectory()) filename += '/index.html';
+        results[result.browser].push({
-
+            test: result.testCase,
-        fs.readFile(filename, "binary", function(err, file) {
+            result: result.accuracy
-          if(err) {
-            response.writeHead(500, {
-              "Content-Type": "text/plain"
-            });
-            response.write(err + "\n");
-            response.end();
-            return;
-          }
-
-          response.writeHead(200);
-          response.write(file, "binary");
-          response.end();
         });
-      });
-
-    }).listen(port);
-  }
-
-  function walkDir(dir, done) {
-    var results = [];
-    fs.readdir(dir, function(err, list) {
-      if (err) return done(err);
-      var i = 0;
-      (function next() {
-        var file = list[i++];
-        if (!file) return done(null, results);
-        file = dir + '/' + file;
-        fs.stat(file, function(err, stat) {
-          if (stat && stat.isDirectory()) {
-            walkDir(file, function(err, res) {
-              results = results.concat(res);
-              next();
-            });
-          } else {
-            results.push(file);
-            next();
-          }
-        });
-      })();
-    });
-  };
-
-  function getPixelArray(base64, func) {
-    var arraybuffer = base64_arraybuffer.decode(base64);
-    (new PNG(arraybuffer)).decode(func);
-  }
-
-  function getBaselineFiles() {
-    return fs.readdirSync("tests/results/").filter(function(name) {
-      return /\.baseline$/.test(name);
-    }).map(function(item) {
-      return "tests/results/" + item;
-    });
-  }
-
-  function testPage(browser, url, done) {
-    browser.url(url)
-    .$(".html2canvas", 5000, function(){
-      this.execute(function(){
-        var canvas = $('.html2canvas')[0];
-        return canvas.toDataURL("image/png").substring(22);
-      },[], function(dataurl) {
-        getPixelArray(dataurl, function(h2cPixels) {
-          browser.screenshot(function(base64){
-            getPixelArray(base64, function(screenPixels) {
-              var len = h2cPixels.length, index = 0, diff = 0;
-              for (; index < len; index++) {
-                if (screenPixels[index] - h2cPixels[index] !== 0) {
-                  diff++;
-                }
-              }
-              done(100 - (Math.round((diff/h2cPixels.length) * 10000) / 100));
-            });
-          });
-        });
-      });
-    });
-  }
-
-  var writeResultFile = function(filename, json, append) {
-    fs.writeFile(filename + (append || ""), json);
-  };
-
-  var openResultFile = function(stats, browser) {
-    var tests = stats[browser].tests,
-    filename = "tests/results/" + browser + ".json",
-    write = writeResultFile.bind(null, filename, JSON.stringify(stats[browser]));
-
-    fs.exists(filename, function(exists) {
-      if(exists) {
-        fs.readFile(filename, "binary", parseResultFile.bind(null, tests, browser, write));
-      } else {
-        write();
-      }
-    });
-  };
-
-  var setColor = function(color, text) {
-    return [color, "  * ", ((isNaN(text.amount)) ? "NEW" : text.amount + "%"), " ", text.test].join("");
-  };
-
-  var parseResultFile = function(tests, browser, createResultFile, err, file) {
-    if (err) throw err;
-    var data = JSON.parse(file),
-    improved = [],
-    regressed = [],
-    newItems = [],
-    colors = {
-      red: "\x1b[1;31m",
-      blue: "\x1b[1;36m",
-      violet: "\x1b[0;35m",
-      green: "\x1b[0;32m"
-    };
-
-    Object.keys(tests).forEach(function(test){
-      var testResult = tests[test],
-      dataResult = data.tests[test],
-      dataObject = {
-        amount: (Math.abs(testResult - dataResult) < 0.02) ? 0 : testResult - dataResult,
-        test: test
-      };
-
-      if (dataObject.amount > 0) {
-        improved.push(dataObject);
-      } else if (dataObject.amount < 0) {
-        regressed.push(dataObject);
-      } else if (dataResult === undefined) {
-        newItems.push(dataObject);
-      }
-
-    });
-
-    if (newItems.length > 0 || improved.length > 0 || regressed.length > 0) {
-      if (regressed.length === 0) {
-        createResultFile(".baseline");
-      }
-
-      console.log(colors.violet, "********************");
-      console.log((regressed.length > 0) ? colors.red : colors.green, browser);
-
-      improved.map(setColor.bind(null, colors.green))
-      .concat(regressed.map(setColor.bind(null, colors.red)))
-      .concat(newItems.map(setColor.bind(null, colors.blue)))
-      .forEach(function(item) {
-        console.log(item);
-      });
     }
 
-  };
+    function formatResultName(navigator) {
-
+        return (navigator.browser + "-" + ((navigator.version) ? navigator.version : "release") + "-" + navigator.platform).replace(/ /g, "").toLowerCase();
-  function handleResults(stats) {
-    Object.keys(stats).forEach(openResultFile.bind(null, stats));
-  }
-
-  function runBrowsers(pages){
-
-    var port = 5555,
-    stats = {},
-    browsers = ["chrome", "firefox", "internet explorer"],
-    browsersDone = 0,
-    server = createServer(port),
-    numPages = pages.length;
-
-    var browserDone = function() {
-      if (++browsersDone >= browsers.length) {
-        server.close();
-        handleResults(stats);
-      }
-    };
-
-    browsers.forEach(function(browserName){
-      var browser = new webdriver({
-        browser: browserName
-      }),
-      browserType;
-      browserName = browserName.replace("internet explorer", "iexplorer");
-      browser.status(function(browserInfo){
-        browserType = [browserName, browser.version, browserInfo.os.name.replace(/\s+/g, "-").toLowerCase()].join("-");
-        var date = new Date(),
-        obj = {
-          tests: {},
-          date: date.toISOString(),
-          version: browser.version
-        };
-        stats[browserType] = obj;
-        stats[browserName] = obj;
-        processPage(0);
-      });
-
-      function processPage(index) {
-        var page = pages[index++];
-        testPage(browser, "http://localhost:" + port + "/" + page + "?selenium", function(result) {
-          if (numPages > index) {
-            processPage(index);
-          } else {
-            browser.close(browserDone);
-          }
-          stats[browserType].tests[page] = result;
-        });
-      }
-
-    });
-  }
-
-  exports.tests = function() {
-    getBaselineFiles().forEach(fs.unlinkSync.bind(fs));
-    walkDir("tests/cases", function(err, results) {
-      if (err) throw err;
-      runBrowsers(results);
-    });
-  };
-
-  exports.baseline = function() {
-    getBaselineFiles().forEach(function(file) {
-      var newName = file.substring(0, file.length - 9);
-      fs.renameSync(file, newName);
-      console.log(newName, "created");
-    });
-  };
-
-  exports.markdown = function() {
-    var data = {},
-        html = "<table><thead><tr><td></td>",
-        md = " | ",
-        browsers = ["chrome", "firefox", "iexplorer", "safari"],
-        activeBrowsers = [];
-
-    // Create row for browsers
-    browsers.forEach(function(browser) {
-
-       if (fs.existsSync("tests/results/" + browser + ".json")) {
-
-        var fileContents = fs.readFileSync("tests/results/" + browser + ".json");
-        data[browser] = JSON.parse(fileContents);
-
-        activeBrowsers.push(browser);
-            
-        html += "<th>" + browser + "<br />" + data[browser].version + "</th>";
-        md += browser + data[browser].version + " | ";
-      } else {
-        console.log("Browser report not found. ", browser + ".json");
-      }
-
-    });
-
-    html += "</tr></thead><tbody>\n";
-    md += "\n ----";
-    for (var i = activeBrowsers.length - 1; i >= 0; i--) {
-      md += "|---- ";
     }
-    md += "\n";
 
-    Object.keys(data[activeBrowsers[0]].tests).forEach(function(testFile) {
+    function webdriverStream(navigator) {
+        return Bacon.fromCallback(function(callback) {
+            new WebDriver.Session(webdriverOptions(navigator.browser, navigator.version, navigator.platform), function() {
+                var browser = this;
 
-      html += "<tr><td>" + testFile.substring(12) + "</td>";
+                var resultStream = Bacon.fromArray(tests).flatMap(function(testCase) {
-      md += testFile.substring(12);
+                    console.log(colors.green, "STARTING",formatResultName(navigator), testCase, colors.clear);
-      activeBrowsers.forEach(function(activeBrowsers) {
+                    browser.url = "http://localhost:" + port + "/" + testCase + "?selenium";
-        html += "<td>" + Math.round(data[activeBrowsers].tests[testFile] * 100) / 100 + "%</td>";
+                    var canvas = browser.element(".html2canvas", 15000);
-        md += " | " + Math.round(data[activeBrowsers].tests[testFile] * 100) / 100 + "%";
+                    var dataUrl = Bacon.constant(browser.execute(canvasToDataUrl, canvas));
-      });
+                    var screenshot = Bacon.constant(browser.screenshot());
-      html += "</tr>\n";
+                    var result =  dataUrl.flatMap(getPixelArray).combine(screenshot.flatMap(getPixelArray), calculateDifference);
-      md += "\n";
+                    console.log(colors.green, "COMPLETE", formatResultName(navigator), testCase, colors.clear);
+                    return Bacon.combineTemplate({
+                        browser: formatResultName(navigator),
+                        testCase: testCase,
+                        accuracy: result,
+                        dataUrl: dataUrl,
+                        screenshot: screenshot
+                    });
+                });
+                resultStream.onValue(mapResults);
+                resultStream.onEnd(callback);
+            });
+        });
+    }
+
+    function runWebDriver() {
+        var browsers = [
+            {
+                browser: "chrome",
+                platform: "Windows 7"
+            },{
+                browser: "firefox",
+                version: "15",
+                platform: "Windows 7"
+            },{
+                browser: "internet explorer",
+                version: "9",
+                platform: "Windows 7"
+            },{
+                browser: "internet explorer",
+                version: "10",
+                platform: "Windows 8"
+            },{
+                browser: "safari",
+                version: "6",
+                platform: "OS X 10.8"
+            },{
+                browser: "chrome",
+                platform: "OS X 10.8"
+            }
+        ];
+
+        var testRunnerStream = Bacon.sequentially(1000, browsers).flatMap(webdriverStream);
+        testRunnerStream.onEnd(writeResults);
+        testRunnerStream.onEnd(closeServer);
+    }
+
+    var tests = [],
+        outputImages = false,
+        results = {},
+        testStream = getTests("tests/cases");
+
+    testStream.onValue(function(test) {
+        tests.push(test);
     });
 
-    html += "</tbody></table>";
+    /*
-
+    if (outputImages) {
-    // if (isMarkdown){
+        resultStream.flatMap(createImages).onValue(function(test){
-    //   fs.writeFileSync("tests/readme.md", md);
+            console.log(test.data.testCase, "screenshots created");
-    // } else {
+        });
-      fs.writeFileSync("tests/readme.md", html);
+    }
-    // }
+    */
-    
-  };
 
+    testStream.onEnd(runWebDriver);
 })();