1

iframe を持つ Web アプリケーションをテストしています。casper.withFrame を使用して、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">。これを修正するために私ができることを誰かが知っていますか?

4

1 に答える 1

1

私は同様の問題に直面し、次のことがうまくいきました-

  1. PhantomJS バージョン 2 を使用する
  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-20T17:09:51.093 に答える