CODEWITHSUNDEEP
phantomjscasperjsphantomcss
DRoy
DRoy

Reputation: 13

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

I am testing a web application which has an iframe. I am using phantomcss to take screenshot of a component inside an iframe using casper.withFrame, but the image captured is distorted.

My main page is like this -

<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 looks like this -

<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>

I am trying to take screenshot of <div class="a panel panel-default">. Does anyone know what I can do to fix this?

Upvotes: 1

Views: 837

Answers (1)

Abhay Tripathi
Abhay Tripathi

Reputation: 26

I faced a similar issue and following worked for me -

  1. Use PhantomJS version 2
  2. Add the iframe's offset to the component offset

Following snippet should help.

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

Upvotes: 1

Related Questions