时间戳

首页 > 解决方案 > 使用 TestCafe 评估颜色变化

testing - 使用 TestCafe 评估颜色变化

问题描述

为了独立于静态文本，我想检查选择器的 RGB 值。我发现

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

将改变的元素是：

<div class="cl-asset-wfstate" style="background-color: rgb(244, 159, 79);"></div>

<div class="cl-asset-wfstate" style="background-color: rgb(92, 195, 55);"></div>

所以我尝试了

const bgcolour = await Selector('div.cl-asset-wfstate').getStyleProperty('background-color');
await t.expect(bgcolour).eql('rgb(92, 195, 55)', {timeout: 5000})

但这不起作用。断言永远不会得到解决。有什么建议吗？

标签： testingcss-selectorsautomated-testse2e-testingtestcafe

解决方案

如果我理解正确的话，你有一个div元素，它在测试执行期间会改变它的颜色。如果是这样，您不需要执行此行：

const bgcolour = await Selector('div.cl-asset-wfstate').getStyleProperty('background-color')

  因为在这种情况下，bgcolour变量将包含一个不会改变的值。

我修改了您的示例以演示如何实现您的场景：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="cl-asset-wfstate" style="background-color: rgb(0, 0, 0);">test</div>

<script>
    setTimeout(function () {
        document.querySelector('div').style.backgroundColor = 'rgb(92, 195, 55)';
    }, 3000);
</script>
</body>
</html>

测试代码：

import { Selector } from 'testcafe';

fixture `fixture`
    .page `../pages/index.html`;

test('1', async t => {
    const selector = Selector('div.cl-asset-wfstate');
    const opacity  = await selector.getStyleProperty('opacity');

    await t.expect(opacity).eql('1', {timeout: 5000});
    await t.expect(selector.getStyleProperty('background-color')).eql('rgb(92, 195, 55)', {timeout: 5000})
});

另请参阅：选择器对象

推荐阅读