Question

17

How to submit a form using PhantomJS

rated 0 times [ 22] [ 5] / answers: 1 / hits: 126884 / 13 Years ago, sun, february 12, 2012, 12:00:00

I'm trying to use phantomJS (what an awesome tool btw!) to submit a form for a page that I have login credentials for, and then output the content of the destination page to stdout. I'm able to access the form and set its values successfully using phantom, but I'm not quite sure what the right syntax is to submit the form and output the content of the subsequent page. What I have so far is:

var page = new WebPage();

var url = phantom.args[0];



page.open(url, function (status) {



  if (status !== 'success') {

      console.log('Unable to access network');

  } else {



    console.log(page.evaluate(function () {



      var arr = document.getElementsByClassName("login-form");

      var i;



      for (i=0; i < arr.length; i++) {



        if (arr[i].getAttribute('method') == "POST") {

          arr[i].elements["email"].value="[email protected]";

          arr[i].elements["password"].value="mypassword";



          // This part doesn't seem to work. It returns the content

          // of the current page, not the content of the page after

          // the submit has been executed. Am I correctly instrumenting

          // the submit in Phantom?

          arr[i].submit();

          return document.querySelectorAll('html')[0].outerHTML;

        }



      }



      return "failed :-(";



    }));

  }



  phantom.exit();

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

matteo

Add To Favorites

Follow

Total Points: 81

Total Questions: 100

Total Answers: 96

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

matteo questions

1 Differences between Lodash and Ramda

Tue, Mar 8, 22, 00:00, 2 Years ago

1 Javascript use single await in ternary operator

Sun, May 31, 20, 00:00, 4 Years ago

1 shuffle array in js

Thu, Mar 12, 20, 00:00, 4 Years ago

1 How to show placeholder when we hover on input type text

Tue, Jan 22, 19, 00:00, 5 Years ago

1 Using lodash, why is the map method within flow not working?

Wed, Sep 12, 18, 00:00, 6 Years ago

View All

answered 13 Years ago raymondorlandok · Accepted Answer

I figured it out. Basically it's an async issue. You can't just submit and expect to render the subsequent page immediately. You have to wait until the onLoad event for the next page is triggered. My code is below:

var page = new WebPage(), testindex = 0, loadInProgress = false;



page.onConsoleMessage = function(msg) {

  console.log(msg);

};



page.onLoadStarted = function() {

  loadInProgress = true;

  console.log("load started");

};



page.onLoadFinished = function() {

  loadInProgress = false;

  console.log("load finished");

};



var steps = [

  function() {

    //Load Login Page

    page.open("https://website.example/theformpage/");

  },

  function() {

    //Enter Credentials

    page.evaluate(function() {



      var arr = document.getElementsByClassName("login-form");

      var i;



      for (i=0; i < arr.length; i++) {

        if (arr[i].getAttribute('method') == "POST") {



          arr[i].elements["email"].value="mylogin";

          arr[i].elements["password"].value="mypassword";

          return;

        }

      }

    });

  },

  function() {

    //Login

    page.evaluate(function() {

      var arr = document.getElementsByClassName("login-form");

      var i;



      for (i=0; i < arr.length; i++) {

        if (arr[i].getAttribute('method') == "POST") {

          arr[i].submit();

          return;

        }

      }



    });

  },

  function() {

    // Output content of page to stdout after form has been submitted

    page.evaluate(function() {

      console.log(document.querySelectorAll('html')[0].outerHTML);

    });

  }

];



interval = setInterval(function() {

  if (!loadInProgress && typeof steps[testindex] == "function") {

    console.log("step " + (testindex + 1));

    steps[testindex]();

    testindex++;

  }

  if (typeof steps[testindex] != "function") {

    console.log("test complete!");

    phantom.exit();

  }

}, 50);