PhantomJs:寻找一种编译表单的基本方法,点击并记录结果

时间:2013-06-07 08:58:17

标签: phantomjs

我第一次尝试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是否可能,以及如何实现它!

1 个答案:

答案 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伴侣。