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

Question

我正在尝试学习 PhantomJS。如果您能帮助我理解为什么下面的代码会给我一个错误(如下所示)并帮助我修复错误，我将不胜感激。我正在尝试使用 phantomjs 在页面上执行一些 javascript。当我在 Chrome 控制台中输入评估函数中的代码行时，它们运行良好，即它们给出了预期的结果 (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:回应 Andrew 的回答

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

编辑 2:点击事件不可靠

下面的点击事件有时会起作用，有时不会。

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

我不清楚发生了什么。

关于答案

对于 future 的读者，除了答案之外，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 使用表单提交查询。谷歌也很有可能改变了他们搜索按钮的原型(prototype)方法，所以它并不是真正测试网络抓取的最佳网站。

执行此操作的最简单方法是实际执行表单提交，这会稍微调整您的示例。

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 示例中查看。