2

I was looking through testing CSS styles... I tried this in my chrome console:

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

OUTPUT: -> "900"

What I want is to validate this kind of output in my Test Cases.

this basically prints the CSS style easily, like I'm doing the testing with TestCafe I was using ClientFunction() but not able to get the right way.

We know that TestCafe does have a function called: getStyleProperty but I was reading and in certain points, the Style might not work and I should use getComputedStyle instead.

I have transcripted the code to this on JS but does not work:

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;
    }

If I call that function, I am not even able to do an "expect" testcafe validation because it needs to be parsed firstly:

error

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
SteveJ
  • 21
  • 1

1 Answers1

2

You should use the getStyleProperty to get the computed value. I created an example that illustrates both the getStyleProperty and ClientFunction cases.

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');
});

Command: testcafe chrome test.js

Result:

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

 Get font-weight
 √ getStyleProperty
 √ ClientFunction


 2 passed (0s)
Vladimir A.
  • 2,202
  • 2
  • 10
  • 28
  • Thanks Vladimir, what happens when exists mouse hover action? I want to get the CSS color BLACK but my actual color CSS is GREY... I mean, my text is gray but once i put my pointer mouse over the text it turns to black, what should I do? – SteveJ May 13 '21 at 22:37
  • You need to place [`t.hover`](https://testcafe.io/documentation/402697/reference/test-api/testcontroller/hover) right before the computed style value assertion. – Vladimir A. May 14 '21 at 08:50