Блог

Я пытаюсь изучить PhantomJS. Я был бы признателен, если бы вы помогли мне понять, почему приведенный ниже код выдает ошибку (показано ниже), и помогли мне исправить ошибку. Я пытаюсь выполнить некоторый javascript на странице, используя phantomjs. Строки кода в функции evaluate хорошо работают, когда я ввожу их в консоль 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: В ответ на ответ Эндрю

Эндрю, это странно, но на моем компьютере кнопка является элементом ввода. На следующем скриншоте показан результат на моем компьютере.

Редактировать 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);
});
  

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 пример).

Вы можете открыть google.com и попробуйте document.querySelector(‘input[name=»btnK»]’) в консоли имеет значение null.

Фактически попробуйте заменить ввод на button:

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