Skip to main content

Getting Started With Visual Regression Testing Using Selenium On SmartUI

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

  • Basic understanding of Selenium and WebDriver is required.
  • Go to LambdaTest SmartUI and login along with your credentials.
  • Access your Hub for your selenium remote connection instance at hub.lambdatest.com/wd/hub.
  • Copy LT_USERNAME and LT_ACCESS_KEY credentials from Access Key button on the top right of the dashboard.
export LT_USERNAME="YOUR_USERNAME" 
export LT_ACCESS_KEY="YOUR ACCESS KEY"

The following steps will guide you in running your first Visual Regression 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 your builds run on the project. To create a SmartUI Project, follow these steps:

  1. Go to Projects page
  2. Click on the new project button
  3. Select the platform as Web for executing your Selenium tests.
  4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
  5. Click on the Submit.

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 the following sample Github repo (https://github.com/LambdaTest/smartui-node-sample).
git clone https://github.com/LambdaTest/smartui-node-sample
  1. Set up the LambdaTest credentials by following the instructions mentioned in the README.md file.
  2. 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
  "smartUI.build": "<Your Build Name>", // Replace the name of Build with the new Build name
  "smartUI.baseline": false, // Enable if you want to update to a new baseline build
};

// Connecting to the Lambdatest Selenium Cloud Grid with Smart UI
let gridUrl =
  "https://" +
  "<Your Username>" +
  ":" +
  "<Your Access Key>" +
  `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 the screenshot - This part of the code needs to be attached below the required segment of selenium script of which we would like to take the screenshot to test on.
driver.executeScript(`smartui.takeScreenshot,{"screenshotName":"<Name of your screenshot>"}`)
  • Installing dependency and for executing the test.
npm i && node test.js

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

Screenshot Capturing Options​

For capturing full page screenshot​

You can capture the screenshot full page for all different websites which have a scrolling functionality on their application user interface for your Selenium functional testing.

Add the following Webhook to your test cases where we need to capture the screenshot of your application.

driver.executeScript("smartui.takeFullPageScreenshot=<Your Screenshot Name>")
caution

The following feature is applicable for Selenium >= 4.0.0 with Chrome versions only. Please ensure that the Lambdatest Capabilities are updated in your project for executing full page screenshot(s).

Running Tests on Other Languages and Frameworks​

In this module we discussed about running smart visual tests on NodeJS, here we will know more about running those tests for any language or framework with Selenium. To execute visual testing on LambdaTest SmartUI, we need to execute "smartui.takeScreenshot" using Selenium Webdriver.

driver.executeScript(`smartui.takeScreenshot,{"screenshotName":"<Name of your screenshot>"}`)

In a similar way, we can run visual tests for other languages and frameworks using their corresponding script executing commands. To understand better, we provided the commands for some of the popular languages and frameworks:

For additional information about Selenium framework please explore the documentation here

Fetching Screenshot Status and Results using WebHook​

You can fetch the status of the screenshot captured and the results of the screenshot captured using the following webhook.

driver.executeScript("smartui.fetchScreenshotStatus")

For fetching results specific to a screenshot, you can use the following webhook by adding the Screenshot Name to the WebHook.

driver.executeScript("smartui.fetchScreenshotStatus=<Your Screenshot Name>")
The following webhook will return the status of the screenshot captured. The status can be one of the following:
{
  screenshotsData: [
    {
      screenshotName: '<Your Screenshot Name>',
      screenshotURL: '<Link to the screenshot captured>',
      screenshotStatus: 'Changes found', // Status of the screenshot
      misMatchPercentage: 10.04, // Percentage of mismatch in the screenshot
      threshold: 100,            // Threshold set for the screenshot
      browserName: 'chrome',     // Browser used for capturing the screenshot
      resolution: '1920x1080'    // Resolution of the screenshot
    }

    ../Other Screenshots
  ],
  buildId: '<Your Build ID>',
  buildName: '<Your Build Name>',
  projectName: '<Name of the Project>'
}

The following are the description of the parameters:

ParameterDescription
screenshotNameName of the screenshot for which the result is to be fetched.
screenshotURLURL of the screenshot captured.
screenshotStatusStatus of the screenshot captured.
misMatchPercentagePercentage of mismatch in the screenshot captured.
thresholdThreshold set for the screenshot captured.
browserNameBrowser used for capturing the screenshot.
resolutionResolution of the screenshot captured.
buildIdID of the build in which the screenshot was captured.
buildNameName of the build in which the screenshot was captured.
projectNameName of the project in which the screenshot was captured.
Please Note

The webhook will return the result of the screenshot captured only if the screenshot is processed and the result is available.

This may take a few seconds to process the screenshot. Please ensure that you have added a delay before fetching the result of the screenshot.

Advanced Options for Screenshot Comparison​

Build Configuration - If you have multiple screenshots running the same test suite and want to run the comparison for the same test suite, want to add a build as a baseline from your test suite or need to access more SmartUI Build Config Options, click here.

Advanced Test Settings - We offer mutilple options for comparing the Baseline and the Test Output screenshots captured during your automation testing suites. To know more about our advanced P2P comparison options, click here.

Handling Dynamic Data - In case if you have any dynamic elements that are not in the same position across test runs, you can ignore or select a specific area to be removed from the comparison. For accessing such HTML DOM Config and Options, click here.

Last updated on