Selenium how to check the font type

Hello,

Any help is appreciated
How do I check the Font type e.g. Open Sans
I’ve used get CSS property value and grabbed the font-family but this includes alot of other fonts, I just want to check what the actual font being used is?

Hi @BigLez

I guess what you’ll probably want to do as there’s no way (well that I know of…) for returning just the first value with selenium library for that computed value.

So you’ll probably want return that property as you have been doing and then you can do a number of things (which your probably aware of all ready), but there’s a good few options out there:

${contains}=  Evaluate   "Open Sans" in """${font_family}""" 
# The do something on the contains

or

# This will fail if "Open Sans" is not a part of the ${font_family} value
 Should Be True      "Open Sans" in """${font_family}""" 

You could also split the string returned and then check if the first item equals that of the font family you are expecting.

The first in the list should be the one being used with the others being a fallback, so If the browser does not support the first font, it tries the next font and so forth, so maybe splitting the returned and checking the first might be the better choice… could be wrong…

Hi @_daryl,

I interpreted this question differently, I think the question is not so much if the font (Open Sans) is in the font family list, but which font from the font family list did the browser actually render the page with.

Unfortunately I don’t know the answer or if it’s even possible to find out.

I guess you could query the OS to get a list of fonts installed on the machine, then grab the font family list and iterate it checking each one to see if it’s in the OS list, if the family list was something like Tahoma, Open Sans, Ariel and Tahoma is not in the OS font list but Open Sans and Ariel are in the OS font list then “in theory” you could deduce that the page was rendered with Open Sans, but that’s still an assumption? how you know for sure? Is there a way this can be verified?

I guess Adam (@BigLez) will confirm if my understanding is correct.

Dave.

1 Like

Hi @damies13
You’re right and that’s how I interpreted it, I guess my response shows somewhat different and maybe not 100% helpful (it was late):sweat_smile:but I based my response on that it’s impossible for the exact, and as far as checking then, gave a few options (but probably wasn’t needed)

I understood it as which was being loaded and the rest being a fallback with no actual way of knowing other than maybe using some form of tool (if they exist) To which end with get property, it returns the computed value… and all fallbacks but then if it couldn’t use the font it would try the next.

Hmm… definitely an interesting request/question.

EDIT: I know Firefox will show the one used underlined:
image

Whereas chrome, I don’t believe does, only on its fallback would it underline…

Chrome (can’t speak for firefox) does show the rendered fonts when on the computed tab right at the bottom in dev tools, maybe there be a way of retrieving that?
image

Hi @_daryl,

I wasn’t criticising (hope you didn’t take it that way), just commenting my interpretation of the question.

Re the underline’s and highlights in dev tools I didn’t know FF and Chrome did that, thanks for teaching me something, so there is hope for a way to check which font was used for rendering.

I was thinking it might have been possible by taking a screenshot of the element and using an image comparison of a known good render but that could be a huge amount of work to set up and maintain.

Dave.

1 Like

Aha, not at all, mate :slight_smile: - would always welcome criticism.
Your perspective is always great and on point!

I do wonder if the Galen framework would be a useful tool here. I don’t believe it can be used in the way most libraries are with RF… but start’s moving away from this RF/Selenium library, so won’t say too much about it.

@BigLez might be worth taking a look at the below, could well be what your after:

1 Like