Skip to content

Commit bdb4f07

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request #1076 from Ishavyas9/main
SmartUI CLI Fetch Results documentation
2 parents edc3250 + 622ef69 commit bdb4f07

File tree

4 files changed

+297
-6
lines changed

4 files changed

+297
-6
lines changed

‎docs/smartui-cli-upload.md‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,10 @@ Please read the following table for more information about the options available
128128
| Config Key Shortcut | Configuration Key     | Description| Usage     |
129129
| ---------------------| ---------------------------------------------------------------------------|--------------| -------------------- |
130130
| -R | --ignoreResolutions | Ignores resolutions to compare only based on screenshot names | `npx smartui upload <directoryName> -R` |
131-
| -F | --files extensions | Comma-separated list of allowed file extensions| `npx smartui upload <directoryName> -F jpg,png`|
131+
| -F | --files `extensions` | Comma-separated list of allowed file extensions| `npx smartui upload <directoryName> -F jpg,png`|
132132
| -E | --removeExtensions | Strips file extensions from snapshot names| `npx smartui upload <directoryName> -E` |
133-
| -i | --ignoreDir patterns | Comma-separated list of directories to ignore | `npx smartui upload <directoryName> -i` |
134-
133+
| -i | --ignoreDir `patterns` | Comma-separated list of directories to ignore | `npx smartui upload <directoryName> -i dir1/dir2,dir3` |
134+
| | --fetch-results | Live fetched comparison results in a json file | `npx smartui upload <directoryName> --fetch-results`|
135135

136136
:::note
137137
You may use the `smartui upload --help` command in case you are facing issues during the execution of SmartUI Upload options in the CLI.
@@ -164,6 +164,25 @@ The following are supported `CLI (Command Line Interface)` options for Visual Re
164164

165165
You can see the Smart UI dashboard to view the results. This will help you identify the Mismatches from the existing `Baseline` build and do the required visual testing.
166166

167+
168+
### Fetch results
169+
170+
You can fetch build results by adding the `--fetch-results` flag to your test execution command. Here are different ways to use this feature:
171+
172+
#### Default Usage
173+
If no filename is specified, results will be stored in `results.json`:
174+
175+
```bash
176+
npx smartui upload <directoryName> --fetch-results
177+
```
178+
179+
#### Custom Filename
180+
Specify a custom filename for your results:
181+
182+
```bash
183+
npx smartui upload <directoryName> --fetch-results custom-results.json
184+
```
185+
167186
<img loading="lazy" src={require('../assets/images/smart-visual-testing/smartui-sdk-results-primer.webp').default} alt="cmd" width="768" height="373" className="doc_img"/>
168187

