check font in Test complete

[vvg]

I am searching for a simple way to check if the font of a webpage is correct.
We have been playing with fonts several times and I have seen that not all browsers are able to find the font. So I would like to add this in my testcase, but I have not found a way to do this yet.

[AlexKaras]

Hi,

I think that you can check what font is requested to be used for this or that web element by checking its CSS computed style (https://community.smartbear.com/t5/TestComplete-Functional-Web/WaitProperty-on-styles/m-p/149995#M30...).

What I am not sure how to check is how to check that the element was indeed rendered using the requested font but some font substitution was not used because of some reason (font is absent on the system, some registry settings, some browser settings, etc.).

[vvg]

Thanks for the idea Alex!

But than what would be the property to check? Or how do I know which property to check and what kind of element should it be?

[baxatob]

getComputedStyle(element) returns a dictionary, where the font name is stored under the key "fontFamily"

[tristaanogre]

For the element, I would pass in the particular object in the web page that you want to verify the font for.  So, if it's a particular DIV or button or whatever, the object (Aliases.browser.myPage.myObject.blahblahblah... etc) is the element.

As for the property, in the TestComplete object browser for the object, there should be a property called "currentStyle".  If you click on the ellipses beside that property, you'll find an object with a "Fields" tab at the top... go to that tab and whatever property there contains the font you're looking for, that's the property to use.

[HKosova]

---

@tristaanogre wrote:

As for the property, in the TestComplete object browser for the object, there should be a property called "currentStyle".  If you click on the ellipses beside that property, you'll find an object with a "Fields" tab at the top... go to that tab and whatever property there contains the font you're looking for, that's the property to use.

---

currentStyle is IE-specific. The cross-browser way is the getComputedStyle(element) method, as @AlexKaras and @baxatob suggested.

var element = ...;
var style = page.contentDocument.defaultView.getComputedStyle(element);
Log.Message(style.fontFamily);

More info: Getting CSS Attributes

[tristaanogre]

True, @HKosova... there is a link up thread that has some code posted by my that uses the getComputedStyle method...  the example I just gave is more for researching what property name to use.  Different browsers have a different way of doing so... but suffice it to say, getComputedStyle is THE way to do it...

[vvg]

It seems to be, that the provided solution indeed only checks if the font is correct in the code, but it doesn't verify that the font visible is the correct one. Which was exactly the thing I wanted to check.

Might it be the case that I'm not looking in the correct place, or would we indeed need some graphical check?

If we need a graphical check, what would be the best way to do this?

I do get errors in the console that the font cannot be loaded, but I can't imagine this would be the only way to check.

I have used the code of AlexKaras his link to another thread and modified it a bit.

With that code, I get a property back with a value I expect. But It always gives this value, even when it wasn't possible to load the font.

function getCSSProperty(element, prop){
     var style;
     style = Aliases.browser.Page('*').contentDocument.defaultView.getComputedStyle(element, '');
     return style.getPropertyValue(prop);
}

function checkCSSProperty(element, prop, checkValue){
    var testValue;
    testValue = getCSSProperty(element, prop);
    testValueArray = testValue.split(',');
    testValue = testValueArray[0];
    testValue = testValue.trim();
    
    if (checkValue.indexOf(testValue) >= 0) {
        Log.Checkpoint(prop + ' has value of ' + checkValue);
    } 
    else {
        Log.Error(prop + ' value of ' + testValue + ' does not match ' + checkValue);
    } 
} 

[tristaanogre]

I don't like graphical/image comparisons because they can be very finicky on things like pixel tolerance and such.  If you can capture the errors somehow through the automation that you're seeing in the console, this would probably be the most reliable way of trapping this.

[AlexKaras]

Hi,

> I do get errors in the console that the font cannot be loaded

Depending on your testing application...

If the font is downloaded from some resource via http(s), you may issue http(s) request to get the font you are verifying and check the result code. http result 200 will mean that the font was obtained from the resource. (And, hopefully, used by browser, but I cannot imagine at the moment any other way of how to verify this except image comparison for every tested OS/browser/resolution.) http result other than 200 will mean that font was not obtained and some substitution was used.