使用PhantomJS Web服务器的CasperJS测试无法加载本地映像_Phantomjs_Casperjs

使用PhantomJS Web服务器的CasperJS测试无法加载本地映像

phantomjs

使用PhantomJS Web服务器的CasperJS测试无法加载本地映像,phantomjs,casperjs,Phantomjs,Casperjs,我有一个CasperJS测试套件，需要验证映像加载事件。为了测试这一点，我有一个1x1像素的gif图像，我使用PhantomJS Web服务器提供： var fs = require('fs'); var webserver = require('webserver'); casper.test.begin('Image onload should be invoked', 1, { setUp: function() { var server = webserver.

我有一个CasperJS测试套件，需要验证映像加载事件。为了测试这一点，我有一个1x1像素的gif图像，我使用PhantomJS Web服务器提供：

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();
        });
    }
});

var fs=require（'fs'）；
var webserver=require（'webserver'）；
casper.test.begin（'应调用映像onload'，1{
设置：函数（）{
var server=webserver.create（）；
this.server=server.listen（8080，函数（请求，响应）{
如果（request.url=='/'）{
writeHead（200，{'Content-Type'：'text/html'}）；
回答。写（“”）+
“\n”+
“\n”+
“\n”+
“\n”+
'window.onload=function（）{\n'+
'var px=document.createElement（“img”）；\n'+
'px.onload=function（）{\n'+
'window.\u pxLoad=true；\n'+
“}；\n”+
'px.src=“px.gif”；\n+
“}；\n”+
“\n”+
“\n”+
“\n”+
'' +
'');
}else if（request.url.match（/px\.gif$/i））{
书面答复（200{
“内容类型”：“图像/gif”，
“缓存控制”：“无缓存”
});
var filePath=fs.workingDirectory+request.url.split（'/'）.join（fs.separator.replace（/\d/gi'）；
response.write（fs.read（filePath））；
}
response.close（）；
});
},
拆卸：函数（）{
this.server.close（）；
},
测试：功能（测试）{
卡斯珀，开始http://localhost:8080，函数（）{
this.waitFor（函数（）{
返回此值。评估（函数（）{
返回窗口。_pxLoad！==未定义；
});
}，函数then（）{
var flag=this.evaluate（函数（）{
返回窗口；
});
assertTruthy（标记“图像已成功加载”）；
});
});
casper.run（函数（）{
test.done（）；
});
}
});

此测试失败，因为

window.\u pxLoad！==未定义的

未在5000ms超时内计算。我甚至将

console.log

语句放在图像处理程序中，它们显示我的路由工作正常，服务器确实收到了这个

/px.gif

调用，但看起来根本没有提供git图像。

我试图用来自互联网的类似图像替换对local

px.gif

的调用，测试通过了！所以问题肯定与PhantomJS Web服务器如何提供本地gif图像有关。

好的，看来我自己找到了答案。嗯，有点。首先，我无法使我的PhantomJS Web服务器解决方案工作。因此，我创建了一个运行Web服务器的简单Node.js脚本。它在运行测试套件之前作为子进程生成：

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

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 + '/');

对CasperJS测试套件的更改：

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

当然，我还更改了伪造HTML输出中图像文件的路径。现在的图像是从不同的领域，这是完全适合我。现在测试正在进行。

是的，我知道casper的

resourceExists

，

waitForResource

和其他一些。我有一个非常具体的测试用例要涵盖。