Skip to content

Commit 56a5980

Browse files
Aman1905Aman1905
committed
smartui cicd updated
1 parent 3c8ab8a commit 56a5980

File tree

8 files changed

+481
-25
lines changed

8 files changed

+481
-25
lines changed

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

362 KB
Loading

‎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)