smartui getting started page structuring

Author: amanchopra1905

assets/images/getting-started/k6.png

@@ -1,6 +1,6 @@
 ---
 id: getting-started-with-hyperexecute
-title: Getting started with Hyperexecute
+title: Getting started with HyperExecute
 hide_title: false
 sidebar_label: HyperExecute 
 description: Get started with HyperExecute on LambdaTest for faster web automation tests using Matrix and Auto-Split strategies. Test with Selenium languages at high speeds.

assets/images/getting-started/playwright.png

@@ -18,7 +18,7 @@ url: https://www.lambdatest.com/support/docs/getting-started-with-lambdatest-aut
 site_name: LambdaTest
 slug: getting-started-with-lambdatest-automation/
 ---
-import SupportedLanguage from '../src/component/SupportedLanguage';
+import SeleniumSupportedLanguage from '../src/component/SupportedLanguages/SeleniumSupportedLanguage';
 
 <script type="application/ld+json"
       dangerouslySetInnerHTML={{ __html: JSON.stringify({
@@ -55,7 +55,7 @@ LambdaTest provides a robust and versatile Selenium Automation Grid, designed to
 
 ## Supported Languages and Frameworks
 
-<SupportedLanguage />
+<SeleniumSupportedLanguage />
 
 :::tip Note
 We support all languages and frameworks that are compatible with Selenium, so in case your favorite isn't in the table.<br/>Don't worry, you can still run the test. <span className="doc__lt" onClick={() => window.openLTChatWidget()}>Contact Us</span> for any help.

assets/images/getting-started/puppeteer.png

@@ -24,7 +24,7 @@ slug: selenium-supported-languages-and-frameworks/
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import SupportedLanguage from '../src/component/SupportedLanguage';
+import SeleniumSupportedLanguage from '../src/component/SupportedLanguages/SeleniumSupportedLanguage';
 
 <script type="application/ld+json"
       dangerouslySetInnerHTML={{ __html: JSON.stringify({
@@ -51,7 +51,7 @@ import SupportedLanguage from '../src/component/SupportedLanguage';
 ></script>
 Out of the box, LambdaTest supports multiple languages under Selenium testing frameworks 
 
-<SupportedLanguage />
+<SeleniumSupportedLanguage />
 
 <div className="lt-framework-list-footer">
     <p>In case your favorite framework or tool isn't listed here, just give us a <span className="doc__lt" onClick={() => window.openLTChatWidget()}>Shout Out Here</span>.

assets/images/getting-started/selenium.png

@@ -1,7 +1,7 @@
 ---
 id: smart-visual-regression-testing
-title: Smart Visual Regression Testing Using LambdaTest
-hide_title: true
+title: Getting started with SmartUI
+hide_title: false
 sidebar_label: Visual Regression
 description: Experience Visual Regression Testing at its finest with SmartUI by LambdaTest. Automate UI changes tracking for precision, collaboration, and scalability on the cloud. Optimize your testing journey now!
 keywords:
@@ -20,6 +20,11 @@ site_name: LambdaTest
 slug: smart-visual-regression-testing/
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import SmartUIHooksSupportedLanguage from '../src/component/SupportedLanguages/SmartUIHooksSupportedLanguage';
+import SmartUISDKSupportedLanguage from '../src/component/SupportedLanguages/SmartUISDKSupportedLanguage';
+
 <script type="application/ld+json"
       dangerouslySetInnerHTML={{ __html: JSON.stringify({
        "@context": "https://schema.org",
@@ -43,18 +48,7 @@ slug: smart-visual-regression-testing/
       })
     }}
 ></script>
-
-# Smart UI - Visual Regression Testing on Cloud
-***
-
-Welcome to SmartUI, an innovative tool by LambdaTest that integrates the robustness of cloud-based platforms with the accuracy of Visual Regression Testing (VRT). SmartUI revolutionizes your digital experience by automating the process of identifying and tracking visual changes in the user interface (UI) over time. As technology progresses and your UI continues to evolve, SmartUI is designed to provide precision, collaboration, and scalability. 
-
-<div className="ytframe"> 
-<div className="youtube" data-embed="R00u2k8Yxpc" data-loading-attribute="eager">
-    <div className="play-button"></div>
-</div>
-</div>
-
+SmartUI is a visual testing tool that helps in identifying visual regressions in web applications. It uses advanced image comparison techniques to detect differences between baseline images and those captured during subsequent test runs.
 
 <div className="support_main">  
       <a href="/support/docs/smartui-cli/">
@@ -63,48 +57,12 @@ Welcome to SmartUI, an innovative tool by LambdaTest that integrates the robustn
       <p>Learn how to perform Visual UI Testing using command line interface.</p>
     </div>
   </a>
-  <a href="/support/docs/selenium-visual-regression/">
-    <div className="support_inners">
-      <h3>Setup with Selenium</h3>
-      <p>Learn how to perform Visual Regression Testing using Selenium Testing on Smart UI.</p>
-    </div>
-  </a>
-  <a href="/support/docs/smart-ui-cypress/">
-    <div className="support_inners">
-      <h3>Setup with Cypress</h3>
-      <p>Learn how to perform Visual Regression Testing using Cypress Testing on Smart UI.</p>
-    </div>
-  </a>
-  <a href="/support/docs/playwright-visual-regression/">
-    <div className="support_inners">
-      <h3>Setup with Playwright</h3>
-      <p>Learn how to perform Visual Regression Testing using Playwright Testing on Smart UI.</p>
-    </div>
-  </a>
-  <a href="/support/docs/puppeteer-visual-regression/">
-    <div className="support_inners">
-      <h3>Setup with Puppeteer</h3>
-      <p>Learn how to perform Visual Regression Testing using Puppeteer Testing on Smart UI.</p>
-    </div>
-  </a>
-  <a href="/support/docs/smartui-k6-setup/">
-    <div className="support_inners">
-      <h3>Setup with K6</h3>
-      <p>Learn how to perform Visual Regression Testing using K6 on Smart UI.</p>
-    </div>
-  </a>
   <a href="/support/docs/smart-ui-storybook/">
     <div className="support_inners">
       <h3>Setup with Storybook</h3>
       <p>Learn how to perform Visual Regression Testing using Storybook Testing on Smart UI.</p>
     </div>
   </a>
-  <a href="/support/docs/appium-visual-regression/">
-    <div className="support_inners">
-      <h3>Setup with Appium</h3>
-      <p>Learn how to perform Visual Regression Testing using Appium Testing on Smart UI.</p>
-    </div>
-  </a>
   <a href="/support/docs/smartui-upload-api-v2/">
     <div className="support_inners">
       <h3>Upload through API</h3>
@@ -155,94 +113,19 @@ Welcome to SmartUI, an innovative tool by LambdaTest that integrates the robustn
   </a>
 </div>
 
-<!-- <div className="ytframe"> 
-<div className="youtube" data-embed="F-RvD2UsqR4">
-    <div className="play-button"></div>
-</div>
-</div>
-
-## Upload Baseline
-
-Once you login, click on the Navigation menu bar in the left *Visual UI Testing > Smart Testing*.
-
-Next, we have to upload a Baseline image
-
-**Step 1:** Upload a baseline image. Click on the + icon next to the Base Line Images header.
+<!-- Here are all the languages and frameworks supported by SmartUI. -->
 
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-1.webp').default} alt="Smart Visual Testing" width="1439" height="803" className="doc_img"/>
+<Tabs className="docs__val">
+  <TabItem value="sdk" label="SDK" default>
+    <SmartUISDKSupportedLanguage />
+  </TabItem>
 
-**Step 2:** Select a baseline image from your computer. You can also select multiple images at a time.
+  <TabItem value="hooks" label="Hooks" default>
+    <SmartUIHooksSupportedLanguage />
+  </TabItem>
+</Tabs>
 
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-2.webp').default} alt="Smart Testing" width="1438" height="820" className="doc_img"/>
-
-**Step 3:** Once selected, images will be uploaded, and you can view the same under the Baseline Image gallery.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-3.webp').default} alt="Image Comparison" width="1438" height="820" className="doc_img"/>
-
-## Upload Comparison Images
-
-Upload Comparison Images. Please note that you cannot upload comparison images before uploading a baseline. Once you have uploaded the baseline image, below are the steps to upload a comparison image.
-
-**Step 1:** Click on the baseline image you want to run a comparison with.
-
-**Step 2:** On the right, you will find the Upload Comparison Image button. Click on it to upload images.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-4.webp').default} alt="Comparing Image pixel by pixel" width="1439" height="752" className="doc_img"/>
-
-**Step 3:** Select the images you want to compare with the baseline image. You can select multiple images as well.
-
-**Step 4:** If everything goes well, you would see the thumbnail of your comparison images along with the RUN button.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-5.webp').default} alt="Smart Comparison Testing" width="1440" height="791" className="doc_img"/>
-
-## Run Comparison
-
-**Step 1:** Once you have uploaded the comparison images, running the comparison is pretty simple. Just click on the Run button on the comparison image thumbnail.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-6.webp').default} alt="Running Image Comparison" width="1440" height="791" className="doc_img"/>
-
-**Step 2:** You can also click on compare all button.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-8.webp').default} alt="Compare All Images" width="1440" height="791" className="doc_img"/>
-
-## View Comparison and Issues
-
-Once you have run the comparison between baseline and comparison images, you can check the issues by clicking on the View issues button on the comparison image.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-9.webp').default} alt="comparison between baseline and comparison images" width="1440" height="791" className="doc_img"/>
-
-This will take you to a new window with a comparison image. You can zoom-in or Zoom out the images in this window, change the image difference color, switch to slider mode, switch to side-by-side mode, or mark the image as a bug.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-10.webp').default} alt="settings used in Image comparison" width="1437" height="745" className="doc_img"/>
-
-## Side by Side Mode
-
-There are multiple options for you to view your images. The side by side mode will open all three images, baseline image, comparison image, and comparison result image in a single window. In this mode, you can also mark the image as a bug. Or you can switch to any other mode.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-11.webp').default} alt="Side by Side Image Comparison" width="1438" height="750" className="doc_img"/>
-
-## Slider Mode
-
-In slider mode, you can view the baseline image and comparison image overlapped over each other and toggle them with a slider. This mode can help you view the difference between the two images very easily.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/Slider-Mode-1.webp').default} alt="Slider Mode for Comparing Images" width="1439" height="747" className="doc_img"/>
-
-## Change Baseline or Comparison Image
-
-You can change the baseline or comparison image easily. Just click on the settings button at the bottom of the image thumbnail. You would see multiple options like View Image Details, Replace Image, Rename Image, and Delete Image.
-
-<img loading="lazy" src={require('../assets/images/smart-visual-testing/smart-visual-testing-12.webp').default} alt="Changing Baseline or Comparison Image" width="821" height="646" className="doc_img"/> -->
-
-<nav aria-label="breadcrumbs">
-  <ul className="breadcrumbs">
-    <li className="breadcrumbs__item">
-      <a className="breadcrumbs__link" href="https://www.lambdatest.com">Home</a>
-    </li>
-    <li className="breadcrumbs__item">
-      <a className="breadcrumbs__link" href="/support/docs/">Support</a>
-    </li>
-    <li className="breadcrumbs__item breadcrumbs__item--active">
-      <span className="breadcrumbs__link">Smart Visual Testing</span>
-    </li>
-  </ul>
-</nav>
+<div className="lt-framework-list-footer">
+  <p>In case your favorite framework or tool isn't listed here, just give us a <span className="doc__lt" onClick={() => window.openLTChatWidget()}>Shout Out Here</span>. <br/>
+  In case of any other problems, feel free to <span className="doc__lt" onClick={() => window.openLTChatWidget()}>Contact Us</span>.</p>
+</div>