Как отправить форму с помощью 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();
}
Виджей Бояпати
источник

Ответы:

229

Я понял. В основном это асинхронная проблема. Вы не можете просто отправить и рассчитывать на немедленную визуализацию следующей страницы. Вы должны подождать, пока не будет запущено событие 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)). Это позволяет добавить описание к выполняемым шагам.
Джонно
см здесь для funcName. Кроме того, мне было проще, просматривая серию веб-страниц и пробуя разные методы, визуализировать последнюю страницу с помощью page.render("output.png");.
Джонно
2
Это действительно полезный пост. Хотя один вопрос. Когда вы отправляете форму, используя POST, данные отправляются на сервер, а сервер возвращает ответ. Где находится код, где вы обрабатываете этот ответ, или он автоматически выполняется phantomjs? Кроме того, после отправки формы сервер может вернуться COOKIE, и мой вопрос: * доступен ли этот файл cookie в phantom.cookiesобъекте, когда сервер возвращает ответ * ?
MrD
используйте CasperJS лучше, чем PhantomJS, он имеет возможность публиковать формы без сложного кодирования
waza123
Не могли бы вы проверить это тоже? Stackoverflow.com/questions/44624964/phantom-js-on-web-project
Manik
62

Кроме того, CasperJS предоставляет хороший высокоуровневый интерфейс для навигации в PhantomJS, включая нажатие на ссылки и заполнение форм.

CasperJS

Обновлено, чтобы добавить статью от 28 июля 2015 года, сравнивающую PhantomJS и CasperJS .

(Спасибо комментатору мистеру М!)

arboc7
источник
1
Каспер не работал для меня, потому что вы могли только заполнить форму ввода, используя имя. Мне нужно было использовать идентификатор.
user984003
4
@ user984003 Вы должны иметь возможность установить селектор #someidдля заполнения на основе идентификатора.
arboc7
2
CasperJS это находка! Это делает очистку ASPX-страниц на одном дыхании. Спасибо!
Тобия,
@ user984003 Я не знаю, использовали ли вы более старую версию, но в текущей есть функция fillSelectors () для заполнения полей формы любым селектором.
Тобия
3
Любой, кто использует PhantomJS, должен начать использовать CasperJS. Вот пост, объясняющий почему: code-epicenter.com/why-is-casperjs-better-than-phantomjs
MrD
19

Отправка необработанных POST-запросов иногда бывает удобнее. Ниже вы можете увидеть оригинальный пример post.js от 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();
});
Якуб М.
источник
6
Знайте, читатели, что выполнение GETзапросов аналогично (делая что-то подобное page.open(server, 'get', data, ...) не сработает.
zbr
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();
  });
});
DominikStyp
источник