2016-02-06 31 views
1

我有一個CasperJS測試套件需要驗證圖像onload事件。爲了驗證這一點,我有一個1x1像素的GIF圖片,這是我利用服務網絡服務器PhantomJS:PhantomJS webserver的CasperJS測試無法加載本地圖像

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

因爲window._pxLoad !== undefined沒有在5000毫秒的超時時間內評估該測試失敗。我甚至在圖像處理程序中放置了console.log語句,並且他們顯示我的路由有效,服務器確實收到了此調用,但看起來像git圖像根本沒有提供。 我試圖用來自互聯網的類似圖像this one替換本地電話px.gif,並通過測試!所以這個問題肯定涉及到PhantomJS web服務器如何提供本地gif圖像。

+0

是的,我知道casper的'resourceExists','waitForResource'等等。我有一個非常具體的測試用例可供參考。 – coquin

回答

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輸出中。現在圖像來自不同的域,這對我來說是完全正確的。現在測試正在工作。