Get Started with Visual Testing in Katalon Studio

Functional testing misses visual bugs! Visual testing ensures a flawless user experience by catching layout issues, color mismatches, and more across browsers and devices. Let's learn more about visual testing and set it up in your Studio!

What is Visual Testing?

Visual testing is an automated process that verifies the User Interface (UI) of a web or mobile application. It ensures the application appears to the end-user exactly as intended. Katalon Studio integrates seamlessly with Katalon TestOps to offer robust visual testing functionalities. TestOps Visual Testing utilizes Artificial Intelligence (AI) for image comparisons, making it a powerful tool for your testing arsenal.

Why is Visual Testing Important?

Manual UI testing, relying solely on human observation, can be error-prone. Visual testing automates the comparison process using AI-powered functions like pixel-by-pixel detection, text-change detection, and layout-change detection. This minimizes human error and ensures even minor UI discrepancies are captured.

Katalon TestOps Visual Testing: Comparison Methods

Katalon TestOps offers three image comparison methods:

• Pixel-based comparison: This method compares the pixel resolution of two images, identifying even the most minute differences. While comprehensive, it might pick up on minor changes that are visually insignificant.
• Layout-based comparison: This AI-powered method identifies and compares similar zones between baseline and checkpoint images, highlighting any layout discrepancies.
• Content-based comparison: This method focuses on text content differences between images. It's particularly useful for pages with a significant amount of text, allowing you to prioritize critical text changes.

Download Katalon Free Trial To Start Testing

Setting Up Visual Testing in Katalon Studio

Here's a step-by-step guide to setting up visual testing with Katalon Studio:

Step 1: Capture Screenshots with Keywords

Katalon Studio provides built-in keywords to capture screenshots during tests. Here are some options:

• Web UI:
  • Take Screenshot As Checkpoint
  • Take Area Screenshot As Checkpoint
  • Take Element Screenshot As Checkpoint
  • Take Full Page Screenshot As Checkpoint
• Mobile:
  • Take Area Screenshot As Checkpoint
  • Take Element Screenshot As Checkpoint
  • Take Screenshot As Checkpoint

For Script Mode Users:

Use the corresponding keywords in your test scripts.

For Manual Mode Users:

1. Open your project in Katalon Studio.

2. Select a Test Case in Manual mode.

3. Double-click on a Test Step and choose options.

4. A new Test Step is added. Double-click it and enter the desired keyword (e.g., Take Full Page Screenshot As Checkpoint).

5. Double-click on the "Input" section of the keyword and enter a value (e.g., Sample Visual Test).

Step 2: Run your test suite in Katalon Studio

Note: Enable Katalon Studio Integration to upload Test Results to Katalon TestOps automatically.

Step 3: View Visual Testing Results in Katalon TestOps

1. Sign in to Katalon TestOps and navigate to your project.

2. Go to Reports > Visual Testing.

3. Click on the ID of a Visual Test Run.

4. The Results page displays captured screenshots (Visual Checkpoints).

5. Select a screenshot to view details.

• If you run a Test Suite for the first time, there is no baseline image.
• If you have existing visual data, it is stored in the System-generated baseline collection folder.
   

Wrapping Up

Congratulations! You have set up a solid foundation for visual testing in your project. Remember, the learning doesn't end here. Explore advanced features and best practices to fully leverage the power of visual testing. Keep exploring and refining your testing strategies. Happy testing!