html2canvas/tests/selenium.js

321 lines
11 KiB
JavaScript
Raw Normal View History

2012-12-28 21:41:14 +04:00
(function(){
2013-05-29 18:53:47 +04:00
"use strict;";
var WebDriver = require('sync-webdriver'),
Bacon = require('baconjs').Bacon,
express = require('express'),
http = require("http"),
2013-05-29 22:16:28 +04:00
https = require("https"),
2013-05-29 18:53:47 +04:00
url = require("url"),
path = require("path"),
base64_arraybuffer = require('base64-arraybuffer'),
PNG = require('png-js'),
fs = require("fs");
var port = 8080,
app = express(),
colors = {
red: "\x1b[1;31m",
blue: "\x1b[1;36m",
violet: "\x1b[0;35m",
green: "\x1b[0;32m",
clear: "\x1b[0m"
};
2012-12-28 01:06:47 +04:00
2013-05-29 18:53:47 +04:00
var server = app.listen(port);
2013-08-06 22:10:46 +04:00
app.use('/index.html', function(req, res){
res.send("<ul>" + tests.map(function(test) {
return "<li><a href='" + test + "'>" + test + "</a></li>";
}).join("") + "</ul>");
});
2013-05-29 18:53:47 +04:00
app.use('/', express.static(__dirname + "/../"));
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
function mapStat(item) {
return Bacon.combineTemplate({
stat: Bacon.fromNodeCallback(fs.stat, item),
item: item
2012-12-28 21:41:14 +04:00
});
2013-05-29 18:53:47 +04:00
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
function isDirectory(item) {
return item.stat.isDirectory();
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
function getItem(item) {
return item.item;
}
2012-12-22 18:28:34 +04:00
2013-05-29 18:53:47 +04:00
function isFile(item) {
return !isDirectory(item);
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
function arrayStream(arr) {
return Bacon.fromArray(arr);
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
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));
2012-12-28 01:06:47 +04:00
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
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));
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
function canvasToDataUrl(canvas) {
return canvas.toDataURL("image/png").substring(22);
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
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)
});
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
function closeServer() {
2012-12-28 21:41:14 +04:00
server.close();
2013-05-29 18:53:47 +04:00
}
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);
}
2012-12-28 21:41:14 +04:00
});
2013-05-29 18:53:47 +04:00
reportChanges(browser, improved, regressed, newItems);
}
2012-12-28 21:41:14 +04:00
2013-05-29 18:53:47 +04:00
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);
2012-12-29 17:02:05 +04:00
2013-05-29 18:53:47 +04:00
regressed.forEach(function(item) {
console.log(colors.red, item.amount + "%", item.test);
});
2012-12-28 01:06:47 +04:00
2013-05-29 18:53:47 +04:00
improved.forEach(function(item) {
console.log(colors.green, item.amount + "%", item.test);
});
2012-12-30 18:29:01 +04:00
2013-05-29 18:53:47 +04:00
newItems.forEach(function(item) {
console.log(colors.blue, "NEW", item.test);
});
}
}
2013-05-29 23:01:07 +04:00
function httpget(options) {
return Bacon.fromCallback(function(callback) {
2013-05-29 23:13:22 +04:00
https.get(options, function(res){
2013-05-29 23:01:07 +04:00
var data = '';
res.on('data', function (chunk){
data += chunk;
});
res.on('end',function(){
callback(data);
});
});
});
}
function parseJSON(str) {
return JSON.parse(str);
}
2013-05-29 18:53:47 +04:00
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) {}
2013-05-29 21:12:37 +04:00
var date = new Date();
var result = JSON.stringify({
browser: browser,
results: results[browser],
timestamp: date.toISOString()
});
2013-05-29 21:52:27 +04:00
if (process.env.MONGOLAB_APIKEY) {
2013-05-29 21:12:37 +04:00
var options = {
host: "api.mongolab.com",
port: 443,
2013-05-29 23:01:07 +04:00
path: "/api/1/databases/html2canvas/collections/webdriver-results?apiKey=" + process.env.MONGOLAB_APIKEY + '&q={"browser":"' + browser + '"}&fo=true&s={"timestamp":-1}'
};
httpget(options).map(parseJSON).onValue(function(data) {
compareResults(data.results, results[browser], browser);
options.method = 'POST';
options.path = "/api/1/databases/html2canvas/collections/webdriver-results?apiKey=" + process.env.MONGOLAB_APIKEY;
options.headers = {
2013-05-29 21:12:37 +04:00
'Content-Type': 'application/json',
'Content-Length': result.length
2013-05-29 23:01:07 +04:00
};
2013-05-29 21:12:37 +04:00
2013-05-29 23:01:07 +04:00
console.log("Sending results for", browser);
var request = https.request(options, function(res) {
console.log(colors.green, "Results sent for", browser);
});
2013-05-29 21:12:37 +04:00
2013-05-29 23:01:07 +04:00
request.write(result);
request.end();
});
2013-05-29 21:12:37 +04:00
}
2013-05-29 21:52:27 +04:00
console.log(colors.violet, "Writing", browser + ".json");
2013-05-29 21:12:37 +04:00
fs.writeFile(filename, result);
2013-05-29 18:53:47 +04:00
});
}
2013-05-29 18:53:47 +04:00
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;
}
2013-05-29 18:53:47 +04:00
function mapResults(result) {
if (!results[result.browser]) {
results[result.browser] = [];
}
2013-05-29 18:53:47 +04:00
results[result.browser].push({
test: result.testCase,
result: result.accuracy
});
}
function formatResultName(navigator) {
return (navigator.browser + "-" + ((navigator.version) ? navigator.version : "release") + "-" + navigator.platform).replace(/ /g, "").toLowerCase();
}
2012-12-30 18:29:01 +04:00
2013-05-29 18:53:47 +04:00
function webdriverStream(navigator) {
return Bacon.fromCallback(function(callback) {
new WebDriver.Session(webdriverOptions(navigator.browser, navigator.version, navigator.platform), function() {
var browser = this;
var resultStream = Bacon.fromArray(tests).flatMap(function(testCase) {
console.log(colors.green, "STARTING",formatResultName(navigator), testCase, colors.clear);
browser.url = "http://localhost:" + port + "/" + testCase + "?selenium";
var canvas = browser.element(".html2canvas", 15000);
var dataUrl = Bacon.constant(browser.execute(canvasToDataUrl, canvas));
var screenshot = Bacon.constant(browser.screenshot());
var result = dataUrl.flatMap(getPixelArray).combine(screenshot.flatMap(getPixelArray), calculateDifference);
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);
});
});
}
2012-12-30 18:29:01 +04:00
2013-05-29 18:53:47 +04:00
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,
2013-08-06 22:10:46 +04:00
results = {},
testStream = getTests("tests/cases");
2013-05-29 19:41:15 +04:00
2013-08-06 22:10:46 +04:00
testStream.onValue(function(test) {
tests.push(test);
});
2012-12-30 18:29:01 +04:00
2013-08-06 22:10:46 +04:00
exports.tests = function() {
testStream.onEnd(runWebDriver);
};
2012-12-29 17:02:05 +04:00
})();