validacion - validar formulario html javascript

Cómo enviar un formulario usando PhantomJS

Question

Estoy tratando de usar phantomJS (¡qué herramienta más increíble por cierto!) Para enviar un formulario para una página para la que tengo credenciales de inicio de sesión, y luego enviar el contenido de la página de destino a stdout. Puedo acceder al formulario y establecer sus valores con éxito usando fantasma, pero no estoy seguro de cuál es la sintaxis correcta para enviar el formulario y mostrar el contenido de la página siguiente. Lo que tengo hasta ahora es:

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

Answer 1

Además, CasperJS proporciona una interfaz de alto nivel para navegación en PhantomJS, que incluye hacer clic en enlaces y completar formularios.

CasperJS

Actualizado para agregar el artículo del 28 de julio de 2015 que compara PhantomJS y CasperJS .

(Gracias al comentarista Sr. M!)

Answer 2

Como se mencionó anteriormente, CasperJS es la mejor herramienta para llenar y enviar formularios. El mejor ejemplo posible de cómo completar y enviar formularios mediante la función fill () :

casper.start("http://example.com/login", function() {
//searches and fills the form with id="loginForm"
  this.fill(''form#loginForm'', {
    ''login'':    ''admin'',
    ''password'':    ''12345678''
   }, true);
  this.evaluate(function(){
    //trigger click event on submit button
    document.querySelector(''input[type="submit"]'').click();
  });
});

Answer 3

El envío de solicitudes POST en crudo puede ser a veces más conveniente. A continuación puede ver el ejemplo original de post.js de PhantomJS

// Example using HTTP POST operation

var page = require(''webpage'').create(),
    server = ''http://posttestserver.com/post.php?dump'',
    data = ''universe=expanding&answer=42'';

page.open(server, ''post'', data, function (status) {
    if (status !== ''success'') {
        console.log(''Unable to post!'');
    } else {
        console.log(page.content);
    }
    phantom.exit();
});

Answer 4

Me lo imaginé. Básicamente es un problema asincrónico. No puede simplemente enviar y esperar presentar la página subsiguiente inmediatamente. Tienes que esperar hasta que se active el evento onLoad para la siguiente página. Mi código está abajo:

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.com/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);