diff --git a/docs/smartui-cli-build-name.md b/docs/smartui-cli-build-name.md index 33e5f4ec2..6b08d6b46 100644 --- a/docs/smartui-cli-build-name.md +++ b/docs/smartui-cli-build-name.md @@ -1,7 +1,7 @@ --- id: smartui-sdk-build-name title: Grouping Screenshots through Build Names -sidebar_label: Fetch Results +sidebar_label: Groups Screenshots by Build Names description: In this documentation, learn how to group screenshots in a single build across multiple executions. - Visual Regression - Visual Regression Testing Guide @@ -22,8 +22,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import NewTag from '../src/component/newTag'; ---- - - SmartUI CLI allows you to group screenshots in a build name and append new screenshots to an existing build. This feature enables you to assign build names, add screenshots to existing builds and manage your visual tests efficiently. - ## Prerequisites - Basic understanding of Command Line Interface @@ -58,9 +54,7 @@ SmartUI CLI allows you to group screenshots in a build name and append new scree - Ensure you are using `@lambdatest/smartui-cli` version 4.0.14 or higher. - A properly configured SmartUI CLI project -## Steps to Use - -### **Step 1:** Install SmartUI CLI +## Step 1: Install SmartUI CLI If you haven't already installed SmartUI CLI, install it using npm: @@ -68,7 +62,7 @@ If you haven't already installed SmartUI CLI, install it using npm: npm i @lambdatest/smartui-cli ``` -### **Step 2:** Configure your Project Token +## Step 2: Configure your Project Token Setup your project token show in the **SmartUI** app after, creating your project. @@ -95,7 +89,7 @@ $Env:PROJECT_TOKEN="123456#1234abcd-****-****-****-************" -### **Step 3:** Execute Tests with custom Build Names +## Step 3: Execute Tests with custom Build Names You can add a custom build name by adding the `--buildName` flag to your test execution command. Here are different ways to use this feature: @@ -111,14 +105,14 @@ npx smartui --config .smartui.json exec --buildName "Sample Build Name" -- npx smartui --config .smartui.json exec --buildName "Sample Build Name" -- node test.js >``` -#### Default Usage +### Default Usage If no buildname is specified, a random build name is added to the builds: ```bash npx smartui --config .smartui.json exec -- ``` -### **Step 4:** Advanced Use Case +## Step 4: Advanced Use Case If you are running multiple test cases in a single job (e.g., using HyperExecute) and want to club all screenshots under a single build while maintaining consistent Git baseline management, you can do the following: @@ -127,34 +121,15 @@ This can be done as follows: ```bash npx smartui --config .smartui.json exec --buildName $env:JOB_ID -- node test.js ``` -##### This approach ensures: - -- A new build is created for every HyperExecute job. -- Screenshots from all tests in the same job are appended to the same build. -- Git branching strategies remain unaffected, improving baseline management across branches. - - ->## Key Benefits ->1. Efficient grouping of screenshots by build names. ->2. Seamless integration with Git baseline management. ->3. Flexibility to append screenshots to existing builds. ->4. Optimized workflows for parallel and single-job executions. - - - + +## Key Benefits +- **Efficient Grouping:** Screenshots are grouped by build names, improving organization and traceability. +- **Seamless Git Integration:** Integrates smoothly with Git to maintain baseline integrity across branches. +- **Flexible Updates:** Allows appending screenshots to existing builds, enhancing adaptability. +- **Optimized Workflows:** Supports streamlined operations for both parallel and single-job executions. + +## Conclusion +This approach provides a structured and efficient way to manage visual tests: +- **New Build for Each HyperExecute Job:** A dedicated build is created for every HyperExecute job, ensuring clear separation and traceability. +- **Consolidated Screenshot Grouping:** Screenshots from all tests within the same job are appended to a single build for seamless organization. +- **Uninterrupted Git Workflow:** Git branching strategies remain unaffected, enabling robust baseline management across branches. \ No newline at end of file diff --git a/docs/smartui-guided-walkthrough.md b/docs/smartui-guided-walkthrough.md index 7df5d6516..8313eb82d 100644 --- a/docs/smartui-guided-walkthrough.md +++ b/docs/smartui-guided-walkthrough.md @@ -54,10 +54,14 @@ The SmartUI dashboard presents a comparison between the baseline and the capture ### Diff Controls Located at the center of the top menu, the Diff Controls allow testers to customize how visual differences are displayed, offering multiple options to refine the comparison process. The available modes are: +#### Layers - **Captured Diffs :** Highlights the differences detected in the current captured screenshots when compared to the baseline. Ideal for spotting changes introduced in the latest version. - **Baseline Diffs :** Displays the differences by focusing on the baseline's unique elements. Helps identify elements missing or changed in the new capture. Annotations : Allows users to add notes or highlight specific regions of interest on the screenshots. Useful for documenting findings or collaborating with team members. +- **Annotations :** Controls the visibility of your annotations in both parallel and landscape views with a toggle, default set to off, ensuring a clean visual field when not needed. + +#### Diff Options - **Strict Mode :** Highlights exact pixel mismatches between the baseline and captured screenshots. Best suited for detailed visual inspections where high precision is required. -- **Smart Ignore :** Automatically ignores minor, non-critical differences (e.g., anti-aliasing, rendering variations). Useful for reducing noise in tests, allowing the focus to remain on significant UI changes. +- **Smart Ignore :** Iintelligently hides the displacement differences, allowing you to concentrate on actual content changes that impact the user experience. ### Variants The top menu includes browser variants, which allow cross-browser testing. Variants visible in the screenshot include: Chrome, Firefox, Edge, Playwright WebKit (Pw-Webkit). Each variant shows the same test across different browsers and resolutions, helping identify browser-specific visual issues. diff --git a/sidebars.js b/sidebars.js index 9187a9df1..ceef7f9f3 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2778,6 +2778,7 @@ module.exports = { collapsed: true, label: "CLI Configurations", items: [ + "smartui-sdk-build-name", "smartui-sdk-fetch-results", "smartui-cli-responsive-dom", "smartui-sdk-config-options", @@ -2824,6 +2825,7 @@ module.exports = { ] }, "smartui-pdf-comparison", + "smartui-draw-on-ui", ] }, { @@ -2840,7 +2842,7 @@ module.exports = { { type: "category", collapsed: true, - label: "Trigger Visual Tests from CI/CD tools", + label: "Run Visual Tests on PRs", items: [ "smartui-github-app-integration", ], @@ -2869,7 +2871,6 @@ module.exports = { label: "Project Management", items: [ "smartui-project-settings", - "smartui-draw-on-ui", "test-settings-options", "html-dom-smartui-options", "smart-ui-build-options",