Skip to content

Commit 68ce140

Browse files
JeeveshJ7Ishavyas9
JeeveshJ7
authored and
Ishavyas9
committed
Tunnel and basic auth for SmartUI CLI
1 parent 951506c commit 68ce140

File tree

4 files changed

+236
-2
lines changed

4 files changed

+236
-2
lines changed

‎docs/smartui-basic-auth.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
id: smartui-cli-basic-auth
3+
title: Basic Authentication in SmartUI CLI
4+
sidebar_label: Capturing assets protected with authentication
5+
description: Learn how to capture screenshots of assets protected behind authentication using SmartUI CLI
6+
keywords:
7+
- Visual Regression
8+
- SmartUI SDK
9+
- Basic Authentication
10+
- Protected Assets
11+
- Authentication Headers
12+
url: https://www.lambdatest.com/support/docs/smartui-basic-auth/
13+
slug: smartui-cli-basic-auth/
14+
---
15+
16+
import Tabs from '@theme/Tabs';
17+
import TabItem from '@theme/TabItem';
18+
import NewTag from '../src/component/newTag';
19+
20+
---
21+
<script type="application/ld+json"
22+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
23+
"@context": "https://schema.org",
24+
"@type": "BreadcrumbList",
25+
"itemListElement": [{
26+
"@type": "ListItem",
27+
"position": 1,
28+
"name": "LambdaTest",
29+
"item": "https://www.lambdatest.com"
30+
},{
31+
"@type": "ListItem",
32+
"position": 2,
33+
"name": "Support",
34+
"item": "https://www.lambdatest.com/support/docs/"
35+
},{
36+
"@type": "ListItem",
37+
"position": 3,
38+
"name": "Smart Visual Testing",
39+
"item": "https://www.lambdatest.com/support/docs/smart-ui-cypress/"
40+
}]
41+
})
42+
}}
43+
></script>
44+
45+
46+
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.
47+
48+
## Why Basic Authentication is Needed
49+
50+
Without proper authentication configuration:
51+
- Protected assets may fail to load
52+
- Screenshots might be incomplete or broken
53+
- CSS and other resources behind authentication may not be accessible
54+
55+
## Configuration
56+
57+
Add the following configuration to your `.smartui.json` file to enable basic authentication:
58+
59+
```json
60+
{
61+
"basicAuthorization": {
62+
"username": "username",
63+
"password": "password"
64+
}
65+
}
66+
```
67+
68+
### Configuration Parameters
69+
70+
- **username**: Your authentication username
71+
- **password**: Your authentication password
72+
73+
## Example Usage
74+
75+
Here's a complete example of a SmartUI configuration file with basic authentication:
76+
77+
```json
78+
{
79+
"web": {
80+
"browsers": ["chrome", "firefox"],
81+
"viewports": [
82+
[1920, 1080],
83+
[1366, 768]
84+
]
85+
},
86+
"basicAuthorization": {
87+
"username": "your-username",
88+
"password": "your-password"
89+
},
90+
"waitForTimeout": 1000
91+
}
92+
```
93+
94+
## Using Environment Variables
95+
96+
For better security, you can use environment variables for your authentication credentials:
97+
98+
```json
99+
{
100+
"basicAuthorization": {
101+
"username": "${AUTH_USERNAME}",
102+
"password": "${AUTH_PASSWORD}"
103+
}
104+
}
105+
```
106+
107+
Then set your environment variables:
108+
109+
<Tabs className="docs__val" groupId="language">
110+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
111+
112+
```bash
113+
export AUTH_USERNAME="your-username"
114+
export AUTH_PASSWORD="your-password"
115+
```
116+
</TabItem>
117+
<TabItem value="Windows" label="Windows" default>
118+
119+
```bash
120+
set AUTH_USERNAME="your-username"
121+
set AUTH_PASSWORD="your-password"
122+
```
123+
</TabItem>
124+
</Tabs>
125+
126+
## Common Issues and Solutions
127+
128+
1. **Assets Not Loading**
129+
- Verify that the provided credentials have access to all required resources
130+
- Check if any assets are served from different domains requiring separate authentication
131+
132+
2. **Authentication Failures**
133+
- Ensure credentials are correct and active
134+
- Verify that the authentication endpoint is accessible from LambdaTest's infrastructure
135+
136+
:::tip
137+
When using basic authentication:
138+
1. Test your credentials manually before running SmartUI tests
139+
2. Ensure all required assets are accessible with the provided credentials
140+
3. Use secure methods to manage your authentication credentials
141+
4. Consider implementing a test user specifically for visual testing
142+
:::

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,13 +171,13 @@ set HTTP_PROXY="http://<username>:<password>@<domain.com>:<port>/"
171171
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
172172

173173
```bash
174-
export HTTPS_PROXY="Required branch"
174+
export HTTPS_PROXY="https://<username>:<password>@<domain.com>:<port>/"
175175
```
176176
</TabItem>
177177
<TabItem value="Windows" label="Windows" default>
178178

179179
```bash
180-
set HTTPS_PROXY="Required branch"
180+
set HTTPS_PROXY="https://<username>:<password>@<domain.com>:<port>/"
181181
```
182182
</TabItem>
183183
</Tabs>

‎docs/smartui-sdk-tunnel.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
id: smartui-sdk-tunnel
3+
title: Using LambdaTest Tunnel with SmartUI SDKs
4+
sidebar_label: Tunnel Configuration
5+
description: Learn how to use LambdaTest Tunnel with SmartUI SDK for testing internal, development, and staging environments
6+
keywords:
7+
- Visual Regression
8+
- SmartUI SDK
9+
- LambdaTest Tunnel
10+
- Local Testing
11+
- Internal Testing
12+
url: https://www.lambdatest.com/support/docs/smartui-sdk-tunnel/
13+
slug: smartui-sdk-tunnel/
14+
---
15+
16+
# Using LambdaTest Tunnel with SmartUI SDK
17+
18+
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.
19+
20+
:::warning Important
21+
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/).
22+
:::
23+
24+
## Prerequisites
25+
26+
1. The tunnel should be started by the same user who created the SmartUI project
27+
2. The tunnel must remain active throughout the entire SmartUI execution steps, from authentication to build completion
28+
29+
## Configuration
30+
31+
To enable tunnel testing with SmartUI SDK, add the following configuration to your `.smartui.json` file:
32+
33+
```json
34+
{
35+
"tunnel": true,
36+
"tunnelName": "my-tunnel"
37+
}
38+
```
39+
40+
### Configuration Parameters
41+
42+
- **tunnel**: Set to `true` to enable tunnel testing
43+
- **tunnelName**: Specify the name of your tunnel instance (must match the name used when starting the tunnel)
44+
45+
## Setting Up LambdaTest Tunnel
46+
47+
1. Download and install LambdaTest Tunnel by following the instructions in our [Tunnel documentation](/support/docs/advanced-tunnel-features/)
48+
49+
2. Start the tunnel with a specific name:
50+
```bash
51+
./LT --user {user-name} --key {access-key} --tunnelName my-tunnel
52+
```
53+
54+
3. Wait for the "Tunnel is connected" message before running your SmartUI tests
55+
56+
:::warning Important
57+
- Ensure the tunnel remains active throughout your testing session
58+
- The tunnel name in your configuration must match the `tunnelName` used when starting the tunnel
59+
- Only the user who created the SmartUI project can start and use the tunnel for testing
60+
:::
61+
62+
## Example Usage
63+
64+
Here's a complete example of a SmartUI configuration file using tunnel:
65+
66+
```json
67+
{
68+
"web": {
69+
"browsers": ["chrome", "firefox"],
70+
"viewports": [
71+
[1920, 1080],
72+
[1366, 768]
73+
]
74+
},
75+
"tunnel": true,
76+
"tunnelName": "my-tunnel",
77+
"waitForTimeout": 1000
78+
}
79+
```
80+
81+
For more detailed information about LambdaTest Tunnel features and configurations, please refer to our [Advanced Tunnel Features documentation](/support/docs/advanced-tunnel-features/).
82+
83+
:::tip
84+
When testing with tunnel, make sure to:
85+
1. Start the tunnel before running your tests
86+
2. Use the correct tunnel name in your configuration
87+
3. Keep the tunnel running until all tests are complete
88+
4. Use the same user credentials for both tunnel and SmartUI project
89+
:::

‎sidebars.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2854,9 +2854,12 @@ module.exports = {
28542854
"smartui-cli-responsive-dom",
28552855
"smartui-sdk-config-options",
28562856
"smartui-multiple-assets-hosts",
2857+
"smartui-cli-basic-auth",
2858+
"smartui-sdk-tunnel",
28572859
"smartui-shadow-dom",
28582860
"smartui-cli-exec",
28592861
"smartui-sdk-capabilities",
2862+
28602863
{
28612864
type: "category",
28622865
collapsed: true,

0 commit comments

Comments
 (0)