Question

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

my $gifdata;
BEGIN { $gifdata = MIME::Base64::decode(
            "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }
print $gifdata;

此测试失败，因为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(); }); } });未在5000毫秒超时内评估。我甚至将window._pxLoad !== undefined语句放在图像处理程序中，并且它们显示我的路由工作正常，服务器确实接收到此console.log调用，但看起来git image根本没有服务。我尝试用来自互联网的类似图像this one替换对本地/px.gif的调用，并且测试通过了！所以问题肯定与PhantomJS网络服务器如何提供本地gif图像有关。

Answer 1

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

<强> 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输出中图像文件的路径。现在图像来自不同的域，这对我来说完全没问题。现在测试正在进行中。

使用PhantomJS webserver进行CasperJS测试无法加载本地图像

1 个答案: