PhantomJSを使用してフォームを送信する方法


161

私はphantomJS(なんと素晴らしいツールなのか!)を使用して、ログイン資格情報を持つページのフォームを送信し、宛先ページのコンテンツを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();
}

回答:


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。また、を使用して最後のページをレンダリングする方が、一連のWebページを調べてさまざまな手法を試した方が簡単であることがわかりましたpage.render("output.png");
ジョンノ2014年

2
これは本当に役立つ投稿です。ただ一つの質問。POSTを使用してフォームを送信すると、データがサーバーに送信され、サーバーが応答を返します。この応答を処理するコードはどこにありますか、それともphantomjsによって自動的に行われますか?また、フォームの送信後、サーバーはを返すことができます。COOKIE私の質問は次のとおりです。* phantom.cookiesサーバーが応答を返すときに、このCookieはオブジェクトで使用できますか?
MrD、2015

PhantomJSよりも優れたCasperJSを使用します。複雑なコーディングなしでフォームに投稿できます
waza123

これも確認してください。stackoverflow.com
questions/44624964/

62

また、CasperJSは、リンクのクリックやフォームへの入力など、PhantomJSでのナビゲーションに適した高レベルのインターフェースを提供します。

CasperJS

PhantomJSとCasperJSを比較した2015年7月28日の記事を追加するために更新されました。

(コメント者Mさん、ありがとう!)


1
名前を使用してフォーム入力にしか入力できないため、Casperは私には機能しませんでした。IDを使用する必要がありました。
user984003 2013

4
@ user984003 #someidIDに基づいて入力するようにセレクターを設定できるはずです。
arboc7 2013

2
CasperJSは天の恵みです!ASPXページのスクレイピングが簡単になります。ありがとうございました!
トビア2014年

@ user984003古いバージョンを使用していたかどうかはわかりませんが、現在のバージョンには、セレクタを使用してフォームフィールドに入力するfillSelectors()があります。
トビア

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();
  });
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.