Wait for CSS property

user_11362214 0
Viewed 213

I have a problem with checking CSS properties in a Testcafe session. I have a progres bar on the site with the html:

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

When the operation is ready, this progress ba becomes a width of 100%. 

<div class="progress-bar progress-bar-success" style="width: 100%;"></div>

In my code I use now the line

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

But it will not work. It waits the whole time until the waiting time has finished.

I use a similar function inside another run, where I wait for changing the color of an item with CSS and RGB, this works perfectly. I think now the problem is, that the style is not available on startup. Or is there any other possibility?

e2e-testing testcafe automated-tests css-selectors css
1 Answers

The issue occurs because according to the docs the getStyleProperty method returns the computed value of width, which means that the value is returned in pixels, while you want to check the value in percents.

As a solution, I recommend you use the ClientFunctions mechanism, which allows you to get the desired value.

I prepared a sample for you:

<!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>

And here is the test code:

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