如何使用 PhantomJS 提交表单

我正在尝试使用 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.example";
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();
}
126597 次浏览
小开
最佳答案

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

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

CasperJS

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

(感谢评论家 M 先生!)

小开

发送原始 POST 请求有时会更方便

// Example using HTTP POST operation


var page = require('webpage').create(),
server = 'http://posttestserver.example/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();
});
});

提交答案