(Q&A) Please help to suggest me tools for checking element of UI such as font, color, image

🗄️ Archive
1

Hi all,
Im new to Mobile Testing, please can anyone suggest me tools which I mentioned in title?

Many thanks to you.

1 Like
2

I’m going to start by asking a question back Hung ; and then hope that someone who has done this before, maybe explains the details of how to. Also, I assume you are talking about a Native app, not a browser app.

  1. What is the business value behind verifying the font and text color. If the application allows the user to change the font and color, then it suddenly makes sense to change your testing approach completely. By change your approach, I mean not testing as a boolean pass-fail verdict type testing in the normal way, but taking into account that graphics and color are nuanced. So the idea or pass-fail, can become a case of: (This text is red, as long as the R value is higher than 230, and the G and B values are lower than 50.) If the font and color are really hard coded on the other hand, they are not going to change often enough to make it worth automating testing specifically for those changes. Note testing fonts is awesome-hard to do.
  2. If your product is an art product or a word processor, you will want to not only find other ways to test these properties, really well but also invest in image checking tools. An expensive job to do properly, and best avoided. I have experimented with python libraries that help accomplish image matching, but it’s a process full of complexity. For example have you though of the impact of the OS display scaling on font size?

Avoid testing graphically, but if you have to, break down the problem as far possible, and then find tools specifically to help. For example taking screenshots of small areas, and comparing them, is possible using AI libraries for machine-vision or “computer vision”. I’m pretty sure this is something we have talked about on here before. Lets see what the community can bring.

Oh, and welcome on board the MOT community.

3

Hung, You may want to jump into this thread if image recognition is your game - Tool for visual error detection

5

Hiho @hung_3ly :slight_smile:

Answer for your question strongly depends on the context.

  • Is it native app?
  • What tech stack was used to create it?
  • What exactly you need to check?
  • Why you need to check that?
  • How you need to check that? (wether font is exactly roboto 200 and color of the button is exactly #FF0000 or how?)

Some tools that will help you on the way for now:

Developer assistant to use directly on your Android device:

Appium inspector for Android and iOS devices:

Google’s Android layout inspector:

Maybe some image comparison will be helpful too? But that’s just a guess.

1 Like
6

@pwicherski : Hi, i am looking for the same question. The Android app you have suggested (option 1) works fine for Native app. But what if we had hybrid app like with Flutter or React Native?

As a tester, we need to verify the Font family and style used in app is same as per design or not. So is there is any tool or app that allow to test it? Even it should allow hybrid app also.