正在等待 testcafe 中的 css 属性值

Question

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

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

Answer 1

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

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

Answer 3

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

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

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

正在等待 testcafe 中的 css 属性值

Waiting for css property value in testcafe

css

testing

automated-tests

node.js

testcafe

正在等待 testcafe 中的 css 属性 值

Waiting for css property value in testcafe

css

testing

automated-tests

node.js

testcafe

正在等待 testcafe 中的 css 属性值