雖然循環安裝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();