使用CasperJS删除DOM元素

Question

好的,基本上我有一个帖子:

<div class=post>
  <div class=content></div>
  <div class=content-meta></div>
</div>

这就是它的原型,以帮助解释

所以我想要做的是使用一些JS基本上删除或隐藏div'content-meta'

使用JQuery我有:

$('.content-meta').remove();

但是当我使用CasperJS时,我有点困惑,因为我应该如何实现这个代码.

我希望在屏幕捕获之前操纵一个帖子(screencapture部分工作正常)

下面是我一直在测试的代码(URL的OMITTED),它很好地接受了这个类,但我不知道在屏幕捕获之前在哪里/如何执行Jquery来删除检测到的元素:

casper.start('http://pageurl.com/XYZ', function() {

if (this.exists('.content-meta')) {
    this.echo('found .content-meta', 'INFO');
} else {
    this.echo('.content-meta not found', 'ERROR');
}
this.captureSelector('resultingcapture.png', '.post');
});

casper.run();

TL; DR如何从CasperJS函数中执行JS/Jquery？

Answer 1

对于从CasperJS执行javascript代码,您必须使用evaluate()方法

evaluate()方法作为CasperJS环境与您打开的页面之间的门; 每次将一个闭包传递给evaluate()时,您都会进入该页面并执行代码,就像使用浏览器控制台一样.

你的代码应该是这样的:

var casper = require('casper').create();

casper.start('http://pageurl.com/XYZ', function() {

   if (this.exists('.content-meta')) {

       this.echo('found .content-meta', 'INFO');

       //evaluates an expression in the current page DOM context.
       this.evaluate(function(){
          //delete div 'content-meta'
          $('.content-meta').remove();
       });

       this.then(function(){
           this.captureSelector('resultingcapture.png', '.post');
       });

  } else {
      this.echo('.content-meta not found', 'ERROR');
  }
});

casper.run();

注意:此代码仅在webcontext包含jQuery时运行,否则您必须仅使用javascript删除div.