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.

caution

The following documentation is applicable for Selenium frameworks only.

  • Domain LambdaTest SmartUI Login along with Production Credentials.

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

  • Both LT_USERNAME and LT_ACCESS_KEY credentials will be required.

  • Basic understanding of Selenium and WebDriver is required.

  • Go to LambdaTest SmartUI and login along with your credentials.

  • Access to Beta SmartUI Hub within your selenium remote connection instance to @beta-smartui-hub.lambdatest.com/wd/hub.

The following steps will guide you in running your first Beta 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 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 the following sample git repo ( https://github.com/LambdaTest/smartui-node-sample).
  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 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");
  • Installing dependency and for executing the test.
$ npm i
$ node test.js

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

Note : Beta Visual Regression Testing is by default open for all customers who have automation plan subscribed to your account. For more information please contact our support.

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. You can capture full page screenshot for your Selenium functional testing.

caution

The following feature is applicable for Selenium >= 4.0.0 with Chrome versions only.

You have to add the following options to your existing configuration for your test. Please see the sample configuration below:

Enable Chrome Developer Protocol for your test
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 your project
"selenium_version": "4.0.0", // Ensure your Selenium version is support Chrome Developer Protocol
"seCdp": true, // Enable you Chrome Developer Protocol to capture screenshots

};

Now you can add the following Webhook to your test cases where we need to capture the screenshot of your application.

driver.executeScript("smartui.takeFullPageScreenshot");

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");

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: