4

我正在尝试测试一些按钮的视觉状态——悬停、单击、聚焦——并且正在寻找一种方法来不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();
4

2 回答 2

4

问题是这buttonStyle是一个全局变量。当您遍历buttonStyles数组时，所有 5 * 3 = 15then个块都会被调度，但由于buttonStyle每个块内部的引用相同，因此实际上then只检查了最后一个块 5 次。buttonStyle

Javascript 没有块级范围（在 while 内），而只有函数级范围。解决方案是引入一个函数来做到这一点。您可以使用 IIFE 或casper.repeat像您所做的那样。

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);
}
于 2014-09-01T08:19:12.797 回答
-1

如果我没有看到许多其他帖子提出类似问题，我会直接删除它。相反，我将在此处发布我 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();
于 2014-09-01T00:10:51.823 回答