如何使用 PhantomJS 提交表单

Question

我正在尝试使用 phantomJS（顺便说一句，多么棒的工具！）为我拥有登录凭据的页面提交表单，然后将目标页面的内容输出到标准输出。我能够使用 phantom 访问表单并成功设置其值，但我不太确定提交表单和输出后续页面内容的正确语法是什么。到目前为止我所拥有的是：

 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="[e-mail]";
          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();
}

原文由 Vijay Boyapati 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想到了。基本上这是一个异步问题。您不能只提交并期望立即呈现后续页面。您必须等到下一页的 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.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);

原文由 Vijay Boyapati 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

此外，CasperJS 为 PhantomJS 中的导航提供了一个很好的高级界面，包括点击链接和填写表格。

卡斯珀JS

更新以添加 2015 年 7 月 28 日比较 PhantomJS 和 CasperJS 的文章。

（感谢评论者M先生！）

原文由 arboc7 发布，翻译遵循 CC BY-SA 3.0 许可协议