Tunnel and basic auth for SmartUI CLI

docs/smartui-basic-auth.md

@@ -0,0 +1,142 @@
+---
+id: smartui-cli-basic-auth
+title: Basic Authentication in SmartUI CLI
+sidebar_label: Capturing assets protected with authentication
+description: Learn how to capture screenshots of assets protected behind authentication using SmartUI CLI
+keywords:
+  - Visual Regression
+  - SmartUI SDK
+  - Basic Authentication
+  - Protected Assets
+  - Authentication Headers
+url: https://www.lambdatest.com/support/docs/smartui-basic-auth/
+slug: smartui-cli-basic-auth/
+---
+
+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>
+
+
+When capturing screenshots of applications or websites that are protected with authentication, you need to configure SmartUI to pass the necessary authentication headers. This ensures that SmartUI can access and properly render all assets on the page.
+
+## Why Basic Authentication is Needed
+
+Without proper authentication configuration:
+- Protected assets may fail to load
+- Screenshots might be incomplete or broken
+- CSS and other resources behind authentication may not be accessible
+
+## Configuration
+
+Add the following configuration to your `.smartui.json` file to enable basic authentication:
+
+```json
+{
+  "basicAuthorization": {
+    "username": "username",
+    "password": "password"
+  }
+}
+```
+
+### Configuration Parameters
+
+- **username**: Your authentication username
+- **password**: Your authentication password
+
+## Example Usage
+
+Here's a complete example of a SmartUI configuration file with basic authentication:
+
+```json
+{
+  "web": {
+    "browsers": ["chrome", "firefox"],
+    "viewports": [
+      [1920, 1080],
+      [1366, 768]
+    ]
+  },
+  "basicAuthorization": {
+    "username": "your-username",
+    "password": "your-password"
+  },
+  "waitForTimeout": 1000
+}
+```
+
+## Using Environment Variables
+
+For better security, you can use environment variables for your authentication credentials:
+
+```json
+{
+  "basicAuthorization": {
+    "username": "${AUTH_USERNAME}",
+    "password": "${AUTH_PASSWORD}"
+  }
+}
+```
+
+Then set your environment variables:
+
+<Tabs className="docs__val" groupId="language">
+<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
+
+```bash
+export AUTH_USERNAME="your-username"
+export AUTH_PASSWORD="your-password"
+```
+</TabItem>
+<TabItem value="Windows" label="Windows" default>
+
+```bash
+set AUTH_USERNAME="your-username"
+set AUTH_PASSWORD="your-password"
+```
+</TabItem>
+</Tabs>
+
+## Common Issues and Solutions
+
+1. **Assets Not Loading**
+   - Verify that the provided credentials have access to all required resources
+   - Check if any assets are served from different domains requiring separate authentication
+
+2. **Authentication Failures**
+   - Ensure credentials are correct and active
+   - Verify that the authentication endpoint is accessible from LambdaTest's infrastructure
+
+:::tip
+When using basic authentication:
+1. Test your credentials manually before running SmartUI tests
+2. Ensure all required assets are accessible with the provided credentials
+3. Use secure methods to manage your authentication credentials
+4. Consider implementing a test user specifically for visual testing
+::: 

docs/smartui-cli-env-variables.md

@@ -171,13 +171,13 @@ set HTTP_PROXY="http://<username>:<password>@<domain.com>:<port>/"
 <TabItem value="MacOS/Linux" label="MacOS/Linux" default>
 
 ```bash
-export HTTPS_PROXY="Required branch"
+export HTTPS_PROXY="https://<username>:<password>@<domain.com>:<port>/"
 ```
 </TabItem>
 <TabItem value="Windows" label="Windows" default>
 
 ```bash
-set HTTPS_PROXY="Required branch"
+set HTTPS_PROXY="https://<username>:<password>@<domain.com>:<port>/"
 ```
 </TabItem>
 </Tabs>

docs/smartui-sdk-tunnel.md

@@ -0,0 +1,89 @@
+---
+id: smartui-sdk-tunnel
+title: Using LambdaTest Tunnel with SmartUI SDKs
+sidebar_label: Tunnel Configuration
+description: Learn how to use LambdaTest Tunnel with SmartUI SDK for testing internal, development, and staging environments
+keywords:
+  - Visual Regression
+  - SmartUI SDK
+  - LambdaTest Tunnel
+  - Local Testing
+  - Internal Testing
+url: https://www.lambdatest.com/support/docs/smartui-sdk-tunnel/
+slug: smartui-sdk-tunnel/
+---
+
+# Using LambdaTest Tunnel with SmartUI SDK
+
+LambdaTest Tunnel allows you to test your internal, development, or staging environments securely using SmartUI SDK. This guide explains how to configure and use LambdaTest Tunnel with SmartUI SDK.
+
+:::warning Important
+Tunnel configuration is only supported with the `exec` mode of SmartUI SDK. It is not compatible with `capture`, `upload`, or `figma` commands. For more information about exec mode, refer to our [SmartUI CLI Exec documentation](/support/docs/smartui-cli-exec/).
+:::
+
+## Prerequisites
+
+1. The tunnel should be started by the same user who created the SmartUI project
+2. The tunnel must remain active throughout the entire SmartUI execution steps, from authentication to build completion
+
+## Configuration
+
+To enable tunnel testing with SmartUI SDK, add the following configuration to your `.smartui.json` file:
+
+```json
+{
+  "tunnel": true,
+  "tunnelName": "my-tunnel"
+}
+```
+
+### Configuration Parameters
+
+- **tunnel**: Set to `true` to enable tunnel testing
+- **tunnelName**: Specify the name of your tunnel instance (must match the name used when starting the tunnel)
+
+## Setting Up LambdaTest Tunnel
+
+1. Download and install LambdaTest Tunnel by following the instructions in our [Tunnel documentation](/support/docs/advanced-tunnel-features/)
+
+2. Start the tunnel with a specific name:
+```bash
+./LT --user {user-name} --key {access-key} --tunnelName my-tunnel
+```
+
+3. Wait for the "Tunnel is connected" message before running your SmartUI tests
+
+:::warning Important
+- Ensure the tunnel remains active throughout your testing session
+- The tunnel name in your configuration must match the `tunnelName` used when starting the tunnel
+- Only the user who created the SmartUI project can start and use the tunnel for testing
+:::
+
+## Example Usage
+
+Here's a complete example of a SmartUI configuration file using tunnel:
+
+```json
+{
+  "web": {
+    "browsers": ["chrome", "firefox"],
+    "viewports": [
+      [1920, 1080],
+      [1366, 768]
+    ]
+  },
+  "tunnel": true,
+  "tunnelName": "my-tunnel",
+  "waitForTimeout": 1000
+}
+```
+
+For more detailed information about LambdaTest Tunnel features and configurations, please refer to our [Advanced Tunnel Features documentation](/support/docs/advanced-tunnel-features/).
+
+:::tip
+When testing with tunnel, make sure to:
+1. Start the tunnel before running your tests
+2. Use the correct tunnel name in your configuration
+3. Keep the tunnel running until all tests are complete
+4. Use the same user credentials for both tunnel and SmartUI project
+::: 

sidebars.js

@@ -2865,9 +2865,12 @@ module.exports = {
               "smartui-cli-responsive-dom",
               "smartui-sdk-config-options",
               "smartui-multiple-assets-hosts",
+              "smartui-cli-basic-auth",
+              "smartui-sdk-tunnel",
               "smartui-shadow-dom",
               "smartui-cli-exec",
               "smartui-sdk-capabilities",
+
               {
                 type: "category",
                 collapsed: true,