Как захватить снимок экрана компонента внутри iframe с помощью phantomcss

Я тестирую веб-приложение, имеющее iframe. Я использую phantomcss, чтобы сделать снимок экрана для компонента внутри iframe, используя casper.withFrame, но изображение захвачено искажено.Как захватить снимок экрана компонента внутри iframe с помощью phantomcss

Моя главная страница, как это -

<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 ЦСИ выглядит так -

<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

Как захватить снимок экрана компонента внутри iframe с помощью phantomcss

ответ

Смежные вопросы