Skip to content

Commit faf5291

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request LambdaTest#1226 from JeeveshJ7/stage
Figma Web Doc
2 parents 55ae631 + 6cd03ad commit faf5291

File tree

2 files changed

+324
-1
lines changed

2 files changed

+324
-1
lines changed

‎docs/smartui-cli-figma-web.md‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
---
2+
id: smartui-cli-figma-web
3+
title: Getting started with LambdaTest's Smart UI Figma-Web CLI
4+
sidebar_label: Figma-Web CLI
5+
description: In this documentation, learn how to compare your figma designs to live production websites and web applications.
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-cli-figma-web/
20+
---
21+
22+
import Tabs from '@theme/Tabs';
23+
import TabItem from '@theme/TabItem';
24+
import NewTag from '../src/component/newTag';
25+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY}
26+
from "@site/src/component/keys";
27+
import CodeBlock from '@theme/CodeBlock';
28+
29+
---
30+
31+
<script type="application/ld+json"
32+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
33+
"@context": "https://schema.org",
34+
"@type": "BreadcrumbList",
35+
"itemListElement": [{
36+
"@type": "ListItem",
37+
"position": 1,
38+
"name": "LambdaTest",
39+
"item": "https://www.lambdatest.com"
40+
},{
41+
"@type": "ListItem",
42+
"position": 2,
43+
"name": "Support",
44+
"item": "https://www.lambdatest.com/support/docs/"
45+
},{
46+
"@type": "ListItem",
47+
"position": 3,
48+
"name": "Smart Visual Testing",
49+
"item": "https://www.lambdatest.com/support/docs/smart-ui-cypress/"
50+
}]
51+
})
52+
}}
53+
></script>
54+
55+
Welcome to the LambdaTest SmartUI Figma Web CLI documentation!
56+
57+
With SmartUI Figma-Web CLI, you can seamlessly perform visual regression testing of your Figma designs on SmartUI using your command line, identifying discrepancies between your designs and live websites. This guide will walk you through the process of running successful Figma-Web Visual tests using SmartUI CLI.
58+
59+
## Prerequisites for running SmartUI Figma CLI
60+
61+
- Basic understanding of Command Line Interface is required.
62+
- Basic understanding of Figma file structuring is required.
63+
- Login to [LambdaTest SmartUI](https://smartui.lambdatest.com/) with your credentials.
64+
- Ensure you are using `@lambdatest/smartui-cli` version 4.0.16 or higher.
65+
66+
The following steps will guide you in running your visual tests for Figma files on LambdaTest platform using SmartUI CLI.
67+
68+
## Create a SmartUI CLI Project
69+
70+
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:
71+
72+
1. Go to [Projects page](https://smartui.lambdatest.com/)
73+
2. Click on the `new project` button
74+
3. Select the platform as <b>CLI</b> for executing your `CLI` tests.
75+
4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
76+
5. Click on the **Submit**.
77+
78+
## Steps to run your first test
79+
80+
81+
### **Step 1**: Install the Dependencies
82+
83+
Install required NPM modules for `LambdaTest Smart UI CLI` in your repository/folder.
84+
85+
```bash
86+
npm install @lambdatest/smartui-cli
87+
```
88+
89+
### **Step 2:** Create the design configuration file
90+
91+
```
92+
smartui config:create-figma-web designs.json
93+
```
94+
Once, the `designs` file will be created, you will be seeing the sample pre-filled configuration in the `designs.json` file:
95+
96+
```json title="/smartui-cli-figma-project/designs.json"
97+
{
98+
"web": {
99+
"browsers": [
100+
"chrome",
101+
"firefox",
102+
"safari",
103+
"edge"
104+
]
105+
},
106+
"figma": {
107+
"depth": 2, //Figma Tree depth - (Optional), change the value according to the your file structure
108+
"configs": [
109+
{
110+
"figma_file_token": "<token>",
111+
"figma_ids": [
112+
"id-1",
113+
"id-2"
114+
],
115+
"screenshot_names": [
116+
"homepage",
117+
"about"
118+
]
119+
},
120+
{
121+
"figma_file_token": "<token>",
122+
"figma_ids": [
123+
"id-3",
124+
"id-4"
125+
],
126+
"screenshot_names": [
127+
"xyz",
128+
"abc"
129+
]
130+
}
131+
]
132+
}
133+
}
134+
```
135+
>Note: Unlike vanilla Figma CLI, designs.json includes browser parameters and auto-fetches viewports of Figma frames for efficient comparison.
136+
137+
### **Step 3:** Configure your Project Token and Figma Token
138+
139+
1. Setup your project token show in the **SmartUI** app after, creating your project.
140+
141+
<Tabs className="docs__val" groupId="language">
142+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
143+
144+
```bash
145+
export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
146+
```
147+
148+
</TabItem>
149+
<TabItem value="Windows" label="Windows - CMD" default>
150+
151+
```bash
152+
set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
153+
```
154+
155+
</TabItem>
156+
</Tabs>
157+
158+
2. Setup your [personal access token for Figma](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to authenticate Figma with SmartUI.
159+
160+
<Tabs className="docs__val" groupId="language">
161+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
162+
163+
```bash
164+
export FIGMA_TOKEN="123456#1234abcd-****-****-****-************"
165+
```
166+
167+
</TabItem>
168+
<TabItem value="Windows" label="Windows - CMD" default>
169+
170+
```bash
171+
set FIGMA_TOKEN="123456#1234abcd-****-****-****-************"
172+
```
173+
174+
</TabItem>
175+
</Tabs>
176+
177+
### **Step 4:** Configure your LambdaTest Credentials
178+
179+
<Tabs className="docs__val" groupId="language">
180+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
181+
182+
```bash
183+
export LT_USERNAME="YOUR_USERNAME"
184+
export LT_ACCESS_KEY="YOUR ACCESS KEY"
185+
```
186+
187+
</TabItem>
188+
<TabItem value="Windows" label="Windows" default>
189+
190+
```bash
191+
set LT_USERNAME="YOUR_USERNAME"
192+
set LT_ACCESS_KEY="YOUR ACCESS KEY"
193+
```
194+
195+
</TabItem>
196+
</Tabs>
197+
198+
<img loading="lazy" src={require('../assets/images/smart-visual-testing/project-token-primer.webp').default} alt="cmd" width="768" height="373" className="doc_img"/>
199+
200+
201+
#### SmartUI CLI Design Config Options
202+
203+
Please read the following table for more information about the configuration file:
204+
205+
| Config Key | Description | Usage |
206+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------- |
207+
| figma_file_token | File token for your required Figma file. You can use multiple figma files in the same configuration.| Mandatory |
208+
| figma_ids | Comma separated list of nodes that you care about in the document. If specified, only a subset of the document will be returned corresponding to the nodes listed, their children, and everything between the root node and the listed nodes. | Optional |
209+
| depth (int) | Positive integer (>1) representing how deep into the document tree to traverse. For example, setting it to 2 returns Pages and all top level objects on each page. Not setting this parameter returns all nodes | Optional |
210+
211+
212+
### **Step 5:** Uploading the Figma files on SmartUI Cloud using CLI
213+
214+
You can now execute tests for `Visual Testing for Figma objects` using the following options:.
215+
216+
```bash
217+
npx smartui upload-figma-web designs.json
218+
```
219+
220+
### Working example with actual web comparisons
221+
222+
1. Please clone the following sample Github repo (`https://github.com/LambdaTest/puppeteer-sample`).
223+
224+
```bash
225+
git clone https://github.com/LambdaTest/smartui-figma-web-cli-sample
226+
```
227+
2. Install the node modules using the command:
228+
229+
```bash
230+
npm i
231+
```
232+
3. Configure your project token and Figma token
233+
234+
- Setup your project token show in the **SmartUI** app after, creating your project.
235+
236+
<Tabs className="docs__val" groupId="language">
237+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
238+
239+
```bash
240+
export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
241+
```
242+
243+
</TabItem>
244+
<TabItem value="Windows" label="Windows - CMD" default>
245+
246+
```bash
247+
set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"
248+
```
249+
250+
</TabItem>
251+
</Tabs>
252+
253+
- Setup your [personal access token for Figma](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to authenticate Figma with SmartUI.
254+
255+
<Tabs className="docs__val" groupId="language">
256+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
257+
258+
```bash
259+
export FIGMA_TOKEN="123456#1234abcd-****-****-****-************"
260+
```
261+
262+
</TabItem>
263+
<TabItem value="Windows" label="Windows - CMD" default>
264+
265+
```bash
266+
set FIGMA_TOKEN="123456#1234abcd-****-****-****-************"
267+
```
268+
269+
</TabItem>
270+
</Tabs>
271+
272+
4. Create your figma baseline
273+
```bash
274+
npx smartui upload-figma-web designs.json --buildName=FigmaBaseline2
275+
```
276+
5. Execute your functional test script (Selenium Nodejs in this sample)
277+
```
278+
npx smartui --config web-config.json exec --buildName=web-build -- node figma-web-local.js
279+
```
280+
281+
>**Points to Consider**
282+
> - The browsers listed in the Figma configuration are used solely to enable comparisons between your designs and their corresponding live webpages.
283+
> - Websites may exhibit browser-specific behaviors. To account for these variations, it is recommended to create distinct designs tailored for each browser, if necessary.
284+
285+
### View SmartUI Results
286+
287+
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.
288+
289+
<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"/>
290+
291+
<nav aria-label="breadcrumbs">
292+
<ul className="breadcrumbs">
293+
<li className="breadcrumbs__item">
294+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
295+
Home
296+
</a>
297+
</li>
298+
<li className="breadcrumbs__item">
299+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
300+
Support
301+
</a>
302+
</li>
303+
<li className="breadcrumbs__item breadcrumbs__item--active">
304+
<span className="breadcrumbs__link"> Smart UI with Cypress </span>
305+
</li>
306+
</ul>
307+
</nav>

‎sidebars.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2796,7 +2796,23 @@ module.exports = {
27962796
],
27972797
},
27982798
"smartui-cli",
2799-
"smartui-cli-figma",
2799+
{
2800+
type: "category",
2801+
collapsed: true,
2802+
label: "Bring your Own Screenshots",
2803+
items: [
2804+
{
2805+
type: "doc",
2806+
label: "Figma-Web",
2807+
id: "smartui-cli-figma-web",
2808+
},
2809+
{
2810+
type: "doc",
2811+
label: "Figma-Figma",
2812+
id: "smartui-cli-figma",
2813+
},
2814+
],
2815+
},
28002816
{
28012817
type: "category",
28022818
collapsed: true,

0 commit comments

Comments
 (0)