Skip to content

Files

Latest commit

 

History

History
244 lines (183 loc) · 8.07 KB

smartui-cli.md

File metadata and controls

244 lines (183 loc) · 8.07 KB
id title sidebar_label description keywords url slug
smartui-cli
Getting started with Lambdatest's Smart UI CLI
CLI
In this documentation, learn how to perform Visual UI Testing using command line interface on the LambdaTest Automation Cloud across 40+ browser versions.
Visual Regression
Visual Regression Testing Guide
Visual Regression Test Automation
Visual Regression Automation Testing
Running Visual Regression Tests
Visual Regression Testing Online
Run Visual Regression
Visual Regression Run Specific Test
Visual Regression Testing Environment
How to Run Visual Regression Tests
smartui-cli/

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import NewTag from '../src/component/newTag';

<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "LambdaTest", "item": "https://www.lambdatest.com" },{ "@type": "ListItem", "position": 2, "name": "Support", "item": "https://www.lambdatest.com/support/docs/" },{ "@type": "ListItem", "position": 3, "name": "Smart Visual Testing", "item": "https://www.lambdatest.com/support/docs/smart-ui-cypress/" }] }) }} ></script>

Welcome to the LambdaTest SmartUI CLI documentation!

With SmartUI CLI, you can seamlessly perform visual regression testing on the LambdaTest platform using your command line, identifying Visual UI Regression bugs effortlessly. This guide will walk you through the process of running successful Visual Regression tests using SmartUI CLI.

Pre-requisites for running SmartUI CLI

  • Basic understanding of Command Line Interface is required.
  • Login to LambdaTest SmartUI with your credentials.

The following steps will guide you in running your first Visual Regression test on LambdaTest platform using SmartUI CLI.

Create a SmartUI Web-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 CLI 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 Dependencies

Install required NPM modules for LambdaTest Smart UI CLI in your Frontend project.

npm install -g @lambdatest/smartui-cli

Step 2: Create URL file

smartui config:web-static urls.json

Once, the URLs file will be created, you will be seeing the sample pre-filled URLs in the urls.json file:

[
  {
    "name": "lambdatest-home-page",
    "url": "https://www.lambdatest.com",
    "waitForTimeout": 1000 //Optional
  },
  {
    "name": "example-page",
    "url": "https://example.com/"
  }
]

:::caution Please Note The waitForTimeout is an optional configuration.

If you are using any async components, you can add wait time for the page to load the DOM of your components. This can help avoid false-positive results for your tests. You can add the wait time in milliseconds, which might increase the execution time of your tests.

:::

Step 3: Configure your Project Token

Setup your project token show in the SmartUI app after, creating your project.

export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"

<img loading="lazy" src={require('../assets/images/smart-visual-testing/smartui-project-token.png').default} alt="cmd" width="768" height="373" className="doc_img"/>

Step 4: Create and Configure SmartUI Config

You can now configure your project settings on using various available options to run your tests with the SmartUI integration. To generate the configuration file, please execute the following command:

smartui config:create-web smartui-web.json

Once, the configuration file will be created, you will be seeing the default configuration pre-filled in the configuration file:

{
  "web": {
    "browsers": [
      "chrome", 
      "firefox",
      "safari",
      "edge",
      // Add more browser configuration here
    ],
    "resolutions": [
      [
        1920,
        1080
      ],
      [
        1366,
        768
      ],
      [
        360,
        640
      ]
    ]      
  }
}

SmartUI CLI Config Options

Please read the following table for more information about the configuration file:

Config Key Description Usage
browsers You can add all the supported browsers brands here to run your tests for SmartUI.
Ex: "chrome", "firefox", "safari", "edge", etc..		 Mandatory
resolutions You can add all the supported browser viewpoints here to run your tests for SmartUI
Ex: [1920, 1080],[width, height] etc..
Mandatory

Step 5: Execute the Tests on SmartUI Cloud using CLI

You can now execute tests for Visual Regression Testing using the following options:.

smartui capture urls.json --config smartui-web.json

Setup with Continuous Integration (CI)

If you are using the Continuous Integration (CI) pipeline for your application and want to integrate SmartUI CLI execution then the following are the steps needs to be added to your .yaml file:

steps:
  - name: Running SmartUI CLI Tests
    - run: |
       npm install -g @lambdatest/smartui-cli
       smartui capture urls.json --config smartui-web.json

SmartUI CLI Options and Keys

The following are supported CLI (Command Line Interface) options for Visual Regression Testing with SmartUI:

CLI Flag Key Description Usage
--config This is the reference configuration file containing the SmartUI Cloud Configuration Optional
--help This will print all help information for the SmartUI CLI options Optional

View SmartUI Results

You can see the Smart UI dashboard to view the results. This will help you identify the mis-matches from the existing Baseline build and do the required visual testing.

<img loading="lazy" src={require('../assets/images/smart-visual-testing/smartui_ss_cli.png').default} alt="cmd" width="768" height="373" className="doc_img"/>

For additional information about SmartUI APIs please explore the documentation here