diff --git a/docs/smartui-appium-hooks.md b/docs/smartui-appium-hooks.md index 056b509b..30f204aa 100644 --- a/docs/smartui-appium-hooks.md +++ b/docs/smartui-appium-hooks.md @@ -66,6 +66,8 @@ Using the LambdaTest platform, perform regression testing in just one click and - Access your Hub for your appium **remote connection** instance at `@mobile-hub.lambdatest.com/wd/hub`. - Copy `LT_USERNAME` and `LT_ACCESS_KEY` credentials from `Access Key` button on the top right of the dashboard. +Below are code examples for taking viewport screenshots using SmartUI with Appium across different programming languages and frameworks: + @@ -300,7 +302,7 @@ await driver.execute("smartui.takeScreenshot", config); ### Cross-Framework Examples - + ```javascript let config = { @@ -318,10 +320,10 @@ await driver.execute("smartui.takeScreenshot", config); ```python config = { - 'screenshotName': '', - 'ignoreBoxes': '{"xpath": ["//*[@text=\'Dynamic Ad\']", "//*[@id=\'timestamp\']"]}' + 'screenshotName': '', + 'ignoreBoxes': '{"xpath": ["//*[@text=\'Dynamic Ad\']", "//*[@id=\'timestamp\']"]}' } -driver.execute("smartui.takeScreenshot", config) +driver.execute_script("smartui.takeScreenshot", config) ``` @@ -329,13 +331,18 @@ driver.execute("smartui.takeScreenshot", config) ```java -Map config = new HashMap<>(); -config.put("screenshotName", ""); -config.put("ignoreBoxes", "{\"xpath\": [\"//*[@text='Dynamic Ad']\", \"//*[@id='timestamp']\"]}"); +Map configIgnore = new HashMap<>(); +configIgnore.put("screenshotName", "Screenshot"); -((JavascriptExecutor) driver).executeScript("smartui.takeScreenshot", config); -``` +Map ignoreBoxes = new HashMap<>(); +ignoreBoxes.put("xpath", new String[]{ + "//*[@name='Toast']" +}); + +configIgnore.put("ignoreBoxes", ignoreBoxes); +((JavascriptExecutor) driver).executeScript("smartui.takeScreenshot", configIgnore); +``` @@ -413,7 +420,7 @@ driver.execute("smartui.takeScreenshot=") ``` - + ```csharp driver.Execute("smartui.takeScreenshot="); diff --git a/docs/smartui-katalon-plugin b/docs/smartui-katalon-plugin new file mode 100644 index 00000000..44d9edf4 --- /dev/null +++ b/docs/smartui-katalon-plugin @@ -0,0 +1,222 @@ +--- +id: smartui-katalon-plugin +title: SmartUI Plugin for Katalon Studio +sidebar_label: Katalon Plugin +description: Integrate LambdaTest SmartUI with Katalon Studio to perform visual regression testing directly in your test automation workflows. +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 + - Katalon Studio + - Katalon SmartUI Integration + +url: https://www.lambdatest.com/support/docs/smartui-katalon-plugin/ +site_name: LambdaTest +slug: smartui-katalon-plugin +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys"; +import CodeBlock from '@theme/CodeBlock'; + + + +The **Katalon Studio SmartUI Plugin** integrates [Katalon Studio](https://www.katalon.com/) with [LambdaTest SmartUI](https://www.lambdatest.com/support/docs/smart-visual-regression-testing/), enabling **visual regression testing** directly inside your test automation workflows. + +With this plugin, you can: +- Capture screenshots at any point in your test flow +- Compare them with visual baselines +- Detect UI changes early in your CI/CD pipeline + +--- + + +## Installation + +### Option 1: Install via Katalon Store (Recommended) + +1. Open [Katalon Store](https://store.katalon.com/). +2. Search for **“SmartUI”** or browse under *Plugins > Integrations*. +3. Click **Install** to add the plugin to your Katalon Studio instance. + +### Option 2: Manual Installation via JAR + +1. Download the latest `katalon-studio-smartui-plugin.jar` from the [official release page](https://github.com/LambdaTest/katalon-studio-smartui-plugin/releases). +2. In Katalon Studio, go to **Project > Settings > Plugins > Import Plugin**. +3. Select the downloaded `.jar` file and click **Import**. + +--- + +## Configuration & Usage + +### Step 1: Create a SmartUI Project + +1. Go to [SmartUI Projects Page](https://smartui.lambdatest.com/). +2. Click **New Project**. +3. Select platform as **CLI** (for Katalon integration). +4. Enter project name, approvers, and tags (optional). +5. Click **Submit** and copy your **Project Token** from the dashboard. + +> Your Project Token will be used to authenticate screenshot uploads to SmartUI. + +--- + +### Step 2: Start your Katalon Instance from terminal + +Run the following command in the terminal to start the Katalon instance. + + +```bash +/Applications/Katalon\ Studio\ Enterprise.app/Contents/MacOS/katalon +``` +--- + +### Step 3: Set Environment Variable + +In your Katalon project, set the `PROJECT_TOKEN` environment variable: + +#### Via Project Settings: +1. Go to **Project > Settings > Plugins > SmartUI Integration**. +2. Here you may set your project token + + +```bash +PROJECT_TOKEN = "project_token..." +``` + +--- + +### Step 4: Configure SmartUI in Your Test Case + +Use the provided custom keywords to start, capture, and stop SmartUI sessions. + +#### Minimal Example: + +```groovy +// Start SmartUI Server +// Replace 'buildName' with your desired build name (optional) +CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.startServer'('My Katalon Build', '', '') + +// Open Browser +WebUI.openBrowser('') +WebUI.navigateToUrl('https://lambdatest.com') + +// Capture Snapshot with SmartUI +// The string parameter is the snapshot name (will appear in SmartUI Dashboard) +CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.takeSnapshot'('Homepage Snapshot') + +// Stop SmartUI Server +CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.stopServer'() + +// Close Browser +WebUI.closeBrowser() +``` + +--- + +### Step 5: Advanced Configuration (Optional) + +You can pass additional configuration via a JSON file or inline parameters. + +#### Using a Config File (`config.json`): + +```json +{ + "deviceName": "Chrome Desktop", + "platform": "Windows", + "fullPage": true, + "ignoreBoxes": { + "xpath": [ + "//*[@class='dynamic-ad']", + "//*[@id='timestamp']" + ] + } +} +``` + +Then use it in your test: + +```groovy +CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.startServer'('Build v1.0', 'config.json', '') +``` + +> Use `ignoreBoxes` to exclude dynamic elements (ads, timestamps) from comparison. +> Use `selectBoxes` to compare only specific regions (e.g., main content area). + +--- + +## Running Tests + +1. Execute your test case as usual in Katalon Studio. +2. After test completion, visit your [SmartUI Dashboard](https://smartui.lambdatest.com/) to: + - View captured screenshots + - Compare against baseline images + - Approve or reject visual changes + - Manage builds and baselines + +--- + +## Best Practices + +- Always include `startServer()` before taking screenshots and `stopServer()` after. +- Use descriptive snapshot names for easy identification in SmartUI. +- For CI/CD pipelines, set `PROJECT_TOKEN` as an environment variable in your CI tool (Jenkins, GitHub Actions, etc.). +- Combine with Katalon’s built-in reporting for comprehensive test insights. + +--- + +## Troubleshooting + +- **“Project Token not found”**: Ensure `PROJECT_TOKEN` is set in environment variables or passed explicitly. +- **No screenshots uploaded**: Verify network connectivity and that SmartUI server started successfully. +- **Dynamic content causing false positives**: Use `ignoreBoxes` or `selectBoxes` in config to stabilize comparisons. + +--- + + diff --git a/docs/web-scanner-visual-scan.md b/docs/web-scanner-visual-scan.md index e4c4abad..369dcd37 100644 --- a/docs/web-scanner-visual-scan.md +++ b/docs/web-scanner-visual-scan.md @@ -156,10 +156,13 @@ Access additional functions for your build: Edit Scan Schedule -3. **Delete Scan** +3. **Run Scan Now** + Run a new scan on demand and create a new build for comparison. + +4. **Delete Scan** Remove a scan from the dashboard. -4. **Stop Recurring Scan** +5. **Stop Recurring Scan** Halt any scheduled recurring scans instantly. diff --git a/sidebars.js b/sidebars.js index 189394a7..658d5ec7 100644 --- a/sidebars.js +++ b/sidebars.js @@ -3114,6 +3114,12 @@ module.exports = { label: "Visual Test Creation with KaneAI", id: "kaneai-smartui-visual-testing", }, + { + type: "doc", + label: "Visual Test with Katalon", + id: "smartui-katalon-plugin", + }, + { type: "category", collapsed: false,