CODEWITHSUNDEEP
javascripthtmliframephantomjscasperjs
tnp
tnp

Reputation: 41

Loading and capture iframe with casperjs

I have an iframe within my page, i tried loading the content of the iframe and then to capture the frame image as:

{code}
casper.waitForSelector('button#ldPg', function() {
            this.click("button#ldPg");
            this.echo('I just clicked on ldPg');

casper.withFrame(0, function () {
        casper.thenOpen(mylink, function() {
            });
        }); 

casper.wait(10000, function() {
        this.echo("I've waited for 10 second.");
        });

casper.then(function() {
        this.capture(mydir + 'iframe1.png', {
            top: 0, left: 0, width: 1000, height: 1000
            });
        });
    });
{code}

When i run this, i see that the iframe image is captured but blank, the content(such as where to fill in Fname, Lname, email, etc) are not there. I'd like to see the forms in the frame, Any better ideas on this will really help.

Upvotes: 2

Views: 4052

Answers (2)

tnp
tnp

Reputation: 41

This exactly solved my issues. The reason it was not captured was due to http/https. on my local system, it captures correctly with the code below:

casper.waitForSelector('button#loadPage', function() {
  this.click("button#loadSSOPage");
  this.echo('clicked on Load Page');
  casper.wait(10000);          
  casper.thenEvaluate(function(){
    var f = document.querySelector("iframe");
    f.src = url;
  }).wait(6000);

  casper.then(function(){
    this.captureSelector(image_dir + "iframe.png", "iframe");
      this.capture(image_dir + "whole_page.png");
     });
  }); 
});

Upvotes: 1

Artjom B.
Artjom B.

Reputation: 61892

If you really need to load a page inside of the iframe, then you're doing it wrong. Calling thenOpen (even inside of withFrame) will load the URL in the page not the iframe. What you need to do instead is exchanging the source of the iframe:

var outerURL = "http://example.com";
casper.thenEvaluate(function(url){
    var f = document.querySelector("iframe"); // the first iframe that is found
    f.src = url;
}, outerURL).wait(2000);

Keep in mind that you thenEvaluate is the page context which is sandboxed, so you need to pass variables specifically into it. You can't just use variables like outerURL.

Then you can use casper.captureSelector to capture the iframe without using some kind of arbitrary rectangle.

casper.then(function(){
    this.captureSelector("iframe.png", "iframe"); // again only first iframe
    this.capture("whole_page.png");
});

Upvotes: 0

Related Questions