I can see the differences highlighted but I cannot zoom in directly on the side-by-side comparison to understand what exactly changed. I need to currently go to baseline collections, select the baseline image and then go to test results and find the checkpoint image and compare manually with no highlights to assist since im no longer on the visual testing comparison page. (On TestOps)
1 Like
Hi @niranjana.n,
Welcome back after long time.
Maybe I would change it as feature request. Can you please help provide more information such version, OS, screenshots, expected result, …? Thank you
@niranjana
Could you disclose a sample pair of images that you want to zoom into? Could you explain a bit how the zooming feature would help you in the case of the sample images?
Hi @Elly_Tran @kazurayam
Unfortunately, I cannot post a full picture since it is our client application, but i will post a section of the images that showed a difference
The viewport size was set to be 1920x1080 and run headless on TestCloud on a Windows Chrome version 136 (Left is the Baseline image, right is the checkpoint).
As you can see from my screenshot, this is a data table, and I need to verify the data across the 2 screenshots. The text is very small and I cannot understand what the difference is from the comparison window alone. It would really help if I could zoom in on these pictures to see what the difference is, or even a slider tool as on some other Visual testing tools like Applitools or Percy would also help a lot!
Hope that made sense.
Regards,
Niranjana
1 Like
Thank you for sharing screenshots.
I have never used the Katalon’s Visual Testing feature. I know nothing about it. So it is likely that my question sounds stupid, but let me ask one thing:
In the screenshot, I found a border line in purple color.
Did you, @niranjana.n, draw this border manually on the screenshot image just before posing the images here? Or was the border painted by the Katalon system in the baseline image and the checkpoint image?
You wrote “the viewport size was set to be 1920x1080”. This would mean that the baseline image has 1920 pixel width, and the checkpoint image has also 1920 pixel width. If you want to view these 2 images side-by-side without any scaling, you would need a display device of 1920+1920=3840 pixel or wider. Do you, @niranjana.n, actually have such a wide display device?
The screenshot image you provided above, which has the basdeline on the left and the check point on the right, has 1712 pixel width. What tool determined this width of 1712 pixel?
I guess, the origial 1920+1920 pixel image was somehow scaled down to 1712 pxel. Did Katalon presented the images scaled down?
Scaled down from 100%-> 45%. If the original image is scaled down by 45%, then the raster image such as PNG will inevitablly lose down the resolution. Small characters are likely to get unreadable.
So, I guess, @niranjana.n wants Katalon to present the images WITHOUT scaling, with slider UI widget. Possibly @niranjana.n would want Katalon to present the image initially slided so that the different portion is visible = forcus moved already automatically.
I guess, @niranjana.n does NOT require any zooming capablility over the resized images, which renders all small characters unreadable. Unreadable characters will be unreadable with zooming in anyway.
You wrote “the viewport size was set to be 1920x1080”.
One idea: how about shrinking the viewport to have smaller width, such as 1000 pixel?
Here I assume that your target web app is “responsive” enough; It can render the content appropriately in the given narrower viewport.
If you change the viewport width narrower, then the screenshot will result to have the same smaller width. Then, you will get the similar result as “zooming”. Isn’t it the case?
Hi @kazurayam
No, this was added by the Visual Testing comparison tool when i selected the Comparison Method as “Text Content”. As per the legend in my screenshot, the pink line represents any Missing/new areas detected.
Hope that helps.
Regards,
Niranjana
@kazurayam Yes, I can use a smaller viewport, but I don’t want to go down that route because it significantly increases the number of screenshots I need to take to cover all areas of the data table (my table already has horizontal and vertical scrollbars even with this viewport size(it has many columns and rows) - In addition to this, my table has multiple pages as well). The current viewport works best for me. I’m guessing if zooming isn’t something supported at the moment, I can open a feature request.
Regards,
Niranjana
Probably, yes, you should post a request.
Let me tell my personal opinion about “web ui testing by comparison”. I am NOT going to talk about Katalon’s Visual Testing feature.
I have developed my own tool that runs inside Katalon Studio. See the following post:
My tool equips 2 ways of Web UI comparison
Screenshot comparison
HTML source comparison
Let me assume I need to test 100 pages of a web site. 100 is numorous enough. It is very tiring to look at 100 pages.
My tool enables me to automate looking at 100 pages repeatedly.
The screenshot comparison is good as it quickly informs me which pages out of 100 have any visual differences, so that are problematic. By looking at the results of visual inspection, I can focus my attention on a small number of problematic web pages while I can ignore the bulky rest.
Once I picked up the visually-suspicious pages, I would no longer refer to the screenshot comparison results. I would look at the HTML source diff of the same page. The HTML source diff is good to find exactly how the 2 pages are textually different, which would give me some clues to fix the issues in the target web app. The textual diff is compact and useful regardless how large is the viewport size of the page on browser.
Let me tell you about my experience. Once I noticed a visual difference in screenshots of a web page. But the visual diff did not help me much to find out the reason why. I looked at the HTML source diff which clearly showed to me that different versions of a library were used. I reported my finding to the library team; they soon found a subtle bug. Textual diff guided me to the heart of the matter.
In order to inspect Web UI by comparison effectively, I need complementing 2 methods: the screenshot comparison and the HTML source diff. For me, the screenshot comparison is not a swiss army knife that can solve everything.