CasperJS test with PhantomJS webserver fails to load local image -
i have casperjs test suite needs verify image onload event. test have 1x1 pixel gif image, serve using phantomjs webserver:
var fs = require('fs'); var webserver = require('webserver'); casper.test.begin('image onload should invoked', 1, { setup: function() { var server = webserver.create(); this.server = server.listen(8080, function(request, response) { if (request.url == '/') { response.writehead(200, { 'content-type': 'text/html' }); response.write('' + '<!doctype html>\n' + '<html>\n' + '<head>\n' + '<script type="text/javascript">\n' + 'window.onload = function() {\n' + 'var px = document.createelement("img");\n' + 'px.onload = function() {\n' + 'window._pxload = true;\n' + '};\n' + 'px.src = "px.gif";\n' + '};\n' + '</script>\n' + '</head>\n' + '<body></body>\n' + '</html>' + ''); } else if (request.url.match(/px\.gif$/i)) { response.writehead(200, { 'content-type': 'image/gif', 'cache-control': 'no-cache' }); var filepath = fs.workingdirectory + request.url.split('/').join(fs.separator).replace(/\d/gi, ''); response.write(fs.read(filepath)); } response.close(); }); }, teardown: function() { this.server.close(); }, test: function(test) { casper.start('http://localhost:8080', function() { this.waitfor(function() { return this.evaluate(function () { return window._pxload !== undefined; }); }, function then() { var flag = this.evaluate(function () { return window._pxload; }); test.asserttruthy(flag, 'image has been loaded'); }); }); casper.run(function () { test.done(); }); } });
this test fails because window._pxload !== undefined
did not evaluate within 5000ms timeout. placed console.log
statements inside image handler , showed routing works, server receive /px.gif
call, looks git image isn't served @ all. tried replace call local px.gif
similar image internet, this one, , test passed! problem relates how local gif image served phantomjs webserver.
ok, looks i've found answer myself. well, sort of. first of all, couldn't make phantomjs webserver solution work. created simple node.js script runs webserver. spawned child process before running test suite:
img_server.js
var http = require('http'); var fs = require('fs'); var path = require('path'); var argv = process.argv; var port = argv.length > 3 ? parseint(argv[3], 10) || 8124; http.createserver(function(req, res) { var filestream = fs.createreadstream(path.join(__dirname, 'px.gif')); res.writehead(200, { 'content-type': 'image/gif', 'cache-control': 'no-cache' }); filestream.pipe(res); }).listen(port); // important. script should put in stdout when started. // casperjs test suite bind inside setup hook know when server ready console.log('server running @ http://127.0.0.1:' + port + '/');
changes casperjs test suite:
var fs = require('fs'); var webserver = require('webserver'); var process = require('child_process'); var spawn = process.spawn; casper.test.setup(function(done) { this.imgserverchild = spawn('node', ['img_server.js', '-p', '8180']); // stdout server script used this.imgserverchild.stdout.on("data", done); }); casper.test.teardown(function() { this.imgserverchild.kill('sigkill'); }); // rest of test suite
of course changed path image file inside faked html output. image served different domain, totally fine me. tests working.
Comments
Post a Comment