Getting started with Smart Visual User Interface Testing

About the Video

With Smart Visual UI testing, with just one click, identify visual deviations introduced with the new build related to Icon Size, Padding, Color, Layout, Text, Element’s position, and much more.

Video Chapters

0:00 Introduction

0:12 What is Smart Visual Testing?

0:42 How LambdaTest’s Smart Visual UI Testing works?

2:09 Conclusion

Key Topics Covered

Introduction to Smart Visual UI Testing: The video starts by explaining the concept of Smart Visual UI Testing, which allows users to compare screenshots of web application pages across different browsers or environments, like production and staging. This feature is designed to help easily identify issues related to icon sizes, padding, color, layout, text, element positions, and more.

Accessing Smart Visual UI Testing: It guides viewers on how to access the Smart Visual UI Testing feature from the LambdaTest platform by navigating to the "Visual UI Test" section and then clicking on "Smart Testing."

Baseline Images: The video explains the concept of baseline images, which serve as the reference images for comparisons. Users are shown how to add baseline images by selecting and uploading them to the LambdaTest platform.

Adding Comparison Images: After setting up baseline images, the tutorial demonstrates how to add comparison images against which the baseline images will be compared. This step involves selecting images for comparison and uploading them to the platform.

Running Comparisons: Viewers learn how to execute visual comparisons, either image by image or all at once, by clicking the "Run Comparison" button. This process initiates the analysis to identify visual differences.

Viewing Issues: The video showcases how to view the identified issues by clicking on the "View Issue" button on a comparison image. A new page opens, highlighting all visual issues detected during the comparison.

Issue Highlighting and Viewing Modes: It details the options available for highlighting issues, including changing the color to make discrepancies more visible. Additionally, it mentions the ability to view the images side by side or in slider mode for a more detailed examination.

Further Assistance: The video concludes by encouraging viewers to seek further information or assistance by checking the FAQ section or contacting LambdaTest support via email.

Related Blogs & Hubs

LambdaTest Introduces Screenshot API For Faster Visual Testing

Smart Visual Regression Testing Using LambdaTest

Visual Regression Testing Using Selenium On SmartUI

Getting started with Smart UI using Cypress On LambdaTest

14 Top Visual Layout Testing Tools

Smart UI Testing and Integration with Asana and Trello

Complete Guide To Cypress Visual Regression Testing