Merge pull request LambdaTest#1502 from GarvitLT/stage

Updated GUI documentation and added corresponding assets to folders

Author: Ishavyas9

assets/images/hyperexecute/gui/gui_template.webp

@@ -1,8 +1,8 @@
 ---
 id: hyperexecute-cli-gui
-title: "HyperExecute-GUI App: A Simplified Approach to Test Execution"
+title: "HyperExecute GUI App - Speed Simplified"
 hide_title: false
-sidebar_label: HyperExecute-GUI
+sidebar_label: HyperExecute GUI App
 description: This documentation outlines the steps on how to trigger a job on hyperexecute using the underpass app - gui app for hyperexecute cli.
 keywords:
   - LambdaTest
@@ -18,6 +18,9 @@ site_name: LambdaTest
 slug: hyperexecute-cli-gui/
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 <script type="application/ld+json"
       dangerouslySetInnerHTML={{ __html: JSON.stringify({
        "@context": "https://schema.org",
@@ -41,57 +44,93 @@ slug: hyperexecute-cli-gui/
       })
     }}
 ></script>
-:::note
-The HyperExecute GUI is currently in **BETA**.
 
-At this stage, it only supports the **TestNG framework** from the [available languages and frameworks](https://www.lambdatest.com/support/docs/hyperexecute-supported-languages-and-frameworks/) in HyperExecute. If you have specific requests for additional framework and language support, please reach out to our <span className="doc__lt" onClick={() => window.openLTChatWidget()}>support team</span>.
+:::info Currently in BETA
+
+HyperExecute GUI is currently in **BETA** and supports the **Java TestNG Framework (Java Version 11 & above)**. We're actively working on expanding support to more frameworks. If you have specific framework requests, please reach out to our <span className="doc__lt" onClick={() => window.openLTChatWidget()}>support team</span>.
+
 :::
 
-HyperExecute has been a cornerstone for automation testing, offering unparalleled flexibility with its [YAML](https://www.lambdatest.com/support/docs/hyperexecute-yaml-parameters/) configurations and [command-line interface](https://www.lambdatest.com/support/docs/hyperexecute-cli-run-tests-on-hyperexecute-grid/). To further elevate your testing experience, we are introducing the new HyperExecute-GUI, a user-friendly graphic interface designed to simplify your test execution process.
+**HyperExecute Graphical User Interface (GUI)** is designed to streamline your test automation workflow and bring HyperExecute's power of test orchestration with the most intuitive way to interact. HyperExecute GUI makes testing simple, fast, and powerful. It abstracts all technical complexity to make **high-performance test execution available to everyone**. The goal is to save your valuable time and effort to enable a more efficient testing process.
 
-With HyperExecute-GUI, you can seamlessly leverage the full capabilities of HyperExecute without the need for YAML files or command-line interactions. This intuitive graphical interface allows you to execute your existing test scripts with ease, saving you valuable time and effort and enabling a more efficient and effective testing process.
+## Why HyperExecute GUI?
+---
+**[HyperExecute](https://www.lambdatest.com/hyperexecute)** has been a **cornerstone for automation testing**, offering unparalleled flexibility with its YAML configurations and command-line interface. Now, with HyperExecute GUI, you can experience AI-powered automatic test detection, set up test environments with simple clicks and run your tests without coding.
 
-## Steps to trigger your tests
+<img src={require('../assets/images/hyperexecute/gui/gui_template.webp').default} />
 
-### Step 1: Download and Install the  HyperExecute-GUI installer
-To begin, access the LambdaTest dashboard and download the HyperExecute-GUI installer (as demonstrated in the video below). This tool is essential for triggering your tests through a user-friendly interface. After downloading, install the application on your system.
+## Getting Started in 5 Simple Steps
+---
 
 <video class="right-side" width="100%" controls id="vid">
-<source src= {require('../assets/videos/hyperexecute/cli-gui/step1.mp4').default} type="video/mp4" />
+<source src= {require('../assets/videos/hyperexecute/cli-gui/GUI_Demo.mp4').default} type="video/mp4" />
 </video>
 
-### Step 2: Browse your Project
-Launch the HyperExecute-GUI installer app and log in using your existing LambdaTest credentials. If you're new to LambdaTest, you can start by signing up for a free trial. Once logged in, browse your project from your local system to begin the test setup.
+### Step 1: Download and Install
+Download the HyperExecute GUI installer from your LambdaTest dashboard and install it on your system. Run the installer by following the on-screen instructions and launch HyperExecute GUI from your applications menu.
 
-<img loading="lazy" src={require('../assets/videos/hyperexecute/cli-gui/step2.png').default} alt="project-hyperexecute" className="doc_img "/><br/><br/>
+:::tip Download the GUI 🔗
+You can download the app directly from your **HyperExecute Dashboard** or simply click the links below based on your operating system:
+ - **[Download for MacOS](https://downloads.lambdatest.com/underpass/master/UnderPass.dmg)**
+ - **[Download for Windows](https://downloads.lambdatest.com/underpass/master/UnderPass.exe)**
+ - **[Download for Linux](https://downloads.lambdatest.com/underpass/master/UnderPass.AppImage)**
+:::
+
+### Step 2: Select and Analyze Your Project
+Launch the application, log in with your LambdaTest credentials, and select your test project folder. The GUI will automatically analyze your project i.e.:
 
-### Step 3: Analyze Project Details
-The HyperExecute-GUI will automatically analyze your test scripts to identify the framework and language used. The GUI will then verify and check all required dependencies to ensure your project is ready for execution.
+- Detect your testing framework and language
+- Verify and manages network connectivity
+- Set up a secure connection to your account
 
 <video class="right-side" width="100%" controls id="vid">
-<source src= {require('../assets/videos/hyperexecute/cli-gui/step3.mp4').default} type="video/mp4" />
+<source src= {require('../assets/videos/hyperexecute/cli-gui/projectselect_analyze.mp4').default} type="video/mp4" />
 </video>
 
-Now click on the Proceed button to move to the next step.
+:::note 
+The GUI will check the system and your project to ensure everything is ready. If any issues are found, you'll see clear instructions to resolve them. Some common issues faced by the users are:
+- **Missing programming language or package manager**: If your project uses a language or package manager that isn't installed on your computer, the GUI will guide you through installing it.
+- **Network connectivity issues**: If the GUI can't connect to LambdaTest servers, it will ask you to set up the necessary network settings through proxy.
+:::
+
+### Step 3: Discover and Select Tests
+Once you land on the Project Screen, the app will automatically initiate Test Discovery. **Test Discovery is an automated process** that scans your project to identify and group all test cases by **Suites, Files, Classes or Methods**. 
 
-### Step 4: Discover and Select Tests
-HyperExecute-GUI will automatically identify all test cases within your project and present them in a comprehensive list. You can then select specific tests, an entire test project, or groups of test suites according to your needs and preferences.
+This feature eliminates the need for manual test configuration and makes it easy to select which tests to run. Once you have selected the tests from "Test List" tab according to your preferences, either you can **directly run the job** or move to the next step for **additional configuration**.
 
 <video class="right-side" width="100%" controls id="vid">
-<source src= {require('../assets/videos/hyperexecute/cli-gui/step4.mp4').default} type="video/mp4" />
+<source src= {require('../assets/videos/hyperexecute/cli-gui/testdiscovery_select.mp4').default} type="video/mp4" />
 </video>
 
-### Step 5: Test Execution Configuration
-Before executing your tests, customize the test run settings. Specify the [operating system](https://www.lambdatest.com/support/docs/deep-dive-into-hyperexecute-yaml/#runson), [concurrency](https://www.lambdatest.com/support/docs/deep-dive-into-hyperexecute-yaml/#concurrency) level to optimize performance, and [retries](https://www.lambdatest.com/support/docs/deep-dive-into-hyperexecute-yaml/#retryonfailure) for failed tests and add a [job label](https://www.lambdatest.com/support/docs/deep-dive-into-hyperexecute-yaml/#joblabel) for easy identification and tracking.
+:::info Coming Soon
+Search within tests is not yet available on the GUI. We are working to make it available soon.
+:::
+
+### Step 4: Specify Run Config _[Optional]_
+The **Run Config tab** in HyperExecute GUI offers an intuitive visual interface to configure your test environment and execution settings.
+You’ll find the basic preset configurations displayed just below your project name. If you need to modify or customize these settings, simply navigate to the Run Config tab and adjust your execution environment effortlessly — _no YAML editing required_.
 
-> **Note :** For detailed information on these configuration options, please refer to our [HyperExecute YAML](https://lambdatest.com/support/docs/deep-dive-into-hyperexecute-yaml) documentation.
+To learn about any configuration in detail, please search for the keyword in the **[HyperExecute YAML Documentation](/support/docs/deep-dive-into-hyperexecute-yaml)**.
+
+### Step 5: Run Tests and View Job
+Click on the **Run Test** button to start the test execution. A pop with job status and creation logs will appear with options to Expand and View Job. Click on the **View Job** button to get redirected to the job dashboard once the job is created. The HyperExecute-GUI displays the job logs in real-time as your tests run. Once complete, you can view the detailed test results in the HyperExecute Dashboard.
 
 <video class="right-side" width="100%" controls id="vid">
-<source src= {require('../assets/videos/hyperexecute/cli-gui/step5.mp4').default} type="video/mp4" />
+<source src= {require('../assets/videos/hyperexecute/cli-gui/demo_25.mp4').default} type="video/mp4" />
 </video>
 
-### Step 6: Run the Tests
-Click on the "Run Test" button to start the test execution. Click on the "View Job" button to get redirected to the HyperExecute dashboard.
+## FAQs
+
+---
+
+**1. Are Appium tests supported on GUI as of now?**
+
+    No, Appium test support will be coming soon. Currently, the GUI is in beta and primarily supports TestNG framework.
+
+**2. If my tests are written using Chrome Driver or any other local driver, can I use that project?**
+    
+    Yes, you can use the project, but the associated test IDs will not be created. You would need to enable the "Screen Recording For Scenarios" key to record the entire scenario execution, with the video accessible from the HyperExecute dashboard. (This is applicable for non-Selenium based tests)
 
-### Monitor and View Results
-The HyperExecute-GUI displays the job logs in real-time as your tests run. Once complete, you can view the detailed test results in the HyperExecute Dashboard.
+**3. If I have a scenario where the project has two folders - one which creates the test dependencies and another which uses those dependencies to run the tests - how can I use that?**
+    
+    You would not be able to use such a project. Please ensure that each project is created from one folder only. We will be supporting this feature in the coming future.