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");
});

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

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

1 个答案: