How to verify whole webpage

Product Forums Katalon Studio
1

How do I verify that everything on a web page is present, i.e. in the correct place, the correct font, colour, showing the correct text etc.? Ideally I would like to be able to learn/record these tests, and the “correct” version of the display. I don’t want to have to manually list every element, and its correct position, colour, font, text etc.

Thank you - Rowan

2 Likes
2

visual testing, perhaps.
search the forum for topics on this matter and katalon docs.

1 Like
3

This would be good post to start with: Visual Testing in Katalon Studio

1 Like
4

My work started with Visual Testing in Katalon Studio , continued revises. The current version is this:

What is the strength of my work?

  1. It supports 2 approaches. “Twins mode” and “Chronos mode”. These are orthogonal to each other.

    • Twins mode: you can compare 2 different URLs. Eg, http://myadmin.kazurayam.com/ and http://devadmin.kazurayam.com/. In other words, you can compare the Production environment and the Development environment of a system.
    • Chronos mode: you can compare 2 sets of screenshots taken at different timing (e.g, yesterday and today) out of URLs of a single host “devadmin.kazurayam.com”. In other words, you can compare the screenshots of your devevelopment evironment of today against yesterday.
    • I my opinion, the “Twins mode” is more useful than “Chronos mode” for the web developers in business. With “Twins mode”, they can compare the “Development” environment against the “Production” system for hundreds of pages automatically. The developers can assert that they are NOT breaking the system unexpectedly.
    • @rowan can regard her/his Production environment to be a correct one, and the Development environment to be verified. I think that “Twins mode” of my tool is what @rowan wants.
    • Surprisingly enough, all other “Visual Testing” tools supports only “Chronos mode”. They can’t do “Twins mode”.

  2. My artifact can compare text resources downloaded from web (HTML, JS, CSS, JSON, XML,… not only screenshot images) to report the diffs in a “GitHub-flavored-diff report” format. A sample is here.

    Screenshot 2023-10-26 at 9.15.54
    Screenshot 2023-10-26 at 9.15.542876×1336 206 KB

  3. It is free to use. I wouldn’t ask you any payment.

  4. But, be warned, it is not well documented (as it is principally for my own use, not a priced product). So that it would be difficult for others to apply to their own projects.

1 Like
5

Katalon’s Visual Testing is here

There are number of Visual Testing tools (with Chronos mode only though) available in the market. Have a look at

I think Percy is the most versatile Visual Testing product in the current market.

https://percy.io/

Of course, it is priced.

1 Like
6

Nice , you can try Visual testing that supports different ways of image comparison.

1 Like
7

What is Visual Testing? — The marketing brochure by BrowserStack Visual Testing: A Beginner's Guide | BrowserStack describes as follows:

Visual testing aims to verify that the application’s visual elements like colors, images, fonts, and layouts, are displayed correctly and consistently across different devices, operating systems, and browsers.

I would like to ask @rowan.

Do you really want to verify your system across different devices, operation systems, and browsers ?

If yes, any Visual Testing tools (including Katalon’s one) in the market would be your friend.

If no, you should think deep and make it clear what you want to achieve.

1 Like
8

I am not interested in verifying my software across different devices, operating systems, and browsers.

Rather, I want to be notified when my developers have broken the software in the development environment unexpectedly. I want to be notified when they have made unintentional/unplanned changes to the application. These changes are broadly called “mistakes” or “degrades”. I want to automate finding degrades.

I would tell you my previous story. My web system had some hundreds of pages (= URLs) to inspect. One day the developers had to upgrade one of the libraries which our application software depends on. The library ran in the base layer so that we could not expect what will result in the page views when we upgrade the library. Hopefully there will be no affects, but the developers must ensure that there is no degrades before any releases. All we could do was to simply open all pages in browsers and see if they look “OK” or not. We had to inspect hundreds of pages again and again. It was a nightmare. The task was so boring, time consuming and tiresome that it spoiled the motivation of the developer team. In this situation, I proposed my “Visual Inspection” tool.

In fact my tool detected a degrade caused by the upgraded library. We could detect it via comparing the screenshots taken in the development environment with the upgraded library against the production environment with the previous version of the library. My tool found the degrade in the approximately 5% of hundreds of web pages as the inspection target. The tool could produce a list of page URLs to check further. Based on the list, we could get a list of HTML Template files to be fixed. We worked out to fix this degrade with a concrete task list. The fix was a breeze. Thus my tool helped us. Without this tool, it is quite likely that we gambled upgrading the library in the production system and got a lot of claims from the end-users.

The Visual Testing tools in the market can not find out degrades. Therefore I don’t use them.

2 Likes