4

casper.then()ホバー、クリック、フォーカスなど、いくつかのボタンの視覚的な状態をテストしようとしていますが、基本的に同じコマンドを何度もコピーしない方法を探していました。単純なループでこれを行うことができるはずだと思いました。

(現在) 5 つのボタンの小さな配列を作成し、記録したい状態ごとに CasperJS の手順を追加しながら、それらを while ループしました。残念ながら、実際に実行されるのは最後の手順のみです。

ループに関する多くの投稿を読みましたが、それらはすべて、ページ上のリンクをクリックするか、探しているものと一致しないその他のシナリオに関係しているようです。

多分私は密集しているだけですか？以下のコード...

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は最後のブロックのみがbuttonStyle5 回チェックされます。

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 に答える