As a tester, I want to verify used font family, font size, font color etc if they are correct as per the UI design or client requirement or not.
No matter application is either developed in Native or Hybrid (Flutter or React Native), the recommended solution should work fine.
So do you have any ideas about the tool/apps/websites that allow us to verify font styles in any mobile app ?
My $0.02: I’d say that the main information you’re after is “does this look and feel right?” And verifying whether it is or isn’t font XXX won’t tell you that. Only a human eye will tell you whether the UI feels right and according to design requirements.
In my company we often do “design reviews” where the designer looks at the newly implemented UI before any functional testing is done - alone or in cooperation with a tester who knows how to evoke different flows with different UI variants.
I second Eva and would differentiate it like this:
Even for regression I found a mixed approach “semi-automation” helpful:
Have a tool which goes trough your application and creates screenshot from every relevant view. This screenshots gets assessed by humans.
Maybe you also include an automated comparison of the screenshots. But this works imo only reasonable good if you can guarantee that the conditions are always the same. If even the slightest offset, which might maybe even not visible but acceptable for human, will crush this. And you do not want to mess with thresholds to what degree what changes is even.
Make automated comparison for regression only if you are sure that 100/100 runs with the same version are always the same.
Otherwise its an acceptable to judge the screenshots by humans. Your automation took already away the effort for navigating through the software.
Thanks for your response.
The human eye can identify if design is correct or not.
But it is not I am looking for. Check below use case for Login screen,
Now for field title and subtitles font family should be “Roboto”. And font size should be " 10" and Font color should be “XXXXXXXX” for example.
Now to verify above use case when mobile application is developed then its the manual process to verify it and its very time consuming. So main problem is its difficult to find if font style is as per the requirements or not.
So is there is any tool or app which simply tells us details about this font style for different elements??
But how would you know that your application is rendering Roboto correctly? And it’s the rendering that counts - how it looks. The user doesn’t care about the font name.
It is mentioned clearly in requirement that font family should be xxxx so it shouldn’t be like yyyy there should not be and 0.1% deviation.
Ya, I mean to say the font should be Roboto but how do I know if app has Robot or different font until I not see the code?
Like as per requirements font color should be “#DCDCDC” but developer has used “#D3D3D3”
Now if you see the color then both will look similar so you can’t conclude if its correct or nor.
I found one app from playstore “Developr Assistant” but its working for Native apps only. I attached screen shot of it thats give me proper results like what is font style, weight, color, size and many more.
Will users notice that the color is different? Will the color change cause your app to be less usable?
I think that the way your requirements are worded is causing you to focus in the wrong direction.
Yes its matters.
How you can say the requirements causing to focus on wrong direction?
Client has made lots of research on UI/UX and invest more time on it. So it must be specific no any 0.1% deviation.
Testing should focus on mitigating risks.
What risks are you trying to mitigate by verifying that the color is exactly as specified and not a shade so similar that the difference is indiscernible to the human eye?
Another example: what if Google issues an update of the Roboto font that will cause your app to look ugly? It won’t matter to the user that the font is still Roboto with the same size etc. - they will care only that it doesn’t look right.
Test the things that matter to the user.
(I’m not making this up - I got curious, googled a bit and there’s a TON of posts about Roboto looking broken after Google updated it)
Verifying the UI/UX as per the requirements. That is goal.
Testing is not done only for lowering risk and mitigation. But it should also meet the client requirement. And this app is more focused on UI/UX not more on logical / functional type app.
So this testing is context dependent with specific purpose.
But as per your question you’re not actually verifying the UI/UX. You’re verifying the code that’s behind it.
FYI the Roboto word used here is just an example.
How will you solve below conflicts if you have many screens and there can be multiple Apps?
Font color should be “#DCDCDC” but developer has used “#D3D3D3
I wouldn’t raise it at all if it looks right.
(to me both colors look too light for the text to be legible, tbh)
And that’s not because I don’t care about requirements. It’s because rendering of colors and fonts is really, REALLY complicated and messy. The same font can render incredibly differently on different apps and platforms. So verifying you have the right font is just a needless extra step - you still need to verify whether the UI looks as it should. So you can just skip that extra step because it doesn’t add much value, if any.
