等待CSS属性_Css_Css Selectors_Automated Tests_E2e Testing_Testcafe

等待CSS属性

css automated-tests

等待CSS属性,css,css-selectors,automated-tests,e2e-testing,testcafe,Css,Css Selectors,Automated Tests,E2e Testing,Testcafe,我在Testcafe会话中检查CSS属性时遇到问题。我在网站上有一个带有html的进度条： <div class="progress-bar progress-bar-success"></div> 但这是行不通的。它会一直等待，直到等待时间结束我在另一次运行中使用了类似的函数，在那里我等待用CSS和RGB更改项目的颜色，这非常有效。我认为现在的问题是，这种风格在启动时不可用。或者还有其他可能吗出现此问题是因为根据getStyleProperty方法返回宽度的计

我在Testcafe会话中检查CSS属性时遇到问题。我在网站上有一个带有html的进度条：

<div class="progress-bar progress-bar-success"></div>

但这是行不通的。它会一直等待，直到等待时间结束

我在另一次运行中使用了类似的函数，在那里我等待用CSS和RGB更改项目的颜色，这非常有效。

我认为现在的问题是，这种风格在启动时不可用。或者还有其他可能吗

出现此问题是因为根据

getStyleProperty

方法返回宽度的计算值，这意味着该值以像素为单位返回，而您希望以百分比为单位检查该值

作为解决方案，我建议您使用该机制，它允许您获得所需的值

我为您准备了一个样品：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar {
            width: 500px;
            height: 50px;
            border: 1px solid black;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="bar">
    <div class="progress" style="width: 0;"></div>
</div>

<script>
    setInterval(function () {
        var progress = document.querySelector('.progress');

        progress.style.width = Math.min(100, parseInt(progress.style.width) + 1) + '%';
    }, 50);
</script>
</body>
</html>

非常感谢你的提示。我没有意识到这个值是以像素为单位的。

await t.expect(Selector('.progress-bar.progress-bar-success').getStyleProperty('width')).eql('100%', {timeout: 90000})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar {
            width: 500px;
            height: 50px;
            border: 1px solid black;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="bar">
    <div class="progress" style="width: 0;"></div>
</div>

<script>
    setInterval(function () {
        var progress = document.querySelector('.progress');

        progress.style.width = Math.min(100, parseInt(progress.style.width) + 1) + '%';
    }, 50);
</script>
</body>
</html>

import { Selector, ClientFunction } from 'testcafe';

fixture `progress`
    .page `index.html`;

const getStyleWidthInPercents = ClientFunction(() => {
    return document.querySelector('.progress').style.width;
});

test('progress', async t => {
    await t.expect(getStyleWidthInPercents()).eql('100%', {timeout: 90000})
});