在 testcafe 中等待 css 属性值答案

【问题标题】：Waiting for css property value in testcafe在 testcafe 中等待 css 属性值
【发布时间】：2019-01-21 09:14:41
【问题描述】：

我想等待一个元素在 CSS 属性中具有特定值。

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

【问题讨论】：

标签： css node.js testing automated-tests testcafe

【解决方案1】：

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

const opacity = await selector.getStyleProperty('opacity');
await t.expect(opacity).eql(1, {timeout: 5000})

Timeout 选项通常在 runner 函数中设置，但可以为每个断言单独指定。它会尽快通过，因为条件是真实的，或者会在 5 秒后失败。

【讨论】：

感谢您的回答，但您真的尝试过吗？ :) 据我所知，await selector.getStyleProperty('opacity') 将评估并分配当前值，并且不会再用expect 评估它
没用？我现在没有带有动画或更改 css 属性的页面，但据我了解官方文档，如果断言在超时范围内失败，testcafe 将再次检索实际值，并将执行此操作，直到超时到期。来自 doc 的引用：如果断言没有通过，测试不会立即失败。断言多次重试传递，并且每次都请求实际的属性值。如果断言无法在超时内成功完成，则测试失败
我试过了还是不行。我不认为这与文档相矛盾，因为您将常量值与 1 进行比较。它甚至可能会尝试一个小时，但这个常量不会改变。 const opacity = await selector.getStyleProperty('opacity');// At this point opacity is already equal to a number e.g. 0// It's not a selector that can be evaluated by eql again to change the valueawait t.expect(opacity).eql(1, {timeout: 5000});
如果您允许 testcafe 等待docs 中所述的元素和属性，这应该可以工作。 await t.expect(selector.getStyleProperty('opacity')).eql(1, {timeout: 5000}) 或 const opacity = selector.getStyleProperty('opacity'); 和 await t.expect(opacity).eql(1, {timeout: 5000})

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

遵循锻炼解决方案，其中有一些解释代码的 cmets。

有关 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>

【讨论】：