Forum Discussion

vvg's avatar
vvg
Occasional Contributor
8 years ago

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 woul...
AlexKaras's avatar
AlexKaras
Champion Level 3
8 years ago

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

  • vvg's avatar
    vvg
    Occasional Contributor
    8 years ago

    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's avatar
      baxatob
      Community Hero
      8 years ago

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

    • tristaanogre's avatar
      tristaanogre
      Esteemed Contributor
      8 years ago

      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's avatar
        HKosova
        SmartBear Alumni (Retired)
        8 years ago
        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