javascript - 使用 casperjs 更改/写入元素并在更改后捕获屏幕截图

Question

是否可以使用 casperjs 更改/添加样式到元素/DOM？我想在捕获屏幕截图之前突出显示该元素

我尝试执行以下操作:

1.更改元素 - 只需添加边框 - 这部分有效。

$(":contains('something')").filter(function() {
                        return (
                            $(this).clone() //clone the element
                                .children() //select all the children
                                .remove() //remove all the children
                                .end() //again go back to selected element
                                .filter(":contains('something')").length > 0)
                    }).css('border', 'solid 1px black');

2.然后截取更改后的屏幕截图。

                this.capture('test.png', undefined, {
                    format: 'jpg',
                    quality: 75
                });

屏幕截图已拍摄，但没有对元素进行更改。

Answer 1

我会这样做:

首先是一个返回元素 css 属性的函数

//return the css property of an element called by its selector
//getElementBounds() not sufficient
casper.css = function(selector,propertyName){
     "use strict";
    var css = this.evaluate(function(sel,prop) {
            return $(sel).css(prop);
        },selector,propertyName);
    return css;
    };

然后我会使用 waitFor() :

casper.thenEvaluate(function(){
    //here your jQuery code 
})
.waitFor(function check(){
    //wait this code to be true, so when one of your element has been modified
    return (casper.css("your selector","border")==="solid 1px black");
//then execute this function asking for the capture
},function then(){
     this.capture('test.png');
    }
//if waitFor never becomes true, that means your jQuery code or my function doesn't work
},function timeout(){
    casper.test.fail("Fail to modify elements");
});

我只是给你我的想法，代码不起作用，或者如果你指定一个将被修改的元素的选择器，它可能会起作用。