如何使用 Testcafe + JS

如何解决如何使用 Testcafe + JS

我正在查看测试 CSS 样式...我在我的 chrome 控制台中尝试了这个：

var el = document.querySelector(".create-body h2[class='title']");
let compStyles = window.getComputedStyle(el);
compStyles.getPropertyValue('font-weight');

输出： -> "900"

我想要的是在我的测试用例中验证这种输出。

这基本上可以轻松打印 CSS 样式，就像我正在使用 testcafe 进行测试一样，我使用的是 ClientFunction() 但无法获得正确的方法。

我们知道 testcafe 确实有一个名为：getStyleProperty 的函数，但我正在阅读，在某些方面，Style 可能不起作用，我应该改用 getComputedStyle。

我已在 JS 上将代码抄录到此，但不起作用：

async getPseudoElementFunction() {
        const html = ClientFunction(() => document.querySelector('.create-body h2[class="title"]'));
        const fontFamily = ClientFunction(async () => window.getComputedStyle(await html()).getPropertyValue('font-size'));
        return fontFamily;
    }

如果我调用该函数，我什至无法进行“预期”testcafe 验证，因为它需要首先被解析：

error

解决方法

您应该使用 getStyleProperty 来获取计算值。我创建了一个示例来说明 getStyleProperty 和 ClientFunction 两种情况。

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>font-weight</title>
    <style>
        h1 {
            font-weight: 900;
        }
        .select {
            font-weight: 600;
        }
    </style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p><span class="select">Lorem ipsum dolor sit amet</span>,consectetuer adipiscing elit,sed diem nonummy nibh euismod tincidunt ut lacreet
    dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam,quis nostrud
    exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
    consequat.</p>
</body>

test.js：

import { Selector,ClientFunction } from 'testcafe';

fixture `Get font-weight`
    .page('./index.html');

const hSelectorString    = 'body > h1';
const spanSelectorString = 'body > p > span';

test('getStyleProperty',async t => {
    await t
        .expect(Selector(hSelectorString).getStyleProperty('font-weight')).eql('900')
        .expect(Selector(spanSelectorString).getStyleProperty('font-weight')).eql('600');
});

test('ClientFunction',async t => {
    const getComputedFontWeightValue = ClientFunction(selector => {
        const el = document.querySelector(selector);

        return window.getComputedStyle(el).getPropertyValue('font-weight');
    });

    await t
        .expect(getComputedFontWeightValue(hSelectorString)).eql('900')
        .expect(getComputedFontWeightValue(spanSelectorString)).eql('600');
});

命令：testcafe chrome test.js

结果：

>testcafe chrome test.js
 Running tests in:
 - Chrome 90.0.4430.212 / Windows 10

 Get font-weight
 √ getStyleProperty
 √ ClientFunction


 2 passed (0s)

如何使用 Testcafe + JS

如何解决如何使用 Testcafe + JS

解决方法

相关推荐