为什么这个phantomjs代码返回null和文档标题？

Question

我正在努力学习PhantomJS。如果您能帮助我理解为什么下面的代码会给我一个错误（如下所示）并帮助我修复错误，我将不胜感激。我试图使用phantomjs在页面上执行一些javascript。当我在Chrome控制台中输入时，evaluate函数中的代码行运行良好，即它们给出了预期的结果（document.title）。

谢谢。

PhantomJS代码

var page = require('webpage').create();

var url = 'http://www.google.com';

page.open(url, function(status) {


    var title = page.evaluate(function(query) {
        document.querySelector('input[name=q]').setAttribute('value', query);

        document.querySelector('input[name="btnK"]').click();

        return document.title;
    }, 'phantomJS');

    console.log(title);

    phantom.exit()
})

错误

TypeError: 'null' is not an object (evaluating 'document.querySelector('input[name="btnK"]').click')

  phantomjs://webpage.evaluate():4
  phantomjs://webpage.evaluate():7
  phantomjs://webpage.evaluate():7
null

编辑1：回应安德鲁的回答

安德鲁，这很奇怪，但在我的电脑上，按钮是一个输入元素。以下屏幕截图显示了我计算机上的结果。

编辑2：点击事件不可靠

有时，以下点击事件有效，有时则不然。

document.querySelector('input[name="btnK"]')

我不清楚发生了什么。

关于答案

对于未来的读者，除了答案之外，Artjom B.的要点有助于理解正在发生的事情。但是，对于更强大的解决方案，我认为必须使用像waitfor.js这样的例子（如答案中所建议的）。我希望在这里复制和粘贴Artjom B.的要点是可以的。虽然下面的要点是有效的（提交表格）;如果我尝试模拟输入上的单击按钮，它仍然不清楚为什么它不起作用。如果有人能澄清这一点，那就太好了。

// Gist by Artjom B.
var page = require('webpage').create();
var url = 'http://www.google.com';
page.open(url, function(status) {
    var query = 'phantomJS';
    page.evaluate(function(query) {
        document.querySelector('input[name=q]').value = query;
        document.querySelector('form[action="/search"]').submit();
    }, query);
    setTimeout(function(){
        var title = page.evaluate(function() {
            return document.title;
        });
        console.log(title);
        phantom.exit();
    }, 2000);
});

Answer 1

您可以在控制台中打开google.com并尝试document.querySelector（＆＃39;输入[name =＆＃34; btnK＆＃34;]＆＃39;），它为空。

请尝试使用按钮替换输入：

document.querySelector('button[name="btnK"]')

Answer 2

Google使用表单提交查询。 Google也很可能改变了搜索按钮的原型方法，因此它并不是测试网页抓取的最佳网站。

最简单的方法是实际执行表单提交，稍微调整一下您的示例。

var page = require('webpage').create();
var url = 'http://www.google.com';
page.open(url, function(status) {
    var query = 'phantomJS';
    var title = page.evaluate(function(query) {
        document.querySelector('input[name=q]').value = query;
        document.querySelector('form[action="/search"]').submit();
        return document.title
    }, query);
console.log(title);
phantom.exit();
});

请注意，您可能需要考虑此调用的响应是异步的，因此直接获取标题可能会导致未定义的错误（您需要考虑在查找之前加载页面所需的时间）数据;您可以在waitfor.js示例中查看。