You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This guide will walk you through the process of running your first visual regression test using SmartUI, a powerful feature of LambdaTest that ensures your web applications look flawless across all browsers and devices.
52
+
## Prerequisites
53
+
54
+
- Basic understanding of Command Line Interface and Selenium is required.
55
+
- Login to [LambdaTest SmartUI](https://smartui.lambdatest.com/) with your credentials.
56
+
57
+
The following steps will guide you in running your first Visual Regression test on LambdaTest platform using SmartUI Selenium SDK integration.
58
+
59
+
## Step 1: Create a SmartUI Project
60
+
The first step is to create a project with the application in which we will combine all your builds run on the project. To create a SmartUI Project, follow these steps:
61
+
62
+
- Go to [Projects page](https://smartui.lambdatest.com/) and click on the **New Project** button.
63
+
- Select the platform as <b>CLI</b> for executing your **SDK** tests.
64
+
- Add name of the project, approver's name, and tags for any filter or easy navigation.
65
+
- Click on the **Continue** button.
66
+
67
+
Now select your desired framework and click on the **Configure** button. For the demo purpose we will select the Java framework.
68
+
69
+
## Step 2: Configure your Test Suite dependencies
70
+
71
+
You can use your own project to configure and test it. For demo purposes, we are using the sample repository.
72
+
73
+
:::tip Sample repo
74
+
Download or Clone the code sample code repository from the LambdaTest GitHub repository to run the tests on the SmartUI.
75
+
76
+
<ahref="https://github.com/LambdaTest/smartui-java-testng-sample"target="_blank"className="github__anchor"><img loading="lazy" src={require('../assets/images/icons/github.png').default} alt="Image" className="doc_img"/> View on GitHub</a>
77
+
:::
78
+
79
+
- Add the following dependency in your `pom.xml` file
80
+
81
+
```xml title="pom.xml"
82
+
<dependency>
83
+
<groupId>io.github.lambdatest</groupId>
84
+
<artifactId>lambdatest-java-sdk</artifactId>
85
+
<version>1.0.2</version>
86
+
</dependency>
87
+
```
88
+
89
+
:::note
90
+
You can check the latest version of [lambdatest-java-sdk](https://mvnrepository.com/artifact/io.github.lambdatest/lambdatest-java-sdk) and update the latest version accordingly.
91
+
:::
92
+
93
+
- Install your CLI and required modules for running SmartUI SDK and compile your defined dependencies in the `pom.xml` file:
94
+
95
+
```zsh
96
+
npm i @lambdatest/smartui-cli
97
+
mvn clean compile
98
+
```
99
+
100
+
## Step 3: Setup your Project Token and Environment Variables
101
+
102
+
Setup your project token show in the **SmartUI** app after, creating your project.
You can now configure your project configurations on using various available options to run your tests with the SmartUI integration. To generate the configuration file, please execute the following command:
142
+
143
+
```bash
144
+
npx smartui config:create .smartui.json
145
+
```
146
+
Once, the configuration file will be created, you will be seeing the default configuration pre-filled in the configuration file:
] // Full Page screenshots are captured by default for web viewports
168
+
},
169
+
"mobile": {
170
+
"devices": [
171
+
"iPhone 14", //iPhone 14 viewport
172
+
"Galaxy S24"//Galaxy S24 viewport
173
+
],
174
+
"fullPage":true, //Full Page is true by default for mobile viewports
175
+
"orientation":"portrait"//Change to "landscape" for landscape snapshot
176
+
},
177
+
"waitForTimeout":1000, //Optional (Should only be used in case lazy-loading/async components are present)
178
+
"waitForPageRender":50000, //Optional (Should only be used in case of websites which take more than 30s to load)
179
+
"enableJavaScript":false, //Enable javascript for all the screenshots of the project
180
+
"allowedHostnames": [] //Additional hostnames to capture assets from
181
+
}
182
+
```
183
+
:::info Advanced options in SmartUI configuration
184
+
- For capturing fullpage or viewport screenshots, please refer to this [documentation](/docs/smartui-sdk-config-options/#12-viewports)
185
+
- For the list of available mobile viewports, please refer to this [documentation](/docs/smartui-sdk-config-options/#list-of-supported-device-viewports)
186
+
- For more information about SmartUI config global options, please refer to this [documentation](/docs/smartui-sdk-config-options/#3-global-options-optional).
187
+
:::
188
+
189
+
## Step 5: Adding SmartUI function to take screenshot
190
+
You can incorporate SmartUI into your custom `Selenium` automation test (any platform) script by adding the `smartuiSnapshot` function in the required segment of selenium script of which we would like to take the screenshot, as shown below:
191
+
192
+
```java
193
+
importio.github.lambdatest.*; //Importing the lambdatest-java SDK
Execute `visual regression tests` on SmartUI using the following commands
210
+
211
+
```bash
212
+
npx smartui --config .smartui.json exec -- mvn test -D suite=sdk-cloud.xml
213
+
```
214
+
:::note
215
+
You may use the `npx smartui --help` command in case you are facing issues during the execution of SmartUI commands in the CLI.
216
+
:::
217
+
218
+
You can see the Smart UI dashboard to view the results. This will help you identify the Mismatches from the existing `Baseline` build and do the required visual testing.
0 commit comments