While循环来设置CasperJS "then()“步骤

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没有块级作用域(内部时间)，而只有函数级作用域。解决办法是引入一个函数来实现这一点。你可以使用像you did这样的生命或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分钟后所学到的东西。我不知道为什么我不能想出这个之前张贴到这样？

适当命名的"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();