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

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

phantomjs

Phantomjs 如何使用phantomcss捕获iframe内组件的屏幕截图,phantomjs,casperjs,phantomcss,Phantomjs,Casperjs,Phantomcss,我正在测试一个具有iframe的web应用程序。我正在使用phantomcss使用casper.withFrame拍摄iframe内组件的屏幕截图，但捕获的图像失真我的主页是这样的- <html> <head> </head> <body> <iframe id="testFrame" src="http://localhost:8080/testFrame" width="80%" height=

我正在测试一个具有iframe的web应用程序。我正在使用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

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>


面板默认标题
面板默认内容

我正在尝试拍摄

的屏幕截图。

有人知道我能做些什么来解决这个问题吗？

我遇到了一个类似的问题，下面的内容对我很有用-

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