diff --git a/docs/smartui-layout-comparison.md b/docs/smartui-layout-comparison.md index 6621a159a..c28115d3d 100644 --- a/docs/smartui-layout-comparison.md +++ b/docs/smartui-layout-comparison.md @@ -182,7 +182,7 @@ describe('Layout Structure Test', () => { // Configure options to focus only on layout structure let options = { - ignoreType: "layout" + ignoreType: ["layout"] }; // Take screenshot with layout comparison diff --git a/docs/smartui-sdk-tunnel.md b/docs/smartui-sdk-tunnel.md index 8de4e7160..d5c568cc6 100644 --- a/docs/smartui-sdk-tunnel.md +++ b/docs/smartui-sdk-tunnel.md @@ -1,6 +1,6 @@ --- id: smartui-sdk-tunnel -title: Using LambdaTest Tunnel with SmartUI SDKs +title: Using LambdaTest Tunnel with SmartUI SDK sidebar_label: Tunnel Configuration description: Learn how to use LambdaTest Tunnel with SmartUI SDK for testing internal, development, and staging environments keywords: @@ -15,75 +15,148 @@ 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. +LambdaTest Tunnel enables secure testing of your local, development, or privately hosted environments 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/). +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 +- Working knowledge of npm CLI commands +- Understanding of tunneling concepts for local testing +- Valid LambdaTest credentials (username and access key) +- Familiarity with SmartUI CLI configuration files +- SmartUI CLI installed and configured -## Configuration +## Configuration Options -To enable tunnel testing with SmartUI SDK, add the following configuration to your `.smartui.json` file: +LambdaTest Tunnel supports two configuration modes: + +### 1. Automatic Tunnel Configuration + +For automatic tunnel setup, add the following configuration to your `.smartui.json` file: ```json { - "tunnel": true, - "tunnelName": "my-tunnel" + "tunnel": { + "type": "auto", + "user": "", // Optional: Overrides LT_USERNAME if present in env + "key": "", // Optional: Overrides LT_ACCESS_KEY if present in env + "port": "", // Optional: Default port if not specified + "proxyHost": "127.0.0.1", // Optional + "proxyPort": "8000", // Optional + "proxyUser": "user", // Optional: Proxy authentication + "proxyPass": "password", // Optional: Proxy authentication + "dir": "", // Optional: Directory to test + "v": true, // Optional: Enable verbose logging + "logFile": "/path/to/logs.txt" // Optional: Custom log file location + } } ``` -### Configuration Parameters +### 2. Manual Tunnel Configuration -- **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) +For manual tunnel setup, add the following configuration: -## Setting Up LambdaTest Tunnel +```json +{ + "tunnel": { + "type": "manual", + "tunnelName": "my-tunnel-name" // Required for manual mode + //Add user and key in case LT_USERNAME and LT_ACCESSKEY not provided in env variables + } +} +``` -1. Download and install LambdaTest Tunnel by following the instructions in our [Tunnel documentation](/support/docs/advanced-tunnel-features/) +:::note +Configuration values take precedence over environment variables when both are present. +::: -2. Start the tunnel with a specific name: -```bash -./LT --user {user-name} --key {access-key} --tunnelName my-tunnel -``` +## Environment Variables Support -3. Wait for the "Tunnel is connected" message before running your SmartUI tests +The tunnel configuration automatically uses the following environment variables if not specified in the config: -:::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 -::: +- `LT_USERNAME`: LambdaTest username +- `LT_ACCESS_KEY`: LambdaTest access key + +## Example Configurations + +### Basic Automatic Setup +```json +{ + "web": { + "browsers": ["chrome", "firefox"], + "viewports": [[1920, 1080], [1366, 768]] + }, + "tunnel": { + "type": "auto" + //Add user and key in case LT_USERNAME and LT_ACCESSKEY not provided in env variables -## Example Usage + } +} +``` -Here's a complete example of a SmartUI configuration file using tunnel: +### Advanced Automatic Setup with Proxy +```json +{ + "web": { + "browsers": ["chrome", "firefox"], + "viewports": [[1920, 1080], [1366, 768]] + }, + "tunnel": { + "type": "auto", + "user": "", // Optional: Overrides LT_USERNAME if present in env + "key": "", // Optional: Overrides LT_ACCESS_KEY if present in env + "proxyHost": "127.0.0.1", + "proxyPort": "8000", + "dir": "./src", + "v": true + } +} +``` +### Manual Tunnel Setup ```json { "web": { "browsers": ["chrome", "firefox"], - "viewports": [ - [1920, 1080], - [1366, 768] - ] + "viewports": [[1920, 1080], [1366, 768]] }, - "tunnel": true, - "tunnelName": "my-tunnel", - "waitForTimeout": 1000 + "tunnel": { + "type": "manual", + "tunnelName": "my-tunnel", + "user": "", // Optional: Overrides LT_USERNAME if present in env + "key": "", // Optional: Overrides LT_ACCESS_KEY if present in env + } } ``` -For more detailed information about LambdaTest Tunnel features and configurations, please refer to our [Advanced Tunnel Features documentation](/support/docs/advanced-tunnel-features/). + +## Best Practices + +1. **Automatic vs Manual Mode** + - Use automatic mode for simple setups and quick testing + - Use manual mode when you need more control over tunnel lifecycle + +2. **Credentials Management** + - Prefer environment variables for sensitive information + - Use config file for non-sensitive settings + +3. **Proxy Configuration** + - Specify proxy settings in config when using corporate networks + - Test proxy settings before running full test suite + +4. **Logging** + - Enable verbose logging (`"v": true`) for troubleshooting + - Specify custom log file location for persistent logs + +5. **Directory Testing** + - Always specify the directory to test when working with local files + - Ensure the directory path is accessible and contains the necessary files :::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 +For more detailed information about LambdaTest Tunnel features and configurations, refer to our [Advanced Tunnel Features documentation](/support/docs/advanced-tunnel-features/). ::: \ No newline at end of file