如何使用PhantomJS提交表单


161

我正在尝试使用phantomJS(真棒的工具btw!)为具有登录凭据的页面提交表单,然后将目标页面的内容输出到stdout。我可以使用幻像访问该表单并成功设置其值,但是我不太确定提交表单并输出后续页面内容的正确语法。到目前为止,我有:

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="mylogin@somedomain.com";
          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:


227

我想到了。基本上,这是一个异步问题。您不能只是提交并期望立即呈现下一页。您必须等到触发下一页的onLoad事件。我的代码如下:

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

3
这是一个很棒的模板。这是我添加的几项内容:在内部setInterval使用var func = steps[testindex],然后console.log("step " + (testindex + 1) + ": " + funcName(func))。这使您可以向正在执行的步骤添加描述。
延诺2014年

看到这里funcName。另外,我发现在浏览一系列网页并尝试使用不同的技术来使用渲染最后一页时更容易page.render("output.png");
延诺2014年

2
这真的很有帮助。不过有一个问题。使用POST提交表单时,数据将发送到服务器,服务器将返回响应。代码在哪里处理此响应,或者由phantomjs自动完成?另外,在表单提交后,服务器可以返回COOKIE,而我的问题是:* phantom.cookies当服务器返回响应时,此cookie是否在对象中可用
MrD

使用CasperJS比PhantomJS更好,它具有无需复杂编码就可以发布到表单的能力
waza123 2016年


62

同样,CasperJS为PhantomJS中的导航提供了一个不错的高级界面,包括单击链接和填写表格。

卡斯珀

已更新,添加了2015年7月28日比较PhantomJS和CasperJS的文章

(感谢评论员M!)


1
Casper不能为我工作,因为您只能使用name填写表单输入。我需要使用ID。
user984003

4
@ user984003您应该能够将选择器设置#someid为根据ID进行填写。
arboc7

2
CasperJS是天赐之物!它使刮ASPX页面变得轻而易举。谢谢!
托比亚2014年

@ user984003我不知道您是否使用的是旧版本,但是当前版本具有fillSelectors()来使用任何选择器填充表单字段。
Tobia

3
任何使用PhantomJS的人都应该开始使用CasperJS。这是描述原因的帖子:code-epicenter.com/why-is-casperjs-better-than-phantomjs
MrD

19

发送原始POST请求有时会更方便。在下面您可以看到PhantomJS的post.js原始示例

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

6
读者,请注意,GET类似地执行请求(通过执行类似的操作page.open(server, 'get', data, ...)将行不通。
zbr 2014年

7

如前所述,CasperJS是填写和发送表格的最佳工具。如何使用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();
  });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.