Skip to main content

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.

Pre-requisites 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:

  1. Go to Projects page
  2. Click on the new project button
  3. Select the platform as Web for executing your Cypress tests.
  4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
  5. 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

Last updated on