| id | title | hide_title | sidebar_label | description | keywords | url | site_name | slug | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
smart-visual-testing |
Smart Visual Regression Testing Using LambdaTest |
true |
Smart Visual Testing |
Discover visual deviations and regression bugs with LambdaTest's Smart Visual Testing. Upload, compare, and ensure top-quality UI |
|
LambdaTest |
smart-visual-testing/ |
Smart Visual Testing feature allows you to test and compare two image layouts to determine the differences between them quickly. With just one click, you will now be able to view visual bugs easily, such as Icon Size, Padding, Color, Layout, Text, Element Placement, and much more.
Once you login, click on the Navigation menu bar in the left Visual UI Testing > Smart Testing.
Next, we have to upload a Baseline image
Step 1: Upload a baseline image. Click on the + icon next to the Base Line Images header.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-1.webp').default} alt="Smart Visual Testing" width="1439" height="803" className="doc_img"/>
Step 2: Select a baseline image from your computer. You can also select multiple images at a time.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-2.webp').default} alt="Smart Testing" width="1438" height="820" className="doc_img"/>
Step 3: Once selected, images will be uploaded, and you can view the same under the Baseline Image gallery.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-3.webp').default} alt="Image Comparison" width="1438" height="820" className="doc_img"/>
Upload Comparison Images. Please note that you cannot upload comparison images before uploading a baseline. Once you have uploaded the baseline image, below are the steps to upload a comparison image.
Step 1: Click on the baseline image you want to run a comparison with.
Step 2: On the right, you will find the Upload Comparison Image button. Click on it to upload images.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-4.webp').default} alt="Comparing Image pixel by pixel" width="1439" height="752" className="doc_img"/>
Step 3: Select the images you want to compare with the baseline image. You can select multiple images as well.
Step 4: If everything goes well, you would see the thumbnail of your comparison images along with the RUN button.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-5.webp').default} alt="Smart Comparison Testing" width="1440" height="791" className="doc_img"/>
Step 1: Once you have uploaded the comparison images, running the comparison is pretty simple. Just click on the Run button on the comparison image thumbnail.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-6.webp').default} alt="Running Image Comparison" width="1440" height="791" className="doc_img"/>
Step 2: You can also click on compare all button.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-8.webp').default} alt="Compare All Images" width="1440" height="791" className="doc_img"/>
Once you have run the comparison between baseline and comparison images, you can check the issues by clicking on the View issues button on the comparison image.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-9.webp').default} alt="comparison between baseline and comparison images" width="1440" height="791" className="doc_img"/>
This will take you to a new window with a comparison image. You can zoom-in or Zoom out the images in this window, change the image difference color, switch to slider mode, switch to side-by-side mode, or mark the image as a bug.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-10.webp').default} alt="settings used in Image comparison" width="1437" height="745" className="doc_img"/>
There are multiple options for you to view your images. The side by side mode will open all three images, baseline image, comparison image, and comparison result image in a single window. In this mode, you can also mark the image as a bug. Or you can switch to any other mode.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-11.webp').default} alt="Side by Side Image Comparison" width="1438" height="750" className="doc_img"/>
In slider mode, you can view the baseline image and comparison image overlapped over each other and toggle them with a slider. This mode can help you view the difference between the two images very easily.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/Slider-Mode-1.webp').default} alt="Slider Mode for Comparing Images" width="1439" height="747" className="doc_img"/>
You can change the baseline or comparison image easily. Just click on the settings button at the bottom of the image thumbnail. You would see multiple options like View Image Details, Replace Image, Rename Image, and Delete Image.
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-12.webp').default} alt="Changing Baseline or Comparison Image" width="821" height="646" className="doc_img"/>