Skip to content

Commit 309f09f

Browse files
amanchopra1905amanchopra1905
committed
xcui smartui
1 parent 8b6c4fb commit 309f09f

File tree

2 files changed

+252
-0
lines changed

2 files changed

+252
-0
lines changed

‎docs/xcui-visual-regression.md‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
---
2+
id: xcui-visual-regression
3+
title: Getting Started With Visual Regression Testing Using XCUI On SmartUI Real Devices
4+
sidebar_label: XCUI
5+
description: Dive into our detailed XCUI Visual Regression support documentation for step-by-step guidance! Efficiently perform visual testing, manage applications, and ensure your mobile apps are visually perfect before launch.
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+
18+
url: https://www.lambdatest.com/support/docs/xcui-visual-regression/
19+
site_name: LambdaTest
20+
slug: xcui-visual-regression/
21+
---
22+
23+
import Tabs from '@theme/Tabs';
24+
import TabItem from '@theme/TabItem';
25+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
26+
import CodeBlock from '@theme/CodeBlock';
27+
import NewTag from '../src/component/newTag';
28+
29+
<script type="application/ld+json"
30+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
31+
"@context": "https://schema.org",
32+
"@type": "BreadcrumbList",
33+
"itemListElement": [{
34+
"@type": "ListItem",
35+
"position": 1,
36+
"name": "Home",
37+
"item": "https://www.lambdatest.com"
38+
},{
39+
"@type": "ListItem",
40+
"position": 2,
41+
"name": "Support",
42+
"item": "https://www.lambdatest.com/support/docs/"
43+
},{
44+
"@type": "ListItem",
45+
"position": 3,
46+
"name": "SmartUI-Hooks",
47+
"item": "https://www.lambdatest.com/support/docs/xcui-visual-regression/"
48+
}]
49+
})
50+
}}
51+
></script>
52+
53+
XCUI (XCTest UI) is Apple's native UI testing framework used for testing iOS applications. It is part of the XCTest framework and allows developers to write UI automation tests for iOS apps. In this documentation, you will learn step-by-step how to perform regression testing and find Visual UI Regression bugs easily with the help of Smart Testing.
54+
55+
## Prerequisites
56+
57+
- Your LambdaTest [Username and Access key](https://accounts.lambdatest.com/security).
58+
- Access to an **iOS** app (.ipa) and an **iOS Test** app (.ipa file).
59+
- Go to [`LambdaTest SmartUI`](https://smartui.lambdatest.com/) and login along with your credentials.
60+
61+
<!-- :::tip
62+
If you do not have any **Android** app (.apk) and an **Android Test** app (.apk) file, you can run your sample tests on LambdaTest by using our sample :link: [Android app](https://prod-mobile-artefacts.lambdatest.com/assets/docs/proverbial_android.apk) and a sample :link: [Espresso Test](https://prod-mobile-artefacts.lambdatest.com/assets/docs/proverbial_android_expressotest.apk).
63+
::: -->
64+
65+
## Step 1: Create a SmartUI Project
66+
67+
The first step is to create a project with the application in which we will combine all your **builds** run on the project.
68+
To create a SmartUI Project, follow these steps:
69+
70+
1. Go to [Projects page](https://smartui.lambdatest.com/)
71+
2. Click on the `new project` button
72+
3. Select the platform as <b>Real Device </b> for executing your `XCUI` tests.
73+
4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
74+
5. Click on the **Submit**.
75+
76+
<!-- <img loading="lazy" src={require('../assets/images/uploads/smart-ui-1.webp').default} alt="cmd" width="768" height="373" className="doc_img"/> -->
77+
78+
## Step 2: Set up your Authentication
79+
80+
Now, you need to export your environment variables LT_USERNAME and LT_ACCESS_KEY that are available in the [LambdaTest Profile page](https://accounts.lambdatest.com/details/profile).
81+
82+
Run the below mentioned commands in your terminal to setup the CLI and the environment variables.
83+
84+
<Tabs className="docs__val">
85+
86+
<TabItem value="bash" label="Linux / MacOS" default>
87+
<div className="lambdatest__codeblock">
88+
<CodeBlock className="language-bash">
89+
{`export LT_USERNAME=${ YOUR_LAMBDATEST_USERNAME()} \\
90+
export LT_ACCESS_KEY=${ YOUR_LAMBDATEST_ACCESS_KEY()}`}
91+
</CodeBlock>
92+
</div>
93+
94+
</TabItem>
95+
96+
<TabItem value="powershell" label="Windows" default>
97+
98+
<div className="lambdatest__codeblock">
99+
<CodeBlock className="language-powershell">
100+
{`set LT_USERNAME=${ YOUR_LAMBDATEST_USERNAME()} \`
101+
set LT_ACCESS_KEY=${ YOUR_LAMBDATEST_ACCESS_KEY()}`}
102+
</CodeBlock>
103+
</div>
104+
105+
</TabItem>
106+
</Tabs>
107+
108+
<!-- ## Step 3: Update your App Configurations
109+
110+
> It should be in your app configurations then only you can perform the Espresso integration.
111+
112+
- In your `build.gradle` file, add the [lambdatest-espresso](https://central.sonatype.com/artifact/io.github.lambdatest/lambdatest-espresso) dependency:
113+
114+
```bash
115+
implementation 'io.github.lambdatest:lambdatest-espresso:1.0.1'
116+
```
117+
118+
- Initialize this dependency in your test classes. You can do it as follows:
119+
120+
```bash java
121+
import io.github.lambdatest.LTApp;
122+
public class BrowserTest {
123+
124+
LTApp smartUIApp = new LTApp();
125+
126+
@Test
127+
public void checkBrowserPageIsOpened() throws InterruptedException {
128+
String response = smartUIApp.screenshot("LT-Espresso-Test");
129+
}
130+
}
131+
```
132+
133+
Now build your application. -->
134+
135+
## Step 3: Upload your Application
136+
137+
To begin testing, upload your iOS application (.ipa file) to LambdaTest's servers. You'll use our **REST API** for this process.
138+
139+
- **Authentication :** You'll need your LambdaTest Username and AccessKey. Combine them in the format `Username:AccessKey`.
140+
- **Uploading the App :** Use **cURL command** to send a request to our API. The request should include the path to your application file (**appFile**).
141+
142+
<Tabs className="docs__val">
143+
144+
<TabItem value="bash" label="Linux / MacOS" default>
145+
146+
<div className="lambdatest__codeblock">
147+
<CodeBlock className="language-bash">
148+
{`curl -u "${ YOUR_LAMBDATEST_USERNAME()}:${ YOUR_LAMBDATEST_ACCESS_KEY()}" --location --request POST 'https://manual-api.lambdatest.com/app/uploadFramework' --form 'appFile=@"<PATH_OF_YOUR_IOS_APP>"' --form 'type="xcuit-ios"'`}
149+
</CodeBlock>
150+
</div>
151+
152+
</TabItem>
153+
154+
<TabItem value="powershell" label="Windows" default>
155+
156+
<div className="lambdatest__codeblock">
157+
<CodeBlock className="language-powershell">
158+
{`curl -u "${ YOUR_LAMBDATEST_USERNAME()}:${ YOUR_LAMBDATEST_ACCESS_KEY()}" --location --request POST "https://manual-api.lambdatest.com/app/uploadFramework" --form "appFile=@"<PATH_OF_YOUR_IOS_APP>"" --form "type=\"xcuit-ios\""`}
159+
</CodeBlock>
160+
</div>
161+
162+
</TabItem>
163+
</Tabs>
164+
165+
:::info
166+
- Provide the path of your ios application in the above URL in place of `<PATH_OF_YOUR_IOS_APP>`
167+
- Response of above cURL will be a **JSON** object containing the `App URL` of the format - `lt://APP123456789123456789` and will be used in the last step.
168+
:::
169+
170+
## Step 4: Upload Your Test Suite
171+
172+
Upload your XCUI test suite (.ipa) file to LambdaTest servers using our REST API.
173+
174+
The following sample cURL command shows how to upload a test suite:
175+
176+
<Tabs className="docs__val">
177+
178+
<TabItem value="bash" label="Linux / MacOS" default>
179+
180+
<div className="lambdatest__codeblock">
181+
<CodeBlock className="language-bash">
182+
{`curl -u "${ YOUR_LAMBDATEST_USERNAME()}:${ YOUR_LAMBDATEST_ACCESS_KEY()}" --location --request POST 'https://manual-api.lambdatest.com/app/uploadFramework' --form 'appFile=@"<PATH_OF_YOUR_TEST_SUITE_APP>"' --form 'type="xcuit-ios"'`}
183+
</CodeBlock>
184+
</div>
185+
186+
</TabItem>
187+
188+
<TabItem value="powershell" label="Windows" default>
189+
190+
<div className="lambdatest__codeblock">
191+
<CodeBlock className="language-powershell">
192+
{`curl -u "${ YOUR_LAMBDATEST_USERNAME()}:${ YOUR_LAMBDATEST_ACCESS_KEY()}" --location --request POST "https://manual-api.lambdatest.com/app/uploadFramework" --form "appFile=@"<PATH_OF_YOUR_TEST_SUITE_APP>"" --form "type=\"xcuit-ios\""`}
193+
</CodeBlock>
194+
</div>
195+
196+
</TabItem>
197+
</Tabs>
198+
199+
:::info
200+
- Provide the path of your ios application in the above URL in place of `<PATH_OF_YOUR_TEST_SUITE_APP>`
201+
- Response of above cURL will be a **JSON** object containing the `App URL` of the format - `lt://APP123456789123456789` and will be used in the last step.
202+
:::
203+
204+
## Step 5: Executing The Test
205+
206+
- You will need **base64 encoded authentication** in order to execute your Espresso automation test suite. Enter your `username:accesskey` in **[Basic Authentication Header Generator](https://mixedanalytics.com/knowledge-base/api-connector-encode-credentials-to-base-64/)** to generate your auth token.
207+
208+
Take note of the base64 encoded authentication which needs to be added in the next step.
209+
210+
<div className="lambdatest__codeblock">
211+
<CodeBlock className="language-powershell">
212+
{`${ YOUR_LAMBDATEST_USERNAME()}:${ YOUR_LAMBDATEST_ACCESS_KEY()}`}
213+
</CodeBlock>
214+
</div>
215+
216+
- Once you have uploaded your app and test suite, you can execute your test by running the following command:
217+
218+
> Enter your **BASIC_AUTH_TOKEN**, **APP_ID** (generated in the fourth step) and **TEST_SUITE_ID** (generated in the fifth step) in the below command.
219+
220+
```javascript
221+
curl --location 'https://mobile-api.lambdatest.com/framework/v1/xcui/build' \
222+
--header 'Authorization: Basic BASIC_AUTH_TOKEN' \
223+
--header 'Content-Type: application/json' \
224+
--data '{
225+
"app" : "lAPP_ID", //enter your app-id
226+
"testSuite": "TEST_SUITE_ID", //enter your test-suite id
227+
"device" : ["iPhone 13-16"], //enter your device names
228+
"smartUI.project": "XCUI-SmartUI-Project",
229+
"build" : "Proverbial-XCUITest",
230+
"video" : true,
231+
"queueTimeout": 10800,
232+
"idleTimeout": 150,
233+
"devicelog": true,
234+
"network": false,
235+
"only-testing" : ["LambdaUiKitIOSUITestsLaunchTests"],
236+
"smartUI.cropStatusBar" : true,
237+
"smartUI.cropNavigationBar" : true
238+
}'
239+
```
240+
241+
> You can check the executed builds over at [LambdaTest SmartUI](https://smartui.lambdatest.com/).
242+
243+
## Smart Crop With SmartUI
244+
245+
The all-new **Real Device mobile notification status bar and navigation bar crop** feature in SmartUI allows you to take your visual regression testing workflows to the next level. With Smart Crop, you can crop the status bar and navigation bar or footer from screenshots, enabling them to focus solely on the core UI elements during visual comparisons.
246+
247+
By leveraging machine learning algorithms, it accurately detects and crops the status bar and navigation bar from screenshots. With precise image processing techniques, SmartUI precisely identifies the location of status bar elements. By excluding it from visual comparisons, the focus is solely on critical UI elements.
248+
249+
| Original Screenshot | Cropped Screenshot |
250+
|---------------------|--------------------|
251+
| <img loading="lazy" src={require('../assets/images/smart-visual-testing/screenshot.webp').default} alt="Profile" width="1360" height="603" className="doc_img"/> | <img loading="lazy" src={require('../assets/images/smart-visual-testing/cropped_ss.jpg').default} alt="Profile" width="1360" height="603" className="doc_img"/> |

‎sidebars.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2845,6 +2845,7 @@ module.exports = {
28452845
"smartui-k6-setup",
28462846
"appium-visual-regression",
28472847
"espresso-visual-regression",
2848+
"xcui-visual-regression",
28482849
]
28492850
},
28502851
]

0 commit comments

Comments
 (0)