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

Question

我正在测试具有 iframe 的网络应用程序。我正在使用 phantomcss 使用 casper.withFrame 对 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"> 的屏幕截图。有谁知道我可以做些什么来解决这个问题？

Answer 1

我遇到了类似的问题，以下对我有用 -

使用 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
);
});

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

How to capture screenshot of a component inside an iframe using phantomcss

phantomjs

casperjs

phantomcss