我第一次尝试PhantomJs。我的目标是简单的简单页面自动化。
我只需要 - 加载网页,比方说www.google.com - 填写查询字词 - 简单(真的,只有这个)console.log的搜索结果页面
我遇到了一些问题,因为我发现的所有教程都是以太复杂的任务开始的。
以下是我个人的一步一步教程,但这有一个问题“结束”:“提交后如何记录页面内容?”
我做的第一步是:
var page = require('webpage').create();
page.open('https://www.google.it', function () {
console.log (page.content);
phantom.exit()
});
这很有效。
然后我注入jquery
var page = require('webpage').create();
page.open('https://www.google.it', function () {
page.includeJs("http://code.jquery.com/jquery-1.10.1.min.js", function() {
console.log (page.content);
phantom.exit()
});
});
这是有效的。
现在我正在尝试填写搜索框。我必须填写这个字段
<input autocomplete="off" class="lst" value="" title="Cerca con Google" maxlength="2048" name="q" size="57" style="...[omitted]...">
我这样做:
var page = require('webpage').create();
page.open('https://www.google.it', function () {
page.includeJs("http://code.jquery.com/jquery-1.10.1.min.js", function() {
console.log (page.content);
var value = page.evaluate(function() {
$('input[name="q"]').val("Daduu");
return $('input[name="q"]').val();
});
console.log ("search term: " + value);
phantom.exit()
});
});
它正在发挥作用。现在我需要“点击”提交按钮
<input class="lsb" value="Cerca con Google" name="btnG" type="submit">
这样做:
var page = require('webpage').create();
page.open('https://www.google.it', function () {
page.includeJs("http://code.jquery.com/jquery-1.10.1.min.js", function() {
var value = page.evaluate(function() {
$('input[name="q"]').val("Daduu");
$('input[name="btnG"]').trigger("click");
return $('input[name="q"]').val();
});
// console.log (page.content);
page.render("google.png");
phantom.exit()
});
});
当我看到图像时(只是为了看到以人为方式呈现的结果),我看到带有填充'q'字段的google.it页面。
问题是:
**真的是页面加载[是Google搜索]吗? **
“如何检测对console.log或page.render内容的页面更改?”
编辑:我看到了:Phantomjs - How to populate a form, submit and get the results?
但这不是我需要的。我想检测页面加载何时完成,而不是'settimeout'来呈现页面。
编辑2:我明白这一点:PhantomJS: submit a form
但这太复杂了,我不明白这是怎么回事。
可能需要包围setTimeout,但是,由于使用了js对象,我正在寻找一种工作方式来驱动事件
onInitialPageLoaded (
fillForm
click
)
onSearchResultLoaded (
render or log content of page
)
但我无法理解PhantomJs是否可能,以及如何实现它!
答案 0 :(得分:1)
PhantomJS本身不是一个测试框架。有些项目构建在PhantomJS之上,可以为CasperJs等测试目的提供方便的高级功能。
让我们用casperJs搜索“phantomjs”。
var links = [];
var casper = require('casper').create();
function getLinks() {
var links = document.querySelectorAll('h3.r a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href')
});
}
casper.start(function() {
// now search for 'phantomjs' by filling the form again
this.fill('form[action="/search"]', { q: 'phantomjs' }, true);
});
casper.then(function() {
// aggregate results for the 'phantomjs' search
links = links.concat(this.evaluate(getLinks));
});
casper.run(function() {
// echo results in some pretty fashion
this.echo(links.length + ' links found:');
this.echo(' - ' + links.join('\n - ')).exit();
});
来自PhantomJS的创始人Ariya Hidayat
如果你还没有看过CasperJS,那就去看看,这是一个 非常有用的PhantomJS伴侣。