LambdaTest · Ishavyas9 · Oct 28, 2024 · Oct 25, 2024
diff --git a/docs/smartui-cli-env-variables.md b/docs/smartui-cli-env-variables.md
@@ -0,0 +1,192 @@
+---
+id: smartui-cli-env-variables
+title: SmartUI SDK Environment Variables
+sidebar_label: Set Environment Variables
+description: In this documentation, learn about the various environment variables available in SmartUI
+keywords:
+  - 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
+
+url: https://www.lambdatest.com/support/docs/smartui-cli-env-variables/
+slug: smartui-cli-env-variables/
+---
+
+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 world of simplified visual testing with the SmartUI SDK.
+
+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:
+
+
+
+## 1. Setting the Baseline Branch
+
+Set the baseline branch for `CLI` projects:
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export BASELINE_BRANCH="Required branch"
+```
+</TabItem>
+<TabItem value="Windows" label="Windows" default>
+
+```bash
+set BASELINE_BRANCH="Required branch"
+```
+</TabItem>
+</Tabs>
+
+## 2. Setting the current branch
+
+Set the current branch for `CLI` projects:
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export CURRENT_BRANCH="Required branch"
+```
+</TabItem>
+<TabItem value="Windows" label="Windows" default>
+
+```bash
+set CURRENT_BRANCH="Required branch"
+```
+</TabItem>
+</Tabs>
+
+## 3. Setting proxies
+
+In case you are accessing your network using corporate proxies, set the proxies in the environment variables as follows
+
+#### HTTP_PROXY:
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export HTTP_PROXY="Required branch"
+```
+</TabItem>
+<TabItem value="Windows" label="Windows" default>
+
+```bash
+set HTTP_PROXY="Required branch"
+```
+</TabItem>
+
+</Tabs>
+
+
+#### HTTPS_PROXY:
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export HTTPS_PROXY="Required branch"
+```
+</TabItem>
+<TabItem value="Windows" label="Windows" default>
+
+```bash
+set HTTPS_PROXY="Required branch"
+```
+</TabItem>
+</Tabs>
+
+> **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].
+
+## 4. Enabling Debug mode
+
+To enable SmartUI CLI Debug mode, use the following environment variable.
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export LT_SDK_DEBUG=true
+```
+</TabItem>
+<TabItem value="Windows" label="Windows" default>
+
+```bash
+set LT_SDK_DEBUG=true
+```
+</TabItem>
+</Tabs>
+
+## 5. Ignoring captured cookies
+
+Set the following variable to true, to stop the use of cookies captured automatically. The default is set to `false`.
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export SMARTUI_DO_NOT_USE_CAPTURED_COOKIES=true
+```
+</TabItem>
+<TabItem value="Windows" label="Windows" default>
+
+```bash
+set SMARTUI_DO_NOT_USE_CAPTURED_COOKIES=true
+```
+</TabItem>
+</Tabs>
+
+<nav aria-label="breadcrumbs">
+  <ul className="breadcrumbs">
+    <li className="breadcrumbs__item">
+      <a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
+        Home
+      </a>
+    </li>
+    <li className="breadcrumbs__item">
+      <a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
+        Support
+      </a>
+    </li>
+    <li className="breadcrumbs__item breadcrumbs__item--active">
+      <span className="breadcrumbs__link"> Smart UI with Cypress  </span>
+    </li>
+  </ul>
+</nav>
diff --git a/docs/smartui-cli-responsive-dom.md b/docs/smartui-cli-responsive-dom.md
@@ -0,0 +1,151 @@
+---
+id: smartui-cli-responsive-dom
+title: SmartUI SDK Advanced Configuration Options
+sidebar_label: Capture Responsive DOM
+description: In this documentation, learn how to capture responsive DOM by capturing multiple screenshots of the same DOM
+keywords:
+  - 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
+
+url: https://www.lambdatest.com/support/docs/smartui-cli-responsive-dom/
+slug: smartui-cli-responsive-dom/
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import NewTag from '../src/component/newTag';
+
+---
+
+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/).
+
+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.
+
+## Prerequisites 
+
+1. **SmartUI CLI Version:** Ensure you are using `@lambdatest/smartui-cli` version 4.0.7 or higher.
+2. **SDK Installation:** Install the **SDK** with the specified compatible version.
+3. **Recommended Frameworks:** For optimal performance, use either Playwright or Selenium frameworks.
+
+## Steps to Use
+
+### Step-1
+Specify `delayedUpload` to true in your configuration file.
+
+```json
+"delayedUpload" : true
+```
+
+
+### Step-2
+
+Resize your viewport according to your framework and take the screenshot. For example in **Selenium NodeJs**, you can do it as follows:  
+
+```js
+
+        let options =
+        {
+            "web": {
+                "browsers": [
+                    "chrome",
+                    "firefox",
+                    "safari"
+                ],
+                "viewports": [[768]], //required resized dom viewport
+            },
+            ignoreDOM: {
+                class: ["required-class"],
+              }
+        };
+  await driver.manage().window().setSize(768, 1024);
+  await smartuiSnapshot(driver, 'Screenshot Name', options);
+
+
+  let mobileOptions=
+        {
+            "mobile": {
+                "devices": [
+                    "iPhone 14",
+                    "Galaxy S23"
+                ],
+                "fullPage": true,
+                "orientation": "portrait"
+            },
+            ignoreDOM: {
+                class: ["nextAvailDate"],
+              }
+        };
+    await driver.manage().window().setSize(360, 1024);
+    await smartuiSnapshot(driver, 'Screenshot Name', mobileOptions);
+```
+
+>Note :: Any existing screenshots with same screenshot name,browser and resolution will get over-written.
+
+
+## Things to keep in mind: 
+
+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.
+2. **Firefox Limitation:** Firefox can only capture snapshots at DOM widths of `450px` or larger due to resizing limitations.
+3. **Chrome Resizing in Selenium:** In Selenium, Chrome’s viewport cannot be resized below `500px` due to a limitation in Selenium.
+
+<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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<nav aria-label="breadcrumbs">
+  <ul className="breadcrumbs">
+    <li className="breadcrumbs__item">
+      <a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
+        Home
+      </a>
+    </li>
+    <li className="breadcrumbs__item">
+      <a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
+        Support
+      </a>
+    </li>
+    <li className="breadcrumbs__item breadcrumbs__item--active">
+      <span className="breadcrumbs__link"> Smart UI with Cypress  </span>
+    </li>
+  </ul>
+</nav>
diff --git a/sidebars.js b/sidebars.js
@@ -2744,6 +2744,8 @@ module.exports = {
           "smartui-wdio-sdk",
           "smartui-sdk-config-options",
           "smartui-cli-git-branching-strategy",
+          "smartui-cli-env-variables",
+          "smartui-cli-responsive-dom",
         ],
       },
       {