Як подати форму за допомогою PhantomJS


161

Я намагаюся використовувати phantomJS (який дивовижний інструмент btw!), Щоб подати форму для сторінки, на яку я маю облікові дані для входу, а потім вивести вміст сторінки призначення в stdout. Я можу отримати доступ до форми та успішно встановити її значення, використовуючи 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="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)). Це дозволяє додати опис до виконуваних кроків.
Jonno

дивіться тут для funcName. Також мені було легше, переглядаючи низку веб-сторінок і приміряючи різні методи, відтворювати останню сторінку за допомогою page.render("output.png");.
Jonno

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 .

(Дякую коментатору містеру М!)


1
Casper не працював для мене, тому що ви могли лише заповнити форму, використовуючи ім'я. Мені потрібно було використовувати ідентифікатор.
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();
  });
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.