Getting started with Smart UI using Cypress On LambdaTest

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.

Prerequisites for running SmartUI with Cypress

Basic understanding of Cypress is required.
Cypress version should be higher than 9.5.0. Click here to know more
Login to LambdaTest SmartUI with your credentials.
Copy LT_USERNAME and LT_ACCESS_KEY credentials from Access Key button on the top right of the dashboard.

The following steps will guide you in running your first Visual Regression test on LambdaTest platform -

Steps to 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:

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

Steps to run your first test

Step 1: Install the required NPM module for LambdaTest Cypress CLI in your project.

npm install -g lambdatest-cypress-cli

Step 2: Use init command to generate the sample configuration files.

lambdatest-cypress init

Step 3: Define Smart UI configuration in the lambdatest-config.json file of your Cypress project as shown in the below code snippet.

/cypress-project/lambdatest-config.json
{
  "lambdatest_auth": {
    "username": "<Your LambdaTest username>",
    "access_key": "<Your LambdaTest access key>"
  },
  "browsers": [
    {
      "browser": "Chrome",
      "platform": "Windows 10",
      "versions": ["latest-1"]
    },
    {
      "browser": "Firefox",
      "platform": "Windows 10",
      "versions": ["latest-1"]
    }
  ],
  "run_settings": {
    "cypress_config_file": "cypress.json",
    "build_name": "build-name",
    "parallels": 2,
    "specs": "./cypress/integration/examples/*.spec.js",
    "ignore_files": "",
    "feature_file_suppport": false,
    "network": false,
    "headless": false,
    "reporter_config_file": "",
    "npm_dependencies": {
      "cypress": "9.0.0"
    },
    "smart_ui": {
      "project": "<Your Project Name>", // Add your Smart UI Project Name here
      "build": "<Your_Build_Name>", // Please add your build name of choice here
      "baseline": false,// Enable if you want to update to a new baseline build
    }
  },
  "tunnel_settings": {
    "tunnel": false,
    "tunnel_name": null
  }
}

Step 4: Add cy.screenshot() method in your test script to capture the screenshots with the desired screenshot name.

describe("Cypress test with Visual Regression", () => {
  it("Example test", () => {
    cy.visit("https://demo.lambdatest.com/");
    cy.screenshot("<Screenshot Name>"); //Add desired Cypress screenshot name
  });
});

Step 5: Run the test on the LambdaTest platform by executing the below-run command:

lambdatest-cypress run

Step 6: You can now see the Smart UI dashboard to view the results.

For additional information about Cypress framework please explore the documentation here

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 multiple 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.

HTML DOM Config and Options - 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.