[javascript] PhantomJS를 사용하여 양식을 제출하는 방법

Program / 글쓴이

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

답변

나는 그것을 알아. 기본적으로 비동기 문제입니다. 제출하고 후속 페이지를 즉시 렌더링 할 수는 없습니다. 다음 페이지에 대한 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);

답변

또한 CasperJS는 링크 클릭 및 양식 작성을 포함하여 PhantomJS 탐색을위한 훌륭한 고급 인터페이스를 제공합니다.

캐스퍼 JS

PhantomJS와 CasperJS를 비교하는 2015 년 7 월 28 일 기사 를 추가하도록 업데이트되었습니다 .

(Mr 씨를 추천 해 주셔서 감사합니다!)

답변

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

답변

위에서 언급했듯이 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();
  });
});

답변