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