Skip to content

Commit fb05b95

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request #1127 from Ishavyas9/main
smartui cicd updated
2 parents f8b38ae + b846c61 commit fb05b95

File tree

10 files changed

+508
-32
lines changed

10 files changed

+508
-32
lines changed

‎assets/images/smart-visual-testing/ci-cd-integration/semaphore/1.gif‎

362 KB
Loading

‎docs/kane-ai-web-test.md‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,16 @@ For example:
5555
- Visit the website "www.lambdatest.com"
5656
- Click on the Login button.
5757

58-
Keep adding instructions/commands in plain English as you go; KaneAI will automatically queue them up for execution, so you don't have to wait for one test to finish before writing the next. Click on the **Finish Test** button.
58+
Keep adding tests in plain English as you go; KaneAI will automatically queue them up for execution, so you don't have to wait for one test to finish before writing the next. Click on the **Fininsh Test** button.
5959
> **Remember:** The more specific you are, the more accurate KaneAI's generated test cases will be.
6060
6161
<img loading="lazy" src={require('../assets/images/kane-ai/write-web-test.gif').default} alt="Image" width="1347" height="616" className="doc_img"/>
6262

6363
### Step 3: Save your Test Case
6464
Now, save your test cases that you have generated till now.
6565

66-
Select your Project, and the folder in which you want to store your test cases. The **Test Name** and the **Description** will be generated automatically, and you can also edit it. Select the **Type** of your test, and the **Status**, and define the necessary tags which will help ypu to search your tests later.
66+
Select your Project, and the folder in which you want to store your test cases. The **Test Name** and the **Description** will be generated automatically, and you can also edit it. Select the **Type** of your test, and the status, and define the necessary tags which will help ypu to search your tests later.
6767
<img loading="lazy" src={require('../assets/images/kane-ai/save-test.png').default} alt="Image" width="1347" height="616" className="doc_img"/>
6868

6969
### Step 4: Execute your test
70-
To execute your test, click on the **HyperExecute** button and you will be redirected to the [HyperExecute dashboard](https://hyperexecute.lambdatest.com/hyperexecute/jobs) where your tests will be executed.
71-
72-
Click on the view test button and you will be redirect to the automation dashboard from where you can check all the commands executed, logs, meta data and video of the test executed.
73-
74-
<img loading="lazy" src={require('../assets/images/kane-ai/execute-test.gif').default} alt="Image" width="1347" height="616" className="doc_img"/>
70+
<img loading="lazy" src={require('../assets/images/kane-ai/execute-test.gif').default} alt="Image" width="1347" height="616" className="doc_img"/>

‎docs/smartui-cli-env-variables.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,30 @@ Welcome to the world of simplified visual testing with the SmartUI SDK.
5353

5454
This guide is designed to provide you with comprehensive information about the various environment variables options available within the SmartUI SDK. SmartUI retrieves additional details from the environment it is running in, like the branch name, baseline branch,proxies etc. You can modify certain aspects of SmartUI behavior by configuring these environment variables within your CI environment:
5555

56+
## 1. Setting the Project Name
57+
58+
Set the Project Name you want to add the current build run to by exporting these environment variables:
59+
60+
<Tabs className="docs__val" groupId="language">
61+
<TabItem value="MacOS/Linux" label="MacOS/Linux" default>
62+
63+
```bash
64+
export LT_USERNAME="YOUR USERNAME"
65+
export LT_ACCESS_KEY="YOUR ACCESS KEY"
66+
export PROJECT_NAME="Required Project Name"
67+
```
68+
</TabItem>
69+
<TabItem value="Windows" label="Windows" default>
70+
71+
```bash
72+
set LT_USERNAME="YOUR USERNAME"
73+
set LT_ACCESS_KEY="YOUR ACCESS KEY"
74+
set PROJECT_NAME="Required Project Name"
75+
```
76+
</TabItem>
77+
</Tabs>
78+
79+
> If you specify a project name that doesn't already exist, a new project will be created by the user whose authentication is added in the environment.
5680
5781

5882
## 1. Setting the Baseline Branch

‎docs/smartui-with-azure.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
id: smartui-with-azure
3+
title: Azure Pipeline Integration with SmartUI
4+
sidebar_label: Azure
5+
description: SmartUI now integrates with Azure Pipeline to boost pipeline delivery. Perform automated cross browser testing with SmartUI to seamlessly providing 3000+ real browsers running through machines.
6+
keywords:
7+
- lambdatest integrations
8+
- smart ui integration
9+
- smart ui integrations with ci/cd tools
10+
- ci/cd tools
11+
- continuous integration,continuous delivery
12+
- continuous integration tools
13+
- azure ci cd
14+
url: https://www.lambdatest.com/support/docs/smartui-with-azure/
15+
site_name: LambdaTest
16+
slug: smartui-with-azure/
17+
---
18+
19+
<script type="application/ld+json"
20+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
21+
"@context": "https://schema.org",
22+
"@type": "BreadcrumbList",
23+
"itemListElement": [{
24+
"@type": "ListItem",
25+
"position": 1,
26+
"name": "LambdaTest",
27+
"item": "https://www.lambdatest.com"
28+
},{
29+
"@type": "ListItem",
30+
"position": 2,
31+
"name": "Support",
32+
"item": "https://www.lambdatest.com/support/docs/"
33+
},{
34+
"@type": "ListItem",
35+
"position": 3,
36+
"name": "Azure Integration",
37+
"item": "https://www.lambdatest.com/support/docs/smartui-with-azure/"
38+
}]
39+
})
40+
}}
41+
></script>
42+
Azure Pipelines is a cloud-based CI/CD service offered by Microsoft, part of the Azure DevOps suite. It helps automate the process of building, testing, and deploying applications to various platforms.
43+
44+
This guide explains how to integrate your project with the Azure CI/CD pipeline to trigger visual regression testing with LambdaTest SmartUI whenever changes are made to your repository.
45+
46+
## Steps to Integrate Azure Pipeline with SmartUI
47+
To integrate Azure Pipeline with SmartUI, follow the below steps. You can use your own project to configure and test it. For demo purposes, we are using the sample repository.
48+
49+
:::tip Sample repo
50+
Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI.
51+
52+
<a href="https://github.com/amanchopra1905/smartui-ci-cd-integrations" 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>
53+
:::
54+
55+
56+
### Step 1: Set Up Your Repository
57+
Ensure your project is hosted in Azure Repos, GitHub, or any supported repository.
58+
59+
### Step 2: Create a New Pipeline:
60+
61+
- Navigate to Pipelines in your Azure DevOps project.
62+
- Select New Pipeline and connect your repository.
63+
64+
### Step 3: Add Environment Variables
65+
66+
Go to Pipeline Settings > Variables. Add the following variables:
67+
- `LT_USERNAME`: Your LambdaTest username.
68+
- `LT_ACCESS_KEY`: Your LambdaTest access key.
69+
70+
### Step 4: Setup your Workflow
71+
```yaml title="azure-pipelines.yml"
72+
trigger:
73+
- '*'
74+
75+
variables:
76+
LT_USERNAME: $(LT_USERNAME)
77+
LT_ACCESS_KEY: $(LT_ACCESS_KEY)
78+
79+
jobs:
80+
- job: SmartUI_Tests
81+
pool:
82+
vmImage: 'ubuntu-latest'
83+
84+
steps:
85+
- task: UseNode@2
86+
inputs:
87+
version: '16.x'
88+
89+
- script: |
90+
echo "Installing dependencies"
91+
npm install @lambdatest/smartui-cli
92+
displayName: 'Install Dependencies'
93+
94+
- script: |
95+
echo "Running SmartUI tests"
96+
npx smartui --version
97+
npx smartui config:create smartui-web.json
98+
npx smartui --config smartui-web.json exec -- mvn --quiet test -D suite=sdk-cloud.xml
99+
displayName: 'Execute SmartUI Tests'
100+
```
101+
102+
### Step 5: Check the output
103+
104+
- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects)
105+
106+
<img loading="lazy" src={require('../assets/images/smart-visual-testing/ci-cd-integration/gitlab/3.png').default} alt="Create New Project" width="" height=""/>

‎docs/smartui-with-bitbucket.md‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -66,30 +66,8 @@ Download or Clone the code sample from the LambdaTest GitHub repository to run t
6666
- Now, write your workflow YAML file. Here is the sample file for your reference.
6767
- Commit this yaml file in your repository and make the required changes in your code to automatically trigger the pipeline.
6868

