如何使用phantomcss捕获iframe内组件的屏幕截图

我正在测试具有iframe的web应用程序。我使用phantomcss使用casper.withFrame截取iframe中的组件，但捕获的图像失真。如何使用phantomcss捕获iframe内组件的屏幕截图

我的主页是这样的 -

<html> 
    <head> 
    </head> 
    <body> 
     <iframe id="testFrame" src="http://localhost:8080/testFrame" width="80%" height="300px" style="margin-left: 10%"> 
      <p>Your browser does not support iframes.</p> 
     </iframe> 
    </body> 
</html>

IFRAME SRC看起来是这样的 -

<html> 
    <head> 
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <div class="a panel panel-default"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">Panel default title</h3> 
      </div> 
      <div class="panel-body"> 
      Panel default content 
      </div> 
     </div> 
    </body> 
</html>

我试图采取的<div class="a panel panel-default">截图。有谁知道我能做些什么来解决这个问题？

来源

2015-09-20 DRoy

我遇到类似的问题，以下为我工作 -

使用PhantomJS版本2
添加iframe的偏移，偏移成分

下面的代码片段应该有所帮助。

var iframeClipRect = casper.getElementBounds('#testFrame'); 
casper.withFrame('testFrame', function() { 
casper.waitUntilVisible('.a', 
    function success(){ 
     var comClipRect = casper.getElementBounds('.a'); 
     comClipRect.top = comClipRect.top + iframeClipRect.top; 
     comClipRect.left = comClipRect.left + iframeClipRect.left;        
     phantomcss.screenshot(comClipRect, 10000, undefined, 'Test_Screenshot_1'); 
    }, 

    function timeout() { 
     casper.test.fail('Element should be loaded!!'); 
    }, 50000 
); 
});

来源

2015-09-20 17:09:51

如何使用phantomcss捕获iframe内组件的屏幕截图

回答

相关问题