左边的图像是右边渲染的casper脚本是渲染的chrome。我模糊了副本和图像,以保护品牌标识。
我按照这个例子来开发我的屏幕捕获脚本 http://code.tutsplus.com/tutorials/responsive-screenshots-with-casper--net-33142
我最终得到了一个不正确的主页呈现。看起来好像页面的一个部分的宽度是硬编码的。
在我的代码中,我创建了一个视口参数数组和userAgent。然后遍历数组。当我调用casper.thenOpen时,我会等待1000ms然后再截取屏幕截图。当我看到问题时,我添加了1000毫秒的等待,但没有任何区别。
var viewportSizes = [
[1280,800,'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.122 Safari/537.36'],
[1440,900,'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.122 Safari/537.36']
],
url = 'http://MY_DOMAIN/',
saveDir = 'tests/casperjs/screenshots/' + url.replace(/[^a-zA-Z0-9]/gi, '-').replace(/^https?-+/, '');
casper.start();
casper.each(viewportSizes, function(self, viewportSize, i) {
// set two vars for the viewport height and width as we loop through each item in the viewport array
var width = viewportSize[0],
height = viewportSize[1],
userAgent = viewportSize[2];
//give some time for the page to load
casper.wait(5000, function() {
//set the viewport to the desired height and width
this.viewport(width, height);
this.userAgent(userAgent);
casper.thenOpen(url, function() {
this.echo('Opening at ' + width);
//Set up two vars, one for the fullpage save, one for the actual viewport save
var FPfilename = saveDir + '/fullpage-' + width + ".png";
var ACfilename = saveDir + '/' + width + '-' + height + ".png";
//Capture selector captures the whole body
this.captureSelector(FPfilename, 'body');
//capture snaps a defined selection of the page
this.capture(ACfilename,{top: 0,left: 0,width: width, height: height});
this.echo('snapshot taken');
});
});
});
casper.run(function() {
this.echo('Finished captures for ' + url).exit();
});
我正在通过使用PhantomJS引擎的繁重任务执行此操作。我想知道它是否与PhantomJS解释CSS的方式有关。由于PhantomJS正在使用Webkit,我希望它能够像谷歌Chrome一样呈现页面。