Question

我要等待元素在css属性中具有特定值。

更具体地说，我正在使用Testcafe进行一些功能测试，它们应该等到不透明度从0增加到1。

Answer 1

为什么不使用标准的TestCafe Assertion机制？你可以这样写

x :: xs

超时选项通常在运行函数中设置，但可以为每个断言分别指定。它会尽快通过，因为条件是真实的，否则将在5秒钟后失败。

Answer 2

遵循一种锻炼解决方案，其中包含一些解释代码的注释。

有关MutationObserver的工作方式的更多信息，您可以签入here。

var observer = new MutationObserver((mutations) => {
    //When style property change, this function will be called
    mutations.forEach((mutationRecord) => {
        //YOU SHOULD IMPLEMENT YOUR <<BUSINESS CODE>> IN HERE
        //Then, i check the value of the opacity and see if is equals to 0
        if($(myTest).css('opacity') == 1)
          console.log("opacity changed");
    });    
});

//Element that will be the target of the observable
var target = document.getElementById('myTest');
observer.observe(target, { 
                           attributes : true, 
                           attributeFilter : ['style'] 
                         }
                );

/*Simulates the opacity change on an element*/
setTimeout(() => $(myTest).css('opacity',1), 2000)

#myTest{
   opacity:0;
   width:30px;
   height:30px;
   background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTest"></div>

Answer 3

我想出了这个解决方案，它似乎按预期工作了。

async waitForOpacity(selector, options) {
        const settings = Object.assign(
            {
                timeout: 30000,
                checkInterval: 300,
            },
            options
        );
        return new Promise((resolve, reject) => {
            let passedTime = 0;
            const intervalVisible = setInterval(async () => {
                const visible = await selector.visible;
                const opacity = await selector.getStyleProperty('opacity');
                passedTime = passedTime + settings.checkInterval;
                if (visible && opacity > 0) {
                    clearInterval(intervalVisible);
                    return resolve();
                }
                if (passedTime >= settings.timeout) {
                    clearInterval(intervalVisible);
                    return reject(new Error('Element did not become visible'));
                }
            }, settings.checkInterval);
        });
    }

等待testcafe中的css属性值

3 个答案: