Ask a Question

check font in Test complete

vvg
Occasional Contributor

check font in Test complete

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.

9 REPLIES 9
AlexKaras
Community Hero

Re: check font in Test complete

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.).

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
vvg
Occasional Contributor

Re: check font in Test complete

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
Community Hero

Re: check font in Test complete

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

tristaanogre
Community Hero

Re: check font in Test complete

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.


Robert Martin
[Hall of Fame]
Please consider giving a Kudo if I write good stuff
----

Why automate?  I do automated testing because there's only so much a human being can do and remain healthy.  Sleep is a requirement.  So, while people sleep, automation that I create does what I've described above in order to make sure that nothing gets past the final defense of the testing group.
I love good food, good books, good friends, and good fun.

Mysterious Gremlin Master
Vegas Thrill Rider
Extensions available
HKosova
Moderator

Re: check font in Test complete


@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


Helen Kosova
SmartBear Documentation Team Lead
________________________
Did my reply answer your question? Give Kudos or Accept it as a Solution to help others. ⬇️⬇️⬇️
tristaanogre
Community Hero

Re: check font in Test complete

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...


Robert Martin
[Hall of Fame]
Please consider giving a Kudo if I write good stuff
----

Why automate?  I do automated testing because there's only so much a human being can do and remain healthy.  Sleep is a requirement.  So, while people sleep, automation that I create does what I've described above in order to make sure that nothing gets past the final defense of the testing group.
I love good food, good books, good friends, and good fun.

Mysterious Gremlin Master
Vegas Thrill Rider
Extensions available
vvg
Occasional Contributor

Re: check font in Test complete

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
Community Hero

Re: check font in Test complete

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.


Robert Martin
[Hall of Fame]
Please consider giving a Kudo if I write good stuff
----

Why automate?  I do automated testing because there's only so much a human being can do and remain healthy.  Sleep is a requirement.  So, while people sleep, automation that I create does what I've described above in order to make sure that nothing gets past the final defense of the testing group.
I love good food, good books, good friends, and good fun.

Mysterious Gremlin Master
Vegas Thrill Rider
Extensions available
AlexKaras
Community Hero

Re: check font in Test complete

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.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
cancel
Showing results for 
Search instead for 
Did you mean: