Skip to content

Commit dea6fb0

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request #2131 from RushilK7/stage
Stage
2 parents 1b85fc9 + 89b81cd commit dea6fb0

File tree

3 files changed

+274
-10
lines changed

3 files changed

+274
-10
lines changed

‎docs/smartui-appium-hooks.md‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ Using the LambdaTest platform, perform regression testing in just one click and
6666
- Access your Hub for your appium **remote connection** instance at `@mobile-hub.lambdatest.com/wd/hub`.
6767
- Copy `LT_USERNAME` and `LT_ACCESS_KEY` credentials from `Access Key` button on the top right of the dashboard.
6868

69+
Below are code examples for taking viewport screenshots using SmartUI with Appium across different programming languages and frameworks:
70+
6971
<Tabs className="docs__val" groupId="language">
7072
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
7173

@@ -300,7 +302,7 @@ await driver.execute("smartui.takeScreenshot", config);
300302
### Cross-Framework Examples
301303

302304
<Tabs className="docs__val" groupId="language">
303-
<TabItem value="nodejs" label="NodeJS" default>
305+
<TabItem value="nodejs" label="Node.js" default>
304306

305307
```javascript
306308
let config = {
@@ -318,24 +320,29 @@ await driver.execute("smartui.takeScreenshot", config);
318320

319321
```python
320322
config = {
321-
'screenshotName': '<Your Screenshot Name>',
322-
'ignoreBoxes': '{"xpath": ["//*[@text=\'Dynamic Ad\']", "//*[@id=\'timestamp\']"]}'
323+
'screenshotName': '<Your Screenshot Name>',
324+
'ignoreBoxes': '{"xpath": ["//*[@text=\'Dynamic Ad\']", "//*[@id=\'timestamp\']"]}'
323325
}
324-
driver.execute("smartui.takeScreenshot", config)
326+
driver.execute_script("smartui.takeScreenshot", config)
325327
```
326328

327329
</TabItem>
328330

329331
<TabItem value="java" label="Java">
330332

331333
```java
332-
Map<String, Object> config = new HashMap<>();
333-
config.put("screenshotName", "<Your Screenshot Name>");
334-
config.put("ignoreBoxes", "{\"xpath\": [\"//*[@text='Dynamic Ad']\", \"//*[@id='timestamp']\"]}");
334+
Map<String, Object> configIgnore = new HashMap<>();
335+
configIgnore.put("screenshotName", "Screenshot");
335336

336-
((JavascriptExecutor) driver).executeScript("smartui.takeScreenshot", config);
337-
```
337+
Map<String, Object> ignoreBoxes = new HashMap<>();
338+
ignoreBoxes.put("xpath", new String[]{
339+
"//*[@name='Toast']"
340+
});
341+
342+
configIgnore.put("ignoreBoxes", ignoreBoxes);
343+
((JavascriptExecutor) driver).executeScript("smartui.takeScreenshot", configIgnore);
338344

345+
```
339346
</TabItem>
340347

341348
<TabItem value="csharp" label="C#">
@@ -413,7 +420,7 @@ driver.execute("smartui.takeScreenshot=<Your Screenshot Name>")
413420
```
414421

415422
</TabItem>
416-
<TabItem value="csharp" label="C#" default>
423+
<TabItem value="csharp" label="C#">
417424

418425
```csharp
419426
driver.Execute("smartui.takeScreenshot=<Your Screenshot Name>");

