PhantomJS点击图片并等待加载

PhantomJS click on an image and wait for load

本文关键字：等待 加载 PhantomJS      更新时间：2023-09-26

我试图用PhantomJS做页面自动化。我的目标是能够去一个网站，点击一个图像，并继续与其他代码一旦页面从点击加载。为了测试这一点，我试图写一个脚本，将转到快速启动指南的url上的PhantomJS网站，然后点击PhantomJS标志带来的页面到PhantomJS主页。也要渲染网站的图片之前和之后的点击，以确保点击工作。这是我当前的代码:

var page = require('webpage').create();
page.open('http://phantomjs.org/quick-start.html', function(status) {
console.log(status);
page.render('websiteBeforeClick.png');
console.log(page.frameUrl); //check url before click
var element = page.evaluate(function() {
  return document.querySelector('img[alt="PhantomJS"]');
});
page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');
window.setTimeout(function () {
console.log(page.frameUrl); //check url after click
}, 3000);
console.log('element is ' + element); //check that querySelector() is returning an element
page.render('websiteAfterClick.png');
phantom.exit();
});

问题是我的前后图片是一样的。这是我运行它时的输出。

 success
 element is [object Object]

我使用他们的sendEvent方法从这里"http://phantomjs.org/api/webpage/method/send-event.html"，但我不确定它是否工作。

为什么不控制台日志(page.frameUrl)在我的窗口。settimeout()得到执行?

我正在看他们在PhantomJS网站上的页面自动化示例。尤其是这个"https://github.com/ariya/phantomjs/blob/master/examples/imagebin.js"。我注意到他们的例子使用了

document.querySelector('input[name=disclaimer_agree]').click()

但是当我用我的代码尝试时，我得到了一个错误。

document.querySelector('img[alt="PhantomJS"]').click();
TypeError: 'undefined' is not a function
编辑# 1:

我将代码的结束部分更改为:

page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');

window.setTimeout(function () {
  console.log(page.frameUrl);
  page.render('websiteAfterClick.png');
  phantom.exit();
}, 3000);
console.log('element is ' + element);
});

现在我的后图像是正确的。但现在我的问题是，如果我想继续我的代码，即点击网站上的另一个元素，我的新代码是否都嵌套在超时函数内?

有一个示例函数phantom.waitFor(callback)，我在下面的帖子中解释，它如下:

phantom.waitFor = function(callback) {
  do {
    // Clear the event queue while waiting.
    // This can be accomplished using page.sendEvent()
    this.page.sendEvent('mousemove');
  } while (!callback());
}

这可以帮助简化你的代码，避免嵌套调用window.setTimeout()，这是不太可靠的，因为你正在等待一个预先设定的时间，而不是等待元素变得可见。示例如下:

// Step 1: Open and wait to finish loading
page.open('http://localhost/');
phantom.waitFor(function() {return !page.loading;});
// Step 2: Click on first panel and wait for it to show
page.evaluate(function() { $("#activate-panel1").click(); });
phantom.waitFor(function() {
   return page.evaluate(function() {return $("#panel1").is(":visible");})
});
// Step 3: Click on second panel and wait for it to show
page.evaluate(function() { $("#activate-panel2").click(); });
phantom.waitFor(function() {
   return page.evaluate(function() {return $("#panel2").is(":visible");})
});
console.log('READY!');
phantom.exit();

这将连续加载每个面板(即同步)，同时保持代码简单，避免嵌套回调。

希望这有意义。您也可以使用CasperJS作为替代，它的目的是使这些东西更简单。

是的，您的新代码将从setTimeout回调内部调用。您可以直接嵌套代码或编写一个函数来封装代码并在setTimeout中调用该函数。

function anotherClick(){
    // something
}
page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');
window.setTimeout(function () {
  console.log(page.frameUrl);
  page.render('websiteAfterClick.png');
  anotherClick();
  phantom.exit();
}, 3000);

还有另一种方法。您也可以用多个setTimeout完整地编写它，但这样您就不能对先前调用中的突发情况做出反应。

page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');
window.setTimeout(function () {
  console.log(page.frameUrl);
  page.render('websiteAfterClick.png');
}, 3000);
window.setTimeout(function () {
  // some more actions
}, 6000); // you cannot know if this delay is sufficient
window.setTimeout(function () {
  phantom.exit();
}, 9000); // you cannot know if this delay is sufficient

我建议使用CasperJS，如果你想做很多操作/导航步骤。

相关文章：