From dad36b3eed48e5de288941b47ab66e951b8f327e Mon Sep 17 00:00:00 2001 From: JeeveshJ7 Date: Fri, 25 Oct 2024 19:35:03 +0530 Subject: [PATCH] added env variable and responsive dom documentaton --- docs/smartui-cli-env-variables.md | 192 +++++++++++++++++++++++++++++ docs/smartui-cli-responsive-dom.md | 151 +++++++++++++++++++++++ sidebars.js | 2 + 3 files changed, 345 insertions(+) create mode 100644 docs/smartui-cli-env-variables.md create mode 100644 docs/smartui-cli-responsive-dom.md diff --git a/docs/smartui-cli-env-variables.md b/docs/smartui-cli-env-variables.md new file mode 100644 index 000000000..9739d7784 --- /dev/null +++ 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'; + +--- + + + +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: + + + + +```bash +export BASELINE_BRANCH="Required branch" +``` + + + +```bash +set BASELINE_BRANCH="Required branch" +``` + + + +## 2. Setting the current branch + +Set the current branch for `CLI` projects: + + + + +```bash +export CURRENT_BRANCH="Required branch" +``` + + + +```bash +set CURRENT_BRANCH="Required branch" +``` + + + +## 3. Setting proxies + +In case you are accessing your network using corporate proxies, set the proxies in the environment variables as follows + +#### HTTP_PROXY: + + + + +```bash +export HTTP_PROXY="Required branch" +``` + + + +```bash +set HTTP_PROXY="Required branch" +``` + + + + + +#### HTTPS_PROXY: + + + + +```bash +export HTTPS_PROXY="Required branch" +``` + + + +```bash +set HTTPS_PROXY="Required branch" +``` + + + +> **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 and password is optional]. + +## 4. Enabling Debug mode + +To enable SmartUI CLI Debug mode, use the following environment variable. + + + + +```bash +export LT_SDK_DEBUG=true +``` + + + +```bash +set LT_SDK_DEBUG=true +``` + + + +## 5. Ignoring captured cookies + +Set the following variable to true, to stop the use of cookies captured automatically. The default is set to `false`. + + + + +```bash +export SMARTUI_DO_NOT_USE_CAPTURED_COOKIES=true +``` + + + +```bash +set SMARTUI_DO_NOT_USE_CAPTURED_COOKIES=true +``` + + + + diff --git a/docs/smartui-cli-responsive-dom.md b/docs/smartui-cli-responsive-dom.md new file mode 100644 index 000000000..84985937c --- /dev/null +++ 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. + + + + + + + + + + + + + + + + diff --git a/sidebars.js b/sidebars.js index 3dc99a54d..69d259d27 100644 --- 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", ], }, {