check font in Test complete

Question

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 · Answer

Hi,
&nbsp;
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#M30634).
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.).

baxatob · Answer

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

tristaanogre · Answer

For the element, I would pass in the particular object in the web page that you want to verify the font for.&nbsp; So, if it's a particular DIV or button or whatever, the object (Aliases.browser.myPage.myObject.blahblahblah... etc) is the element.
&nbsp;
As for the property, in the TestComplete object browser for the object, there should be a property called "currentStyle".&nbsp; 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 · Answer

tristaanogre wrote:
As for the property, in the TestComplete object browser for the object, there should be a property called "currentStyle".&nbsp; 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&nbsp;the getComputedStyle(element) method, as&nbsp;AlexKaras&nbsp;and&nbsp;baxatob&nbsp;suggested.
var element = ...;
var style = page.contentDocument.defaultView.getComputedStyle(element);
Log.Message(style.fontFamily);
More info: Getting CSS Attributes

alexkaras · Answer

Hi,
&nbsp;
&gt; 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.
&nbsp;

Forum Discussion

check font in Test complete

9 Replies

Recent Discussions

Select Object in iFrame (application windows store)

Outlook 365 automation

Regional Checkpoint

Related Content

ReadyAPI 3.1 fonts

Git Check in issues in Test Complete

Font colors in Terminal emulator Green Screens