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

我只是給您我的想法，代碼不起作用，或者可能是您指定了將要修改的一個元素的選擇器。