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

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

My work started with Visual Testing in Katalon Studio , continued revises. The current version is this: Automated Visual Inspection What is the strength of my work? 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”. 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] It is free to use. I wouldn’t ask you any payment. 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.

Katalon’s Visual Testing is here Visual Testing overview | Katalon Docs What is Visual Testing? There are number of Visual Testing tools (with Chronos mode only though) available in the market. Have a look at [image] Visual Testing: A Beginner's Guide | BrowserStack Visual testing is a process of testing the visual appearance of a product to ensure it meets design specifications. I think Percy is the most versatile Visual Testing product in the current market. https://percy.io/ Of course, it is priced.

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

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.

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 upon. The library ran in the base layer so that we could not foresee what will result in the page views when we upgrade the library. The developers had to ensure that there would be no degrades before the release. All we could do was to simply open all pages in browsers and see if they look “OK” or not. We had to inspect the 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% out of the hundreds of web pages. 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. I suspect that the Visual Testing tools in the market are not designed for the project-staging comparison. Therefore I don’t use them.

You could reply like this: Hi Rowan, From what you’ve described, it sounds like you’re looking for visual regression testing. Instead of manually checking every element (text, font, color, position, etc.), you can save a baseline image of the page and compare future test runs against it. Any visual differences are then highlighted automatically. If you’re using Katalon, you may want to explore its visual testing features or integrate a tool like Applitools for this type of validation. I haven’t used this approach extensively myself, but it seems like it would be a much better fit than trying to verify every UI element individually. Hopefully someone with more hands-on experience can share their recommendations as well.

[image] mamtabankoti4: You could reply like this: Hi Rowan, From what you’ve described, it sounds like you’re looking for visual regression testing. Instead of manually checking every element (text, font, color, position, etc.), you can save a baseline image of the page and compare future test runs against it. Any visual differences are then highlighted automatically. If you’re using Katalon, you may want to explore its visual testing features or integrate a tool like Applitools for this type of validation. I haven’t used this approach extensively myself, but it seems like it would be a much better fit than trying to verify every UI element individually. Hopefully someone with more hands-on experience can share their recommendations as well. sounds strange here. fyi @nghi.phan :sweat_smile:

whole page means, elements , text etc, one option is visual test case but not sure about negative test scnerios in that case

How to verify whole webpage

Miscellaneous

Dave_Evers October 25, 2023, 6:06pm 3

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

Topic		Replies	Views
SHOULD :: Visual based testing : Can we have a Keyword to compare a base page with SUT? Feature Request katalon-studio , feature-request	16	2867	May 8, 2019
Visual Testing in Katalon Studio Tips and Tricks katalon-studio , tips-tricks	73	22927	January 6, 2024
Check whether each and every object loads on the website Web Testing katalon-studio	3	2590	July 19, 2020
How to compare two entire pages Web Testing katalon-studio	5	3662	July 6, 2026
Comparing Prod vs Dev website using multiple urls per website API Testing start-page , katalon-studio , api-testing	8	3747	February 15, 2022

How to verify whole webpage

Related topics