169188
For additional information about SmartUI APIs please explore the documentation [here](https://www.lambdatest.com/support/api-doc/)

‎docs/smartui-cli.md‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ The first step is to create a project with the application in which we will comb
7878
Install required NPM modules for `LambdaTest Smart UI CLI` in your **Frontend** project.
7979

8080
```bash
81-
npm install -g @lambdatest/smartui-cli
81+
npm install @lambdatest/smartui-cli
8282
```
8383

8484
### **Step 2:** Create URL file
@@ -137,7 +137,7 @@ set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
137137
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:
138138

139139
```bash
140-
smartui config:create .smartui.json
140+
npx smartui config:create .smartui.json
141141
```
142142

143143
Once, the configuration file will be created, you will be seeing the default configuration pre-filled in the configuration file:
@@ -217,7 +217,26 @@ Please read the following table for more information about the configuration fil
217217
You can now execute tests for `Visual Regression Testing` using the following options:.
218218

219219
```bash
220-
smartui capture urls.json --config .smartui.json
220+
npx smartui capture urls.json --config .smartui.json
221+
```
222+
223+
224+
### Fetch results
225+
226+
You can fetch build results by adding the `--fetch-results` flag to your test execution command. Here are different ways to use this feature:
227+
228+
#### Default Usage
229+
If no filename is specified, results will be stored in `results.json`:
230+
231+
```bash
232+
npx smartui capture urls.json --config .smartui.json --fetch-results
233+
```
234+
235+
#### Custom Filename
236+
Specify a custom filename for your results:
237+
238+
```bash
239+
npx smartui capture urls.json --config .smartui.json --fetch-results custom-results.json
221240
```
222241
### Setup with Continuous Integration (CI)
223242

‎docs/smartui-sdk-fetch-results.md‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
---
2+
id: smartui-sdk-fetch-results
3+
title: Fetching Results through SmartUI SDK
4+
sidebar_label: Fetch Results
5+
description: In this documentation, learn how to fetch live results for SmartUI tests
6+
keywords:
7+
- Visual Regression
8+
- Visual Regression Testing Guide
9+
- Visual Regression Test Automation
10+
- Visual Regression Automation Testing
11+
- Running Visual Regression Tests
12+
- Visual Regression Testing Online
13+
- Run Visual Regression
14+
- Visual Regression Run Specific Test
15+
- Visual Regression Testing Environment
16+
- How to Run Visual Regression Tests
17+
18+
url: https://www.lambdatest.com/support/docs/smartui-cli/
19+
slug: smartui-sdk-fetch-results/
20+
---
21+
22+
import Tabs from '@theme/Tabs';
23+
import TabItem from '@theme/TabItem';
24+
import NewTag from '../src/component/newTag';
25+
26+
---
27+
28+
<script type="application/ld+json"
29+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
30+
"@context": "https://schema.org",
31+
"@type": "BreadcrumbList",
32+
"itemListElement": [{
33+
"@type": "ListItem",
34+
"position": 1,
35+
"name": "LambdaTest",
36+
"item": "https://www.lambdatest.com"
37+
},{
38+
"@type": "ListItem",
39+
"position": 2,
40+
"name": "Support",
41+
"item": "https://www.lambdatest.com/support/docs/"
42+
},{
43+
"@type": "ListItem",
44+
"position": 3,
45+
"name": "Smart Visual Testing",
46+
"item": "https://www.lambdatest.com/support/docs/smart-ui-cypress/"
47+
}]
48+
})
49+
}}
50+
></script>
51+
52+
SmartUI CLI allows you to fetch detailed build results after executing your visual tests. This feature enables you to access comprehensive information about your build and screenshots in a JSON file, making it easier to integrate with your CI/CD pipelines and automation workflows.
53+
54+
55+
## Prerequisites
56+
57+
- Basic understanding of Command Line Interface
58+
- Login to [LambdaTest SmartUI](https://smartui.lambdatest.com/) with your credentials.
59+
- Ensure you are using `@lambdatest/smartui-cli` version 4.0.8 or higher.
60+
- A properly configured SmartUI CLI project
61+
62+
## Steps to Use
63+
64+
### *Step 1:* Install SmartUI CLI
65+
66+
If you haven't already installed SmartUI CLI, install it using npm:
67+
68+
```bash
69+
npm i @lambdatest/smartui-cli
70+
```
71+
72+
### **Step 2:** Configure your Project Token
73+
74+
Setup your project token show in the **SmartUI** app after, creating your project.
75+
76+
<Tabs className="docs__val" groupId="language">
77+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
78+
79+
```bash
80+
export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
81+
```
82+
83+
</TabItem>
84+
<TabItem value="Windows" label="Windows - CMD">
85+
86+
```bash
87+
set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
88+
```
89+
90+
</TabItem>
91+
<TabItem value="Powershell" label="Windows-PS">
92+
93+
```bash
94+
$Env:PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
95+
```
96+
</TabItem>
97+
</Tabs>
98+
99+
### **Step 3:** Execute Tests with Results Fetching
100+
101+
You can fetch build results by adding the `--fetch-results` flag to your test execution command. Here are different ways to use this feature:
102+
103+
#### Default Usage
104+
If no filename is specified, results will be stored in `results.json`:
105+
106+
```bash
107+
npx smartui --config .smartui.json exec --fetch-results -- <execution-command>
108+
```
109+
>**Example:**
110+
For a `Node.js` test script :
111+
>```bash
112+
>npx smartui --config .smartui.json exec --fetch-results -- node test.js
113+
>```
114+
115+
#### Custom Filename
116+
Specify a custom filename for your results:
117+
118+
```bash
119+
npx smartui --config .smartui.json exec --fetch-results custom-results.json -- node test.js
120+
```
121+
122+
### **Step 4:** Understanding the Results
123+
124+
The fetched results JSON file contains detailed information about your build and screenshots. Here's what you'll find in the results file:
125+
126+
```json
127+
{
128+
"screenshots": {
129+
"Screenshot-1": [
130+
{
131+
"screenshot_name": "Screenshot-1",
132+
"captured_image": "image_url",
133+
"baseline_image": "image_url",
134+
"compared_image": "image_url",
135+
"browser_name": "edge",
136+
"viewport": "1920",
137+
"mismatch_percentage": 3.3,
138+
"status": "Changes found"
139+
},
140+
{
141+
"screenshot_name": "Screenshot-1",
142+
"captured_image": "image_url",
143+
"baseline_image": "image_url",
144+
"compared_image": "image_url",
145+
"browser_name": "firefox",
146+
"viewport": "1366",
147+
"mismatch_percentage": 4.74,
148+
"status": "Changes found"
149+
},
150+
{
151+
"screenshot_name": "Screenshot-1",
152+
"captured_image": "image_url",
153+
"baseline_image": "image_url",
154+
"compared_image": "image_url",
155+
"browser_name": "chrome",
156+
"viewport": "1366",
157+
"mismatch_percentage": 4.64,
158+
"status": "Changes found"
159+
},
160+
{
161+
"screenshot_name": "Screenshot-1",
162+
"captured_image": "image_url",
163+
"baseline_image": "image_url",
164+
"compared_image": "image_url",
165+
"browser_name": "chrome",
166+
"viewport": "1920",
167+
"mismatch_percentage": 3.3,
168+
"status": "Changes found"
169+
},
170+
],
171+
"Screenshot-2": [
172+
{
173+
"screenshot_name": "Screenshot-2",
174+
"captured_image": "image_url",
175+
"baseline_image": "image_url",
176+
"compared_image": "image_url",
177+
"browser_name": "edge",
178+
"viewport": "1920",
179+
"mismatch_percentage": 0.0,
180+
"status": "Approved"
181+
},
182+
{
183+
"screenshot_name": "Screenshot-2",
184+
"captured_image": "image_url",
185+
"baseline_image": "image_url",
186+
"compared_image": "image_url",
187+
"browser_name": "firefox",
188+
"viewport": "1366",
189+
"mismatch_percentage": 4.74,
190+
"status": "Changes found"
191+
},
192+
{
193+
"screenshot_name": "Screenshot-2",
194+
"captured_image": "image_url",
195+
"baseline_image": "image_url",
196+
"compared_image": "image_url",
197+
"browser_name": "chrome",
198+
"viewport": "1366",
199+
"mismatch_percentage": 4.64,
200+
"status": "Changes found"
201+
},
202+
{
203+
"screenshot_name": "Screenshot-2",
204+
"captured_image": "image_url",
205+
"baseline_image": "image_url",
206+
"compared_image": "image_url",
207+
"browser_name": "chrome",
208+
"viewport": "1920",
209+
"mismatch_percentage": 3.3,
210+
"status": "Changes found"
211+
},
212+
]
213+
},
214+
"build": {
215+
"build_id": "b420b7a9-77c6-****-****",
216+
"baseline": false,
217+
"build_type": "smartui-cli",
218+
"build_status_ind": "completed",
219+
"build_status": "pending-approval",
220+
"commitId": "2b93***",
221+
"branch": "main",
222+
"commitAuthor": "John Doe",
223+
"commitMessage": "Merge pull request from xyz/main"
224+
},
225+
"project": {
226+
"project_id": "1dfb7712-7f20-446f-***-***",
227+
"name": "Project-Name",
228+
"username": "johndoe",
229+
"project_type": "smartui-cli",
230+
"projectCategory": "web",
231+
"platform": "cli"
232+
}
233+
}
234+
```
235+
236+
<nav aria-label="breadcrumbs">
237+
<ul className="breadcrumbs">
238+
<li className="breadcrumbs__item">
239+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
240+
Home
241+
</a>
242+
</li>
243+
<li className="breadcrumbs__item">
244+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
245+
Support
246+
</a>
247+
</li>
248+
<li className="breadcrumbs__item breadcrumbs__item--active">
249+
<span className="breadcrumbs__link"> Smart UI with Cypress </span>
250+
</li>
251+
</ul>
252+
</nav>

‎sidebars.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2759,6 +2759,7 @@ module.exports = {
27592759
"smartui-cli-git-branching-strategy",
27602760
"smartui-cli-env-variables",
27612761
"smartui-cli-responsive-dom",
2762+
"smartui-sdk-fetch-results",
27622763
],
27632764
},
27642765
{

0 commit comments

Comments
 (0)