虽然循环安装CasperJS“然后（）”步骤

Question

我试图测试一些按钮的视觉状态 - 悬停，单击，焦点 - 并寻找一种方法不复制基本相同casper.then()一遍又一遍的命令。我想我应该能够在一个简单的循环中做到这一点。

我制作了一个（当前）5个按钮的小阵列，并通过它们为每个我想记录的状态添加CasperJS步骤。不幸的是，实际上只执行最后一个步骤。

我已阅读了大量关于循环的帖子，但他们似乎都涉及点击页面上的链接或其他一些与我所寻找的内容不匹配的方案。

也许我只是在密集？下面的代码...

casper.thenOpen('docs/buttons/test.html'); 

var buttonStyles = [ 
    { selector: '.grey0', title: 'Button - Grey 0' }, 
    { selector: '.grey25', title: 'Button - Grey 25' }, 
    { selector: '.grey50', title: 'Button - Grey 50' }, 
    { selector: '.grey75', title: 'Button - Grey 75' }, 
    { selector: '.grey100', title: 'Button - Grey 100' }, 
]; 

while (buttonStyles.length > 0) { 

    buttonStyle = buttonStyles.pop(); 

    casper.then(function(){ 
     phantomcss.screenshot(buttonStyle.selector, buttonStyle.title); 
    }); 

    casper.then(function(){ 
     this.mouse.move(buttonStyle.selector); 
     phantomcss.screenshot(buttonStyle.selector, buttonStyle.title + ' - Hover'); 
    }); 

    casper.then(function(){ 
     this.mouse.down(buttonStyle.selector); 
     phantomcss.screenshot(buttonStyle.selector, buttonStyle.title + ' - Down'); 
    }); 
} 

casper.test.done(); 

Answer 1

的问题是，buttonStyle是一个全局变量。当您迭代buttonStyles数组时，所有5 * 3 = 15个then块都会被计划，但由于buttonStyle是每个then块中相同的引用，因此最后的buttonStyle实际上会被检查5次。

JavaScript没有块级作用域（内部while），但只有函数级作用域。解决办法是引入一个功能来做到这一点。您可以使用IIFE或casper.repeat，如you did。

while (buttonStyles.length > 0) { 
    buttonStyle = buttonStyles.pop(); 
    (function(buttonStyle){ 
     casper.then(function(){ 
      phantomcss.screenshot(buttonStyle.selector, buttonStyle.title); 
     }); 

     casper.then(function(){ 
      this.mouse.move(buttonStyle.selector); 
      phantomcss.screenshot(buttonStyle.selector, buttonStyle.title + ' - Hover'); 
     }); 

     casper.then(function(){ 
      this.mouse.down(buttonStyle.selector); 
      phantomcss.screenshot(buttonStyle.selector, buttonStyle.title + ' - Down'); 
     }); 
    })(buttonStyle); 
} 

Answer 2

如果我没有看到其他一些帖子，询问类似的问题，我会刚刚删除了此。相反，我会在这里发布我的8分钟后的学习内容。我想知道为什么我不能在发布到SO之前提出这个问题？

适当命名的“casper.repeat”的伎俩对我来说：

casper.thenOpen('docs/buttons/test.html'); 

var buttonStyles = [ 
    { selector: '.grey0', title: 'Button - Grey 0' }, 
    { selector: '.grey25', title: 'Button - Grey 25' }, 
    { selector: '.grey50', title: 'Button - Grey 50' }, 
    { selector: '.grey75', title: 'Button - Grey 75' }, 
    { selector: '.grey100', title: 'Button - Grey 100' }, 
]; 

var curIndex = 0; 

casper.repeat(buttonStyles.length, function() { 
    buttonStyle = buttonStyles[curIndex]; 
    casper.then(function(){ 
     phantomcss.screenshot(buttonStyle.selector, buttonStyle.title); 
    }); 
    casper.then(function(){ 
     this.mouse.move(buttonStyle.selector); 
     phantomcss.screenshot(buttonStyle.selector, buttonStyle.title + ' - Hover'); 
    }); 
    casper.then(function(){ 
     this.mouse.down(buttonStyle.selector); 
     phantomcss.screenshot(buttonStyle.selector, buttonStyle.title + ' - Down'); 
    }); 
    curIndex++; 
}); 

casper.test.done();