Ждите CSS свойства - PullRequest
Новая
       3

Ждите CSS свойства

2 голосов
/ 14 октября 2019

У меня проблема с проверкой свойств CSS в сеансе Testcafe. У меня на сайте есть панель progres с html: 

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

Когда операция будет готова, этот прогресс ba станет шириной 100%. 

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

В моем коде я сейчас использую строку 

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

Но она не будет работать. Он ждет все время, пока время ожидания не закончится.

Я использую аналогичную функцию в другом прогоне, где я жду изменения цвета элемента с помощью CSS и RGB, это прекрасно работает. Я думаю, что теперь проблема в том, что стиль не доступен при запуске. Или есть другая возможность?

1 Ответ

3 голосов
/ 14 октября 2019

Проблема возникает из-за того, что согласно docs метод getStyleProperty возвращает вычисленное значение ширины, что означает, что значение возвращается в пикселях, а вы хотите проверить значение в процентах.

В качестве решения я рекомендую использовать механизм ClientFunctions , который позволяет получить желаемое значение.

Я подготовил для вас образец: 

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