Skip to content

Commit dad36b3

Browse files
JeeveshJ7Ishavyas9
JeeveshJ7
authored and
Ishavyas9
committed
added env variable and responsive dom documentaton
1 parent ca8d250 commit dad36b3

File tree

3 files changed

+345
-0
lines changed

3 files changed

+345
-0
lines changed

‎docs/smartui-cli-env-variables.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
id: smartui-cli-env-variables
3+
title: SmartUI SDK Environment Variables
4+
sidebar_label: Set Environment Variables
5+
description: In this documentation, learn about the various environment variables available in SmartUI
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-env-variables/
19+
slug: smartui-cli-env-variables/
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+
Welcome to the world of simplified visual testing with the SmartUI SDK.
53+
54+
This guide is designed to provide you with comprehensive information about the various environment variables options available within the SmartUI SDK. SmartUI retrieves additional details from the environment it is running in, like the branch name, baseline branch,proxies etc. You can modify certain aspects of SmartUI behavior by configuring these environment variables within your CI environment:
55+
56+
57+
58+
## 1. Setting the Baseline Branch
59+
60+
Set the baseline branch for `CLI` projects:
61+
62+
<Tabs className="docs__val" groupId="language">
63+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
64+
65+
```bash
66+
export BASELINE_BRANCH="Required branch"
67+
```
68+
</TabItem>
69+
<TabItem value="Windows" label="Windows" default>
70+
71+
```bash
72+
set BASELINE_BRANCH="Required branch"
73+
```
74+
</TabItem>
75+
</Tabs>
76+
77+
## 2. Setting the current branch
78+
79+
Set the current branch for `CLI` projects:
80+
81+
<Tabs className="docs__val" groupId="language">
82+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
83+
84+
```bash
85+
export CURRENT_BRANCH="Required branch"
86+
```
87+
</TabItem>
88+
<TabItem value="Windows" label="Windows" default>
89+
90+
```bash
91+
set CURRENT_BRANCH="Required branch"
92+
```
93+
</TabItem>
94+
</Tabs>
95+
96+
## 3. Setting proxies
97+
98+
In case you are accessing your network using corporate proxies, set the proxies in the environment variables as follows
99+
100+
#### HTTP_PROXY:
101+
102+
<Tabs className="docs__val" groupId="language">
103+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
104+
105+
```bash
106+
export HTTP_PROXY="Required branch"
107+
```
108+
</TabItem>
109+
<TabItem value="Windows" label="Windows" default>
110+
111+
```bash
112+
set HTTP_PROXY="Required branch"
113+
```
114+
</TabItem>
115+
116+
</Tabs>
117+
118+
119+
#### HTTPS_PROXY:
120+
121+
<Tabs className="docs__val" groupId="language">
122+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
123+
124+
```bash
125+
export HTTPS_PROXY="Required branch"
126+
```
127+
</TabItem>
128+
<TabItem value="Windows" label="Windows" default>
129+
130+
```bash
131+
set HTTPS_PROXY="Required branch"
132+
```
133+
</TabItem>
134+
</Tabs>
135+
136+
> **NOTE :** In most cases setting only HTTP_PROXY should be enough, but if you have different proxies for HTTP and HTTPS, you can set both.The format for proxy’s is `http[s]://<username>:<password>@<domain.com>:<port>/` [username and password is optional].
137+
138+
## 4. Enabling Debug mode
139+
140+
To enable SmartUI CLI Debug mode, use the following environment variable.
141+
142+
<Tabs className="docs__val" groupId="language">
143+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
144+
145+
```bash
146+
export LT_SDK_DEBUG=true
147+
```
148+
</TabItem>
149+
<TabItem value="Windows" label="Windows" default>
150+
151+
```bash
152+
set LT_SDK_DEBUG=true
153+
```
154+
</TabItem>
155+
</Tabs>
156+
157+
## 5. Ignoring captured cookies
158+
159+
Set the following variable to true, to stop the use of cookies captured automatically. The default is set to `false`.
160+
161+
<Tabs className="docs__val" groupId="language">
162+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
163+
164+
```bash
165+
export SMARTUI_DO_NOT_USE_CAPTURED_COOKIES=true
166+
```
167+
</TabItem>
168+
<TabItem value="Windows" label="Windows" default>
169+
170+
```bash
171+
set SMARTUI_DO_NOT_USE_CAPTURED_COOKIES=true
172+
```
173+
</TabItem>
174+
</Tabs>
175+
176+
<nav aria-label="breadcrumbs">
177+
<ul className="breadcrumbs">
178+
<li className="breadcrumbs__item">
179+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
180+
Home
181+
</a>
182+
</li>
183+
<li className="breadcrumbs__item">
184+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
185+
Support
186+
</a>
187+
</li>
188+
<li className="breadcrumbs__item breadcrumbs__item--active">
189+
<span className="breadcrumbs__link"> Smart UI with Cypress </span>
190+
</li>
191+
</ul>
192+
</nav>

