CODEWITHSUNDEEP
phantomjscasperjs
coquin
coquin

Reputation: 1386

CasperJS test with PhantomJS webserver fails to load local image

I have a CasperJS test suite that needs to verify an image onload event. To test this I have a 1x1 pixel gif image, which I serve using PhantomJS webserver:

var fs = require('fs');
var webserver = require('webserver');

casper.test.begin('Image onload should be 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 successfully loaded');
            });
        });

        casper.run(function () {
            test.done();
        });
    }
});

This test fails because window._pxLoad !== undefined did not evaluate within the 5000ms timeout. I even placed console.log statements inside image handler and they showed that my routing works, server do receive this /px.gif call, but looks like git image isn't served at all. I tried to replace the call to local px.gif with the similar image from the Internet, this one, and test passed! So the problem is definitely relates to how local gif image is served by PhantomJS webserver.

Upvotes: 1

Views: 284

Answers (1)

coquin
coquin

Reputation: 1386

Ok, looks like I've found an answer by myself. Well, sort of. First of all, I couldn't make my PhantomJS webserver solution work. So I created a simple Node.js script which runs a webserver. It is spawned as a 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);

// This is important. Script should put something in the STDOUT when started.
// The CasperJS test suite will bind to this inside setUp hook to know when server is ready
console.log('Server running at http://127.0.0.1:' + port + '/');

Changes to 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']);
    // This where STDOUT from server script is used
    this.imgServerChild.stdout.on("data", done);
});
casper.test.tearDown(function() {
    this.imgServerChild.kill('SIGKILL');
});

// The rest of test suite

Of course I also changed the path to the image file inside the faked HTML output. Now image is served from different domain, which is totally fine for me. Now tests are working.

Upvotes: 1

Related Questions