how to click a button on website

[Rafay Hasan]

Hello, I am new to phantomjs and javascript programming. I need to access a website, click a button, wait (delay) for 20 seconds, then take a snapshot of the webpage. Could any one please check my code below and suggest corrections. I have been trying to achieve this simple thing for 4 days but unable to do so. I would really appreciate your help.

var page = require("webpage").create();

var homePage = "http://speedof.me/";

page.open(homePage);

page.onLoadFinished = function(status) {

  var url = page.url;

  console.log("Status:  " + status);

  console.log("Loaded:  " + url);

  document.getElementById('btnStart').fireEvent("onclick");

  setInterval(function () {page.render("speed.png");}, 20000);

  phantom.exit();

};

The error i am getting is:

TypeError: 'undefined' is not an object (evaluating 'c.prototype')

  http://speedof.me/js/canvas-tools.js:130

  http://speedof.me/js/canvas-tools.js:133

Status:  success

Loaded:  http://speedof.me/

TypeError: 'null' is not an object (evaluating 'document.getElementById('btnStart').fireEvent')

  mon.js:8

[Laurent Jouanneau]

Hi

You cannot access directly to the web content from your phantomjs script. You don't have a document object in your script.

So you have to use the evaluate() function to access to your button. Notice also that fireEvent is not a standard DOM function.

you should setTimeout instead of setInterval, because you want to do the snapshot only one time, isn't it?

And you must call phantom.exit() only at the end of your program. Here you exit before the snapshot is done....

var page = require("webpage").create();

var homePage = "http://speedof.me/";

page.open(homePage, function(status) {

  var url = page.url;

  console.log("Status:  " + status);

  console.log("Loaded:  " + url);
  page.evaluate(function(){

         document.getElementById('btnStart').click();
  }

  setTimeout(function () {
      page.render("speed.png");
      phantom.exit();
  }, 20000);

 

};

Laurent

[Chukwudi Nwachukwu]

Cleaned up your solution for some typos and got the code below:

var page = require("webpage").create();

var homePage = "http://speedof.me/";

page.open(homePage, function (status) {

    var url = page.url;

    console.log("Status:  " + status);

    console.log("Loaded:  " + url);

    page.evaluate(function () {

        document.getElementById('btnStart').click();

    });

    setTimeout(function () {

        page.render("speed.png");

        console.log("Download speed:  " + document.getElementById('msgContainer1').innerText);

        console.log("Upload speed:  " + document.getElementById('msgContainer2').innerText);

        phantom.exit();

    }, 20000);

});

But I got this error:

Status:  fail

Loaded:  http://speedof.me/

TypeError: 'null' is not an object (evaluating 'document.getElementById('btnStart').click')

  phantomjs://webpage.evaluate():2

  phantomjs://webpage.evaluate():3

  phantomjs://webpage.evaluate():3

Please, what could be the cause of it; worthy of note is the fact that document.getElementById('btnStart').click() worked in Chrome but it failed in PhantomJS.  I'm still new to PhantomJS and any help will be greatly appreciated, thanks.