‎docs/smartui-cli-responsive-dom.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
---
2+
id: smartui-cli-responsive-dom
3+
title: SmartUI SDK Advanced Configuration Options
4+
sidebar_label: Capture Responsive DOM
5+
description: In this documentation, learn how to capture responsive DOM by capturing multiple screenshots of the same DOM
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-responsive-dom/
19+
slug: smartui-cli-responsive-dom/
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+
If your application dynamically changes the DOM based on viewport size or specific breakpoints, SmartUI SDKs can be configured to adapt accordingly. When using the SmartUI CLI, the SDK captures the DOM state at the specified viewport size within the test browser, then renders it across the browsers and resolutions defined in your [configuration file](https://www.lambdatest.com/support/docs/smartui-sdk-config-options/).
29+
30+
Therefore, if your application adjusts DOM elements between different screen sizes, ensure that you resize the viewport of your test browser and capture a snapshot at each required width.
31+
32+
## Prerequisites
33+
34+
1. **SmartUI CLI Version:** Ensure you are using `@lambdatest/smartui-cli` version 4.0.7 or higher.
35+
2. **SDK Installation:** Install the **SDK** with the specified compatible version.
36+
3. **Recommended Frameworks:** For optimal performance, use either Playwright or Selenium frameworks.
37+
38+
## Steps to Use
39+
40+
### Step-1
41+
Specify `delayedUpload` to true in your configuration file.
42+
43+
```json
44+
"delayedUpload" : true
45+
```
46+
47+
48+
### Step-2
49+
50+
Resize your viewport according to your framework and take the screenshot. For example in **Selenium NodeJs**, you can do it as follows:
51+
52+
```js
53+
54+
let options =
55+
{
56+
"web": {
57+
"browsers": [
58+
"chrome",
59+
"firefox",
60+
"safari"
61+
],
62+
"viewports": [[768]], //required resized dom viewport
63+
},
64+
ignoreDOM: {
65+
class: ["required-class"],
66+
}
67+
};
68+
await driver.manage().window().setSize(768, 1024);
69+
await smartuiSnapshot(driver, 'Screenshot Name', options);
70+
71+
72+
let mobileOptions=
73+
{
74+
"mobile": {
75+
"devices": [
76+
"iPhone 14",
77+
"Galaxy S23"
78+
],
79+
"fullPage": true,
80+
"orientation": "portrait"
81+
},
82+
ignoreDOM: {
83+
class: ["nextAvailDate"],
84+
}
85+
};
86+
await driver.manage().window().setSize(360, 1024);
87+
await smartuiSnapshot(driver, 'Screenshot Name', mobileOptions);
88+
```
89+
90+
>Note :: Any existing screenshots with same screenshot name,browser and resolution will get over-written.
91+
92+
93+
## Things to keep in mind:
94+
95+
1. **Viewport and Browser Configuration:** You can set the viewport size or specify browsers for individual snapshots either globally in the configuration file or at the snapshot level based on your needs.
96+
2. **Firefox Limitation:** Firefox can only capture snapshots at DOM widths of `450px` or larger due to resizing limitations.
97+
3. **Chrome Resizing in Selenium:** In Selenium, Chrome’s viewport cannot be resized below `500px` due to a limitation in Selenium.
98+
99+
<script type="application/ld+json"
100+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
101+
"@context": "https://schema.org",
102+
"@type": "BreadcrumbList",
103+
"itemListElement": [{
104+
"@type": "ListItem",
105+
"position": 1,
106+
"name": "LambdaTest",
107+
"item": "https://www.lambdatest.com"
108+
},{
109+
"@type": "ListItem",
110+
"position": 2,
111+
"name": "Support",
112+
"item": "https://www.lambdatest.com/support/docs/"
113+
},{
114+
"@type": "ListItem",
115+
"position": 3,
116+
"name": "Smart Visual Testing",
117+
"item": "https://www.lambdatest.com/support/docs/smart-ui-cypress/"
118+
}]
119+
})
120+
}}
121+
></script>
122+
123+
124+
125+
126+
127+
128+
129+
130+
131+
132+
133+
134+
135+
<nav aria-label="breadcrumbs">
136+
<ul className="breadcrumbs">
137+
<li className="breadcrumbs__item">
138+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
139+
Home
140+
</a>
141+
</li>
142+
<li className="breadcrumbs__item">
143+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
144+
Support
145+
</a>
146+
</li>
147+
<li className="breadcrumbs__item breadcrumbs__item--active">
148+
<span className="breadcrumbs__link"> Smart UI with Cypress </span>
149+
</li>
150+
</ul>
151+
</nav>

‎sidebars.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2744,6 +2744,8 @@ module.exports = {
27442744
"smartui-wdio-sdk",
27452745
"smartui-sdk-config-options",
27462746
"smartui-cli-git-branching-strategy",
2747+
"smartui-cli-env-variables",
2748+
"smartui-cli-responsive-dom",
27472749
],
27482750
},
27492751
{

0 commit comments

Comments
 (0)