如何使用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內組件的屏幕截圖

回答

相關問題