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

Posted 2023-03-15

【中文标题】While 循环设置 CasperJS “then()” 步骤

【英文标题】：While Loop to Setup CasperJS "then()" Steps

【发布时间】：2014-10-25 04:22:03

【问题描述】：

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

【问题讨论】：

javascript closure inside loops – simple practical example的可能重复

【参考方案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);

【讨论】：

在很多情况下都非常有用的答案

【参考方案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();

【讨论】：

将 capser.then() 函数放入 capser.repeat() 不起作用。