Question

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

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

我已经阅读了很多关于循环的帖子，但它们似乎都涉及点击页面上的链接或其他与我正在寻找的东西不相符的场景。 / p>

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

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块内的相同引用，因此只有最后一个{ {1}}实际上被检查了5次。

Javascript没有块级范围（内部），但只有函数级范围。解决方案是引入一个功能来执行此操作。您可以使用IIFE或buttonStyle you did。

casper.repeat

Answer 2

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

适当命名的＆＃34; casper.repeat＆＃34;为我做了诀窍：

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();

循环到设置CasperJS“然后（）”步骤

2 个答案: