Skip to main content

Smart UI Testing


Designers and front end testers employ a sort of testing called "Visual Regression". In visual regression testing, we compare screenshots and identify visual variations in the pixels.

Visual Regression testing has been integrated with Lambdatest's HyperExecute, allowing you to execute Smart UI Tests on the platform.

Smart UI Features


Below are the features of Hyperexecute's Smart UI Testing:

  • Pixel-to-Pixel comparison.
  • Multi-browser and resolution tests in parallel mode.
  • Uses a webhook configuration to connect to your Automation test suite.
  • Allows you to add up to 5 approvers/tags on a project.
  • Approvers will be notified of changes in the test status.

How To Execute Smart UI Tests


Using the HyperExecute platform, you can perform regression testing in just one click and find Visual UI Regression bugs easily with the help of Smart UI Testing. This documentation will act as your step-by-step guide in performing successful Smart UI tests.

Prerequisites

  • Domain LambdaTest SmartUI Login along with Production Credentials.

  • Access to Beta SmartUI Hub @beta-smartui-hub.lambdatest.com/wd/hub.

  • LambdaTest Authentication Credentials

    • Keep your LambdaTest login, access key, and HubURL handy for authentication purposes. They must be configured as environment variables. You can find them on your LambdaTest automation dashboard by clicking on the key symbol next to the help button.
  • Basic understanding of Selenium and WebDriver is required.


The following steps will guide you in running your first Smart UI Test on LambdaTest platform.

Step 1: Create a SmartUI Project

The first step is to create a project with the application in which we will combine all of your builds that run on the project. Take the following actions to create a SmartUI Project:

  1. Go to LambdaTest SmartUI Dashboard at https://beta-smartui.lambdatest.com
  2. Click on create a new project
  3. Add your name of the project, approvers for the changes found, tags for any filter or easy navigation.
  4. Specify the details and click on the Create Button.

Step 2: Configure Your Test With Selenium Desired Capabilities

Once you have created a SmartUI Project, you can generate screenshots by running automation scripts. Follow the below steps to successfully generate screenshots -

  1. Please clone this sample git repo.
  2. Set up the LambdaTest credentials by following the instructions mentioned in the README.md file.
  3. Edit the required capabilities for your test suite.
Please replace your capabilities in your Remote Webdriver DesiredCapabilities configuration
let capabilities = {
platform: "Windows 10", // Configure your OS for Selenium test
browserName: "chrome", // Configure your Browser for Selenium test
version: "latest", // Configure your Browser Version for Selenium test
visual: true, // Configure your Capture screenshot for Selenium test
name: "test session", // name of the test for Selenium
build: "Automation Build", // name of the build for Selenium
"smartUI.project": "<Your Project Name>", // Replace the name of project with the new project name
};

// Connecting to the Lambdatest Selenium Cloud Grid with Smart UI (Beta)
let gridUrl =
"https://" +
"<Your Username>" +
":" +
"<Your Access Key>" +
`@beta-smartui-hub.lambdatest.com/wd/hub`;

// Here is your Remote WebDrive Connection
let driver = await new webdriver.Builder()
.usingServer(gridUrl)
.withCapabilities(capabilities)
.build();
  • Webhook for taking screenshot -
driver.executeScript("smartui.takeScreenshot");
  • Installing dependency and for executing the test.
$ npm i
$ node test.js

Here you can explore multiple features and execute more such builds.

Smart UI Baseline Images

To run Smart UI tests, you need to have a Baseline Image and a Comparison image.

A baseline image is the reference image with which you want to compare. You can either upload this image from your computer or take a screenshot from your browser.

Screenshot Capturing Options


For Capturing Full Page Screenshot

For any websites that provide a scrolling feature on their application user interface, you can take a screenshot of the entire page. You can capture full page screenshot for your Selenium functional testing with the section of code below:

driver.executeScript("smartui.takeFullPageScreenshot");

For Capturing Viewport Screenshot

This section of code must be attached below the relevant portion of the Selenium script from which the screenshot will be taken.

driver.executeScript("smartui.takeScreenshot");

Configuration With The Host


This section of code should be used to configure your Smart UI test with the host

const GRID_HOST = "@beta-smartui-hub.lambdatest.com/wd/hub"

Smart UI Test Keywords

KeyDescription
transparencyCommand to adjust test transparency settings
largeImageThresholdCommand to set the threshold value for the comparison output
BoundingBoxes: [box1, box2]Command to narrow down the area of comparison by specifying a bounding box measured in pixels from the top left
ignoredBoxes: [box1, box2]Command to exclude part of the image from comparison, by specifying the excluded area in pixels from the top left
ignoredAreasColoredWith: colorCommand to exclude pixels that match the specific color on a reference image from comparison