‎docs/smartui-katalon-plugin‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
---
2+
id: smartui-katalon-plugin
3+
title: SmartUI Plugin for Katalon Studio
4+
sidebar_label: Katalon Plugin
5+
description: Integrate LambdaTest SmartUI with Katalon Studio to perform visual regression testing directly in your test automation workflows.
6+
keywords:
7+
- Visual Regression
8+
- Visual Regression Testing Guide
9+
- Visual Regression Test Automation
10+
- Visual Regression Automation Testing
11+
- Running Visual Regression Tests
12+
- Visual Regression Testing Online
13+
- Run Visual Regression
14+
- Visual Regression Run Specific Test
15+
- Visual Regression Testing Environment
16+
- How to Run Visual Regression Tests
17+
- Katalon Studio
18+
- Katalon SmartUI Integration
19+
20+
url: https://www.lambdatest.com/support/docs/smartui-katalon-plugin/
21+
site_name: LambdaTest
22+
slug: smartui-katalon-plugin
23+
---
24+
25+
import Tabs from '@theme/Tabs';
26+
import TabItem from '@theme/TabItem';
27+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
28+
import CodeBlock from '@theme/CodeBlock';
29+
30+
<script type="application/ld+json"
31+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
32+
"@context": "https://schema.org",
33+
"@type": "BreadcrumbList",
34+
"itemListElement": [{
35+
"@type": "ListItem",
36+
"position": 1,
37+
"name": "Home",
38+
"item": "https://www.lambdatest.com"
39+
},{
40+
"@type": "ListItem",
41+
"position": 2,
42+
"name": "Support",
43+
"item": "https://www.lambdatest.com/support/docs/"
44+
},{
45+
"@type": "ListItem",
46+
"position": 3,
47+
"name": "SmartUI Katalon Plugin",
48+
"item": "https://www.lambdatest.com/support/docs/smartui-katalon-plugin/"
49+
}]
50+
})
51+
}}
52+
></script>
53+
54+
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.
55+
56+
With this plugin, you can:
57+
- Capture screenshots at any point in your test flow
58+
- Compare them with visual baselines
59+
- Detect UI changes early in your CI/CD pipeline
60+
61+
---
62+
63+
## Features
64+
65+
- **Visual Snapshots** — capture UI snapshots during test execution.
66+
- **Baseline Comparison** — automatically compare snapshots against stored baselines in SmartUI.
67+
- **Visual Regression Detection** — identify unintended UI changes with pixel-level accuracy.
68+
- **SmartUI Dashboard** — view diffs, approve/reject changes, and track regressions over time.
69+
70+
---
71+
72+
## Installation
73+
74+
### Option 1: Install via Katalon Store (Recommended)
75+
76+
1. Open [Katalon Store](https://store.katalon.com/).
77+
2. Search for **“SmartUI”** or browse under *Plugins > Integrations*.
78+
3. Click **Install** to add the plugin to your Katalon Studio instance.
79+
80+
### Option 2: Manual Installation via JAR
81+
82+
1. Download the latest `katalon-studio-smartui-plugin.jar` from the [official release page](https://github.com/LambdaTest/katalon-studio-smartui-plugin/releases) (if available).
83+
2. In Katalon Studio, go to **Project > Settings > Plugins > Import Plugin**.
84+
3. Select the downloaded `.jar` file and click **Import**.
85+
86+
---
87+
88+
## Configuration & Usage
89+
90+
### Step 1: Create a SmartUI Project
91+
92+
1. Go to [SmartUI Projects Page](https://smartui.lambdatest.com/).
93+
2. Click **New Project**.
94+
3. Select platform as **CLI** (for Katalon integration).
95+
4. Enter project name, approvers, and tags (optional).
96+
5. Click **Submit** and copy your **Project Token** from the dashboard.
97+
98+
> Your Project Token will be used to authenticate screenshot uploads to SmartUI.
99+
100+
---
101+
102+
### Step 2: Set Environment Variable
103+
104+
In your Katalon project, set the `PROJECT_TOKEN` environment variable:
105+
106+
#### Via Project Settings:
107+
1. Go to **Project > Settings > Execution > Profiles**.
108+
2. Under your active profile, add a new environment variable:
109+
110+
<Tabs className="docs__val" groupId="language">
111+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
112+
113+
```bash
114+
export LT_USERNAME="YOUR_USERNAME"
115+
export LT_ACCESS_KEY="YOUR ACCESS KEY"
116+
```
117+
</TabItem>
118+
<TabItem value="Windows" label="Windows" default>
119+
120+
```bash
121+
set LT_USERNAME="YOUR_USERNAME"
122+
set LT_ACCESS_KEY="YOUR ACCESS KEY"
123+
```
124+
125+
</TabItem>
126+
</Tabs>
127+
128+
#### Or via Script (Global Variable):
129+
You can also set it dynamically in your test script:
130+
131+
```groovy
132+
System.setProperty("PROJECT_TOKEN", "123456#1234abcd-****-****-****-************")
133+
```
134+
135+
---
136+
137+
### Step 3: Configure SmartUI in Your Test Case
138+
139+
Use the provided custom keywords to start, capture, and stop SmartUI sessions.
140+
141+
#### Minimal Example:
142+
143+
```groovy
144+
// Start SmartUI Server
145+
// Replace 'buildName' with your desired build name (optional)
146+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.startServer'('My Katalon Build', '', '')
147+
148+
// Open Browser
149+
WebUI.openBrowser('')
150+
WebUI.navigateToUrl('https://lambdatest.com')
151+
152+
// Capture Snapshot with SmartUI
153+
// The string parameter is the snapshot name (will appear in SmartUI Dashboard)
154+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.takeSnapshot'('Homepage Snapshot')
155+
156+
// Stop SmartUI Server
157+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.stopServer'()
158+
159+
// Close Browser
160+
WebUI.closeBrowser()
161+
```
162+
163+
---
164+
165+
### Step 4: Advanced Configuration (Optional)
166+
167+
You can pass additional configuration via a JSON file or inline parameters.
168+
169+
#### Using a Config File (`config.json`):
170+
171+
```json
172+
{
173+
"deviceName": "Chrome Desktop",
174+
"platform": "Windows",
175+
"fullPage": true,
176+
"ignoreBoxes": {
177+
"xpath": [
178+
"//*[@class='dynamic-ad']",
179+
"//*[@id='timestamp']"
180+
]
181+
}
182+
}
183+
```
184+
185+
Then use it in your test:
186+
187+
```groovy
188+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.startServer'('Build v1.0', 'config.json', '')
189+
```
190+
191+
> 💡 Use `ignoreBoxes` to exclude dynamic elements (ads, timestamps) from comparison.
192+
> 💡 Use `selectBoxes` to compare only specific regions (e.g., main content area).
193+
194+
---
195+
196+
## Running Tests
197+
198+
1. Execute your test case as usual in Katalon Studio.
199+
2. After test completion, visit your [SmartUI Dashboard](https://smartui.lambdatest.com/) to:
200+
- View captured screenshots
201+
- Compare against baseline images
202+
- Approve or reject visual changes
203+
- Manage builds and baselines
204+
205+
---
206+
207+
## Best Practices
208+
209+
- Always include `startServer()` before taking screenshots and `stopServer()` after.
210+
- Use descriptive snapshot names for easy identification in SmartUI.
211+
- For CI/CD pipelines, set `PROJECT_TOKEN` as an environment variable in your CI tool (Jenkins, GitHub Actions, etc.).
212+
- Combine with Katalon’s built-in reporting for comprehensive test insights.
213+
214+
---
215+
216+
## Troubleshooting
217+
218+
- **“Project Token not found”**: Ensure `PROJECT_TOKEN` is set in environment variables or passed explicitly.
219+
- **No screenshots uploaded**: Verify network connectivity and that SmartUI server started successfully.
220+
- **Dynamic content causing false positives**: Use `ignoreBoxes` or `selectBoxes` in config to stabilize comparisons.
221+
222+
---
223+
224+
## 🌐 Learn More
225+
226+
For detailed API documentation and advanced features, visit:
227+
228+
- [SmartUI Documentation](https://www.lambdatest.com/support/docs/smart-visual-regression-testing/)
229+
- [Katalon Studio Docs](https://docs.katalon.com/)
230+
- [Plugin GitHub Repository](https://github.com/LambdaTest/katalon-studio-smartui-plugin)
231+
232+
---
233+
234+
<nav aria-label="breadcrumbs">
235+
<ul className="breadcrumbs">
236+
<li className="breadcrumbs__item">
237+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
238+
Home
239+
</a>
240+
</li>
241+
<li className="breadcrumbs__item">
242+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
243+
Support
244+
</a>
245+
</li>
246+
<li className="breadcrumbs__item breadcrumbs__item--active">
247+
<span className="breadcrumbs__link">SmartUI Katalon Plugin</span>
248+
</li>
249+
</ul>
250+
</nav>
251+
```

‎sidebars.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3135,6 +3135,12 @@ module.exports = {
31353135
label: "Visual Test Creation with KaneAI",
31363136
id: "kaneai-smartui-visual-testing",
31373137
},
3138+
{
3139+
type: "doc",
3140+
label: "Visual Test with Katalon",
3141+
id: "smartui-katalon-plugin",
3142+
},
3143+
31383144
{
31393145
type: "category",
31403146
collapsed: false,

0 commit comments

Comments
 (0)