Skip to content

Commit 7a64aa6

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request #2160 from Ishavyas9/main
katalon doc
2 parents 309a5c8 + 9fc51af commit 7a64aa6

File tree

4 files changed

+250
-12
lines changed

4 files changed

+250
-12
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: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
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+
64+
## Installation
65+
66+
### Option 1: Install via Katalon Store (Recommended)
67+
68+
1. Open [Katalon Store](https://store.katalon.com/).
69+
2. Search for **“SmartUI”** or browse under *Plugins > Integrations*.
70+
3. Click **Install** to add the plugin to your Katalon Studio instance.
71+
72+
### Option 2: Manual Installation via JAR
73+
74+
1. Download the latest `katalon-studio-smartui-plugin.jar` from the [official release page](https://github.com/LambdaTest/katalon-studio-smartui-plugin/releases).
75+
2. In Katalon Studio, go to **Project > Settings > Plugins > Import Plugin**.
76+
3. Select the downloaded `.jar` file and click **Import**.
77+
78+
---
79+
80+
## Configuration & Usage
81+
82+
### Step 1: Create a SmartUI Project
83+
84+
1. Go to [SmartUI Projects Page](https://smartui.lambdatest.com/).
85+
2. Click **New Project**.
86+
3. Select platform as **CLI** (for Katalon integration).
87+
4. Enter project name, approvers, and tags (optional).
88+
5. Click **Submit** and copy your **Project Token** from the dashboard.
89+
90+
> Your Project Token will be used to authenticate screenshot uploads to SmartUI.
91+
92+
---
93+
94+
### Step 2: Start your Katalon Instance from terminal
95+
96+
Run the following command in the terminal to start the Katalon instance.
97+
98+
99+
```bash
100+
/Applications/Katalon\ Studio\ Enterprise.app/Contents/MacOS/katalon
101+
```
102+
---
103+
104+
### Step 3: Set Environment Variable
105+
106+
In your Katalon project, set the `PROJECT_TOKEN` environment variable:
107+
108+
#### Via Project Settings:
109+
1. Go to **Project > Settings > Plugins > SmartUI Integration**.
110+
2. Here you may set your project token
111+
112+
113+
```bash
114+
PROJECT_TOKEN = "project_token..."
115+
```
116+
117+
---
118+
119+
### Step 4: Configure SmartUI in Your Test Case
120+
121+
Use the provided custom keywords to start, capture, and stop SmartUI sessions.
122+
123+
#### Minimal Example:
124+
125+
```groovy
126+
// Start SmartUI Server
127+
// Replace 'buildName' with your desired build name (optional)
128+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.startServer'('My Katalon Build', '', '')
129+
130+
// Open Browser
131+
WebUI.openBrowser('')
132+
WebUI.navigateToUrl('https://lambdatest.com')
133+
134+
// Capture Snapshot with SmartUI
135+
// The string parameter is the snapshot name (will appear in SmartUI Dashboard)
136+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.takeSnapshot'('Homepage Snapshot')
137+
138+
// Stop SmartUI Server
139+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.stopServer'()
140+
141+
// Close Browser
142+
WebUI.closeBrowser()
143+
```
144+
145+
---
146+
147+
### Step 5: Advanced Configuration (Optional)
148+
149+
You can pass additional configuration via a JSON file or inline parameters.
150+
151+
#### Using a Config File (`config.json`):
152+
153+
```json
154+
{
155+
"deviceName": "Chrome Desktop",
156+
"platform": "Windows",
157+
"fullPage": true,
158+
"ignoreBoxes": {
159+
"xpath": [
160+
"//*[@class='dynamic-ad']",
161+
"//*[@id='timestamp']"
162+
]
163+
}
164+
}
165+
```
166+
167+
Then use it in your test:
168+
169+
```groovy
170+
CustomKeywords.'com.katalon.plugin.keyword.smartui.SmartKeywords.startServer'('Build v1.0', 'config.json', '')
171+
```
172+
173+
> Use `ignoreBoxes` to exclude dynamic elements (ads, timestamps) from comparison.
174+
> Use `selectBoxes` to compare only specific regions (e.g., main content area).
175+
176+
---
177+
178+
## Running Tests
179+
180+
1. Execute your test case as usual in Katalon Studio.
181+
2. After test completion, visit your [SmartUI Dashboard](https://smartui.lambdatest.com/) to:
182+
- View captured screenshots
183+
- Compare against baseline images
184+
- Approve or reject visual changes
185+
- Manage builds and baselines
186+
187+
---
188+
189+
## Best Practices
190+
191+
- Always include `startServer()` before taking screenshots and `stopServer()` after.
192+
- Use descriptive snapshot names for easy identification in SmartUI.
193+
- For CI/CD pipelines, set `PROJECT_TOKEN` as an environment variable in your CI tool (Jenkins, GitHub Actions, etc.).
194+
- Combine with Katalon’s built-in reporting for comprehensive test insights.
195+
196+
---
197+
198+
## Troubleshooting
199+
200+
- **“Project Token not found”**: Ensure `PROJECT_TOKEN` is set in environment variables or passed explicitly.
201+
- **No screenshots uploaded**: Verify network connectivity and that SmartUI server started successfully.
202+
- **Dynamic content causing false positives**: Use `ignoreBoxes` or `selectBoxes` in config to stabilize comparisons.
203+
204+
---
205+
206+
<nav aria-label="breadcrumbs">
207+
<ul className="breadcrumbs">
208+
<li className="breadcrumbs__item">
209+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
210+
Home
211+
</a>
212+
</li>
213+
<li className="breadcrumbs__item">
214+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
215+
Support
216+
</a>
217+
</li>
218+
<li className="breadcrumbs__item breadcrumbs__item--active">
219+
<span className="breadcrumbs__link">SmartUI Katalon Plugin</span>
220+
</li>
221+
</ul>
222+
</nav>

‎docs/web-scanner-visual-scan.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,10 +156,13 @@ Access additional functions for your build:
156156

157157
<img loading="lazy" src={require('../assets/images/web-scanner/editscan-schedule.png').default} alt="Edit Scan Schedule" className="doc_img"/>
158158

159-
3. **Delete Scan**
159+
3. **Run Scan Now**
160+
Run a new scan on demand and create a new build for comparison.
161+
162+
4. **Delete Scan**
160163
Remove a scan from the dashboard.
161164

162-
4. **Stop Recurring Scan**
165+
5. **Stop Recurring Scan**
163166
Halt any scheduled recurring scans instantly.
164167

165168

‎sidebars.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3114,6 +3114,12 @@ module.exports = {
31143114
label: "Visual Test Creation with KaneAI",
31153115
id: "kaneai-smartui-visual-testing",
31163116
},
3117+
{
3118+
type: "doc",
3119+
label: "Visual Test with Katalon",
3120+
id: "smartui-katalon-plugin",
3121+
},
3122+
31173123
{
31183124
type: "category",
31193125
collapsed: false,

0 commit comments

Comments
 (0)