69-
```yaml title="bitbucket-pipelines.yml"
70-
image: maven:3.8.5-openjdk17 # Image with Maven and OpenJDK
71-
72-
pipelines:
73-
default:
74-
- step:
75-
name: Install Dependencies
76-
script:
77-
- mvn clean install # Installs project dependencies
78-
79-
- step:
80-
name: Configure SmartUI
81-
script:
82-
- npm install -g @lambdatest/smartui-cli # Install SmartUI CLI globally
83-
- npx smartui config:create .smartui.json # Generate SmartUI config file
84-
85-
- step:
86-
name: Run Visual Regression Tests
87-
script:
88-
# Set environment variables directly in the pipeline
89-
- export LT_USERNAME=${LT_USERNAME}
90-
- export LT_ACCESS_KEY=${LT_ACCESS_KEY}
91-
- export PROJECT_TOKEN=${PROJECT_TOKEN}
92-
- npx smartui --config .smartui.json exec -- mvn test -Dsuite=sdk-cloud.xml
69+
```yaml reference title="bitbucket-pipelines.yml"
70+
https://github.com/amanchopra1905/smartui-ci-cd-integrations/blob/bitbucket/bitbucket-pipelines.yml
9371
```
9472

9573
:::tip

‎docs/smartui-with-buildkite.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
id: smartui-with-buildkite
3+
title: Buildkite Pipeline Integration with SmartUI
4+
sidebar_label: Buildkite
5+
description: SmartUI now integrates with Buildkite Pipeline to boost pipeline delivery. Perform automated cross browser testing with SmartUI to seamlessly providing 3000+ real browsers running through machines.
6+
keywords:
7+
- lambdatest integrations
8+
- smart ui integration
9+
- smart ui integrations with ci/cd tools
10+
- ci/cd tools
11+
- continuous integration,continuous delivery
12+
- continuous integration tools
13+
- buildkite ci cd
14+
url: https://www.lambdatest.com/support/docs/smartui-with-buildkite/
15+
site_name: LambdaTest
16+
slug: smartui-with-buildkite/
17+
---
18+
19+
<script type="application/ld+json"
20+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
21+
"@context": "https://schema.org",
22+
"@type": "BreadcrumbList",
23+
"itemListElement": [{
24+
"@type": "ListItem",
25+
"position": 1,
26+
"name": "LambdaTest",
27+
"item": "https://www.lambdatest.com"
28+
},{
29+
"@type": "ListItem",
30+
"position": 2,
31+
"name": "Support",
32+
"item": "https://www.lambdatest.com/support/docs/"
33+
},{
34+
"@type": "ListItem",
35+
"position": 3,
36+
"name": "Buildkite Integration",
37+
"item": "https://www.lambdatest.com/support/docs/smartui-with-buildkite/"
38+
}]
39+
})
40+
}}
41+
></script>
42+
Buildkite is a hybrid CI/CD platform that allows you to run builds in your own infrastructure, alongside cloud-based execution. This means you can leverage the power of your existing machines or cloud resources to run builds.
43+
44+
This guide explains how to integrate your project with the Buildkite CI/CD pipeline to trigger visual regression testing with LambdaTest SmartUI whenever changes are made to your repository.
45+
46+
## Steps to Integrate Buildkite Pipeline with SmartUI
47+
To integrate Buildkite Pipeline with SmartUI, follow the below steps. You can use your own project to configure and test it. For demo purposes, we are using the sample repository.
48+
49+
:::tip Sample repo
50+
Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI.
51+
52+
<a href="https://github.com/amanchopra1905/smartui-ci-cd-integrations" 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>
53+
:::
54+
55+
### Step 1: Set Up Your Repository
56+
Ensure your project is hosted in GitHub, or any supported repository.
57+
58+
### Step 2: Create a New Pipeline:
59+
60+
- Navigate to Pipelines in your Buildkite project.
61+
- Select New Pipeline and connect your repository.
62+
63+
### Step 3: Add Environment Variables
64+
65+
Go to Pipeline Settings > Variables. Add the following variables:
66+
- `LT_USERNAME`: Your LambdaTest username.
67+
- `LT_ACCESS_KEY`: Your LambdaTest access key.
68+
69+
### Step 4: Setup your Workflow
70+
71+
```yaml title="pipeline.yml"
72+
steps:
73+
- label: "SmartUI Tests"
74+
agents:
75+
queue: "default"
76+
env:
77+
LT_USERNAME: "${LT_USERNAME}"
78+
LT_ACCESS_KEY: "${LT_ACCESS_KEY}"
79+
commands:
80+
- echo "Checking out code"
81+
- git clone <REPO_URL>
82+
- cd <PROJECT_DIRECTORY>
83+
- echo "Installing SmartUI CLI"
84+
- npm install @lambdatest/smartui-cli
85+
- echo "Running SmartUI tests"
86+
- npx smartui --version
87+
- npx smartui config:create smartui-web.json
88+
- npx smartui --config smartui-web.json exec -- mvn --quiet test -D suite=sdk-cloud.xml
89+
```
90+
91+
### Step 5: Check the output
92+
93+
- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects)
94+
95+
<img loading="lazy" src={require('../assets/images/smart-visual-testing/ci-cd-integration/gitlab/3.png').default} alt="Create New Project" width="" height=""/>

‎docs/smartui-with-circle-ci.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
id: smartui-with-circle-ci
3+
title: Circle CI Pipeline Integration with SmartUI
4+
sidebar_label: Circle CI
5+
description: SmartUI now integrates with Circle CI Pipeline to boost pipeline delivery. Perform automated cross browser testing with SmartUI to seamlessly providing 3000+ real browsers running through machines.
6+
keywords:
7+
- lambdatest integrations
8+
- smart ui integration
9+
- smart ui integrations with ci/cd tools
10+
- ci/cd tools
11+
- continuous integration,continuous delivery
12+
- continuous integration tools
13+
- circle-ci ci cd
14+
url: https://www.lambdatest.com/support/docs/smartui-with-circle-ci/
15+
site_name: LambdaTest
16+
slug: smartui-with-circle-ci/
17+
---
18+
19+
<script type="application/ld+json"
20+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
21+
"@context": "https://schema.org",
22+
"@type": "BreadcrumbList",
23+
"itemListElement": [{
24+
"@type": "ListItem",
25+
"position": 1,
26+
"name": "LambdaTest",
27+
"item": "https://www.lambdatest.com"
28+
},{
29+
"@type": "ListItem",
30+
"position": 2,
31+
"name": "Support",
32+
"item": "https://www.lambdatest.com/support/docs/"
33+
},{
34+
"@type": "ListItem",
35+
"position": 3,
36+
"name": "Circle CI Integration",
37+
"item": "https://www.lambdatest.com/support/docs/smartui-with-circle-ci/"
38+
}]
39+
})
40+
}}
41+
></script>
42+
CircleCI is a popular CI/CD tool known for its speed, flexibility, and seamless integration with version control systems like GitHub and Bitbucket. It is cloud-native and also offers an on-premises solution.
43+
44+
This guide explains how to integrate your project with the CircleCI CI/CD pipeline to trigger visual regression testing with LambdaTest SmartUI whenever changes are made to your repository.
45+
46+
## Steps to Integrate CircleCI Pipeline with SmartUI
47+
To integrate CircleCI Pipeline with SmartUI, follow the below steps. You can use your own project to configure and test it. For demo purposes, we are using the sample repository.
48+
49+
:::tip Sample repo
50+
Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI.
51+
52+
<a href="https://github.com/amanchopra1905/smartui-ci-cd-integrations" 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>
53+
:::
54+
55+
### Step 1: Set Up Your Repository
56+
Ensure your project is hosted in GitHub, or any supported repository.
57+
58+
### Step 2: Create a New Pipeline:
59+
60+
- Navigate to Pipelines in your CircleCI project.
61+
- Select New Pipeline and connect your repository.
62+
63+
### Step 3: Add Environment Variables
64+
65+
Go to Pipeline Settings > Variables. Add the following variables:
66+
- `LT_USERNAME`: Your LambdaTest username.
67+
- `LT_ACCESS_KEY`: Your LambdaTest access key.
68+
69+
### Step 4: Setup your Workflow
70+
71+
```yaml title=".circleci/config.yml"
72+
version: 2.1
73+
jobs:
74+
smartui_test:
75+
docker:
76+
- image: circleci/node:16
77+
environment:
78+
LT_USERNAME: $LT_USERNAME
79+
LT_ACCESS_KEY: $LT_ACCESS_KEY
80+
steps:
81+
- checkout
82+
- run:
83+
name: Install Dependencies
84+
command: npm install @lambdatest/smartui-cli
85+
- run:
86+
name: Execute SmartUI Tests
87+
command: |
88+
npx smartui --version
89+
npx smartui config:create smartui-web.json
90+
npx smartui --config smartui-web.json exec -- mvn --quiet test -D suite=sdk-cloud.xml
91+
92+
workflows:
93+
version: 2
94+
smartui_pipeline:
95+
jobs:
96+
- smartui_test
97+
```
98+
99+
### Step 5: Check the output
100+
101+
- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects)
102+
103+
<img loading="lazy" src={require('../assets/images/smart-visual-testing/ci-cd-integration/gitlab/3.png').default} alt="Create New Project" width="" height=""/>

0 commit comments

Comments
 (0)