diff --git a/assets/images/smart-visual-testing/ci-cd-integration/semaphore/1.gif b/assets/images/smart-visual-testing/ci-cd-integration/semaphore/1.gif new file mode 100644 index 000000000..43e5fbcf7 Binary files /dev/null and b/assets/images/smart-visual-testing/ci-cd-integration/semaphore/1.gif differ diff --git a/docs/kane-ai-web-test.md b/docs/kane-ai-web-test.md index 7065a6a89..e33c1635b 100644 --- a/docs/kane-ai-web-test.md +++ b/docs/kane-ai-web-test.md @@ -55,7 +55,7 @@ For example: - Visit the website "www.lambdatest.com" - Click on the Login button. -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. +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. > **Remember:** The more specific you are, the more accurate KaneAI's generated test cases will be. Image @@ -63,12 +63,8 @@ Keep adding instructions/commands in plain English as you go; KaneAI will automa ### Step 3: Save your Test Case Now, save your test cases that you have generated till now. -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. +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. Image ### Step 4: Execute your test -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. - -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. - Image diff --git a/docs/smartui-cli-env-variables.md b/docs/smartui-cli-env-variables.md index 9d79937be..9722a3e5d 100644 --- a/docs/smartui-cli-env-variables.md +++ b/docs/smartui-cli-env-variables.md @@ -55,7 +55,7 @@ This guide is designed to provide you with comprehensive information about the v ## 1. Setting the Project Name -Set the Project Name you want to add the current build run to by exporting these enviroment variables: +Set the Project Name you want to add the current build run to by exporting these environment variables: diff --git a/docs/smartui-with-azure.md b/docs/smartui-with-azure.md new file mode 100644 index 000000000..d1446097f --- /dev/null +++ b/docs/smartui-with-azure.md @@ -0,0 +1,106 @@ +--- +id: smartui-with-azure +title: Azure Pipeline Integration with SmartUI +sidebar_label: Azure +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. +keywords: + - lambdatest integrations + - smart ui integration + - smart ui integrations with ci/cd tools + - ci/cd tools + - continuous integration,continuous delivery + - continuous integration tools + - azure ci cd +url: https://www.lambdatest.com/support/docs/smartui-with-azure/ +site_name: LambdaTest +slug: smartui-with-azure/ +--- + + +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. + +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. + +## Steps to Integrate Azure Pipeline with SmartUI +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. + +:::tip Sample repo +Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI. + +Image View on GitHub +::: + + +### Step 1: Set Up Your Repository +Ensure your project is hosted in Azure Repos, GitHub, or any supported repository. + +### Step 2: Create a New Pipeline: + +- Navigate to Pipelines in your Azure DevOps project. +- Select New Pipeline and connect your repository. + +### Step 3: Add Environment Variables + +Go to Pipeline Settings > Variables. Add the following variables: +- `LT_USERNAME`: Your LambdaTest username. +- `LT_ACCESS_KEY`: Your LambdaTest access key. + +### Step 4: Setup your Workflow +```yaml title="azure-pipelines.yml" +trigger: + - '*' + +variables: + LT_USERNAME: $(LT_USERNAME) + LT_ACCESS_KEY: $(LT_ACCESS_KEY) + +jobs: +- job: SmartUI_Tests + pool: + vmImage: 'ubuntu-latest' + + steps: + - task: UseNode@2 + inputs: + version: '16.x' + + - script: | + echo "Installing dependencies" + npm install @lambdatest/smartui-cli + displayName: 'Install Dependencies' + + - script: | + echo "Running SmartUI tests" + npx smartui --version + npx smartui config:create smartui-web.json + npx smartui --config smartui-web.json exec -- mvn --quiet test -D suite=sdk-cloud.xml + displayName: 'Execute SmartUI Tests' +``` + +### Step 5: Check the output + +- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects) + +Create New Project \ No newline at end of file diff --git a/docs/smartui-with-bitbucket.md b/docs/smartui-with-bitbucket.md index 9c267c862..768f0f245 100644 --- a/docs/smartui-with-bitbucket.md +++ b/docs/smartui-with-bitbucket.md @@ -66,30 +66,8 @@ Download or Clone the code sample from the LambdaTest GitHub repository to run t - Now, write your workflow YAML file. Here is the sample file for your reference. - Commit this yaml file in your repository and make the required changes in your code to automatically trigger the pipeline. -```yaml title="bitbucket-pipelines.yml" -image: maven:3.8.5-openjdk17 # Image with Maven and OpenJDK - -pipelines: - default: - - step: - name: Install Dependencies - script: - - mvn clean install # Installs project dependencies - - - step: - name: Configure SmartUI - script: - - npm install -g @lambdatest/smartui-cli # Install SmartUI CLI globally - - npx smartui config:create .smartui.json # Generate SmartUI config file - - - step: - name: Run Visual Regression Tests - script: - # Set environment variables directly in the pipeline - - export LT_USERNAME=${LT_USERNAME} - - export LT_ACCESS_KEY=${LT_ACCESS_KEY} - - export PROJECT_TOKEN=${PROJECT_TOKEN} - - npx smartui --config .smartui.json exec -- mvn test -Dsuite=sdk-cloud.xml +```yaml reference title="bitbucket-pipelines.yml" +https://github.com/amanchopra1905/smartui-ci-cd-integrations/blob/bitbucket/bitbucket-pipelines.yml ``` :::tip diff --git a/docs/smartui-with-buildkite.md b/docs/smartui-with-buildkite.md new file mode 100644 index 000000000..f14f80279 --- /dev/null +++ b/docs/smartui-with-buildkite.md @@ -0,0 +1,95 @@ +--- +id: smartui-with-buildkite +title: Buildkite Pipeline Integration with SmartUI +sidebar_label: Buildkite +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. +keywords: + - lambdatest integrations + - smart ui integration + - smart ui integrations with ci/cd tools + - ci/cd tools + - continuous integration,continuous delivery + - continuous integration tools + - buildkite ci cd +url: https://www.lambdatest.com/support/docs/smartui-with-buildkite/ +site_name: LambdaTest +slug: smartui-with-buildkite/ +--- + + +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. + +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. + +## Steps to Integrate Buildkite Pipeline with SmartUI +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. + +:::tip Sample repo +Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI. + +Image View on GitHub +::: + +### Step 1: Set Up Your Repository +Ensure your project is hosted in GitHub, or any supported repository. + +### Step 2: Create a New Pipeline: + +- Navigate to Pipelines in your Buildkite project. +- Select New Pipeline and connect your repository. + +### Step 3: Add Environment Variables + +Go to Pipeline Settings > Variables. Add the following variables: +- `LT_USERNAME`: Your LambdaTest username. +- `LT_ACCESS_KEY`: Your LambdaTest access key. + +### Step 4: Setup your Workflow + +```yaml title="pipeline.yml" +steps: + - label: "SmartUI Tests" + agents: + queue: "default" + env: + LT_USERNAME: "${LT_USERNAME}" + LT_ACCESS_KEY: "${LT_ACCESS_KEY}" + commands: + - echo "Checking out code" + - git clone + - cd + - echo "Installing SmartUI CLI" + - npm install @lambdatest/smartui-cli + - echo "Running SmartUI tests" + - npx smartui --version + - npx smartui config:create smartui-web.json + - npx smartui --config smartui-web.json exec -- mvn --quiet test -D suite=sdk-cloud.xml +``` + +### Step 5: Check the output + +- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects) + +Create New Project \ No newline at end of file diff --git a/docs/smartui-with-circle-ci.md b/docs/smartui-with-circle-ci.md new file mode 100644 index 000000000..d6418c7c5 --- /dev/null +++ b/docs/smartui-with-circle-ci.md @@ -0,0 +1,103 @@ +--- +id: smartui-with-circle-ci +title: Circle CI Pipeline Integration with SmartUI +sidebar_label: Circle CI +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. +keywords: + - lambdatest integrations + - smart ui integration + - smart ui integrations with ci/cd tools + - ci/cd tools + - continuous integration,continuous delivery + - continuous integration tools + - circle-ci ci cd +url: https://www.lambdatest.com/support/docs/smartui-with-circle-ci/ +site_name: LambdaTest +slug: smartui-with-circle-ci/ +--- + + +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. + +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. + +## Steps to Integrate CircleCI Pipeline with SmartUI +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. + +:::tip Sample repo +Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI. + +Image View on GitHub +::: + +### Step 1: Set Up Your Repository +Ensure your project is hosted in GitHub, or any supported repository. + +### Step 2: Create a New Pipeline: + +- Navigate to Pipelines in your CircleCI project. +- Select New Pipeline and connect your repository. + +### Step 3: Add Environment Variables + +Go to Pipeline Settings > Variables. Add the following variables: +- `LT_USERNAME`: Your LambdaTest username. +- `LT_ACCESS_KEY`: Your LambdaTest access key. + +### Step 4: Setup your Workflow + +```yaml title=".circleci/config.yml" +version: 2.1 +jobs: + smartui_test: + docker: + - image: circleci/node:16 + environment: + LT_USERNAME: $LT_USERNAME + LT_ACCESS_KEY: $LT_ACCESS_KEY + steps: + - checkout + - run: + name: Install Dependencies + command: npm install @lambdatest/smartui-cli + - run: + name: Execute SmartUI Tests + command: | + npx smartui --version + npx smartui config:create smartui-web.json + npx smartui --config smartui-web.json exec -- mvn --quiet test -D suite=sdk-cloud.xml + +workflows: + version: 2 + smartui_pipeline: + jobs: + - smartui_test +``` + +### Step 5: Check the output + +- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects) + +Create New Project \ No newline at end of file diff --git a/docs/smartui-with-semaphore.md b/docs/smartui-with-semaphore.md new file mode 100644 index 000000000..cc6c5e27c --- /dev/null +++ b/docs/smartui-with-semaphore.md @@ -0,0 +1,75 @@ +--- +id: smartui-with-semaphore +title: Semaphore Pipeline Integration with SmartUI +sidebar_label: Semaphore +description: SmartUI now integrates with Semaphore Pipeline to boost pipeline delivery. Perform automated cross browser testing with SmartUI to seamlessly providing 3000+ real browsers running through machines. +keywords: + - lambdatest integrations + - smart ui integration + - smart ui integrations with ci/cd tools + - ci/cd tools + - continuous integration,continuous delivery + - continuous integration tools + - semaphore ci cd +url: https://www.lambdatest.com/support/docs/smartui-with-semaphore/ +site_name: LambdaTest +slug: smartui-with-semaphore/ +--- + + +Semaphore is a modern CI/CD (Continuous Integration and Continuous Delivery) platform designed for developers to automate the process of building, testing, and deploying software. + +This guide explains how to integrate your project with the Semaphore CI/CD pipeline to trigger visual regression testing with LambdaTest SmartUI whenever changes are made to your repository. + +## Steps to Integrate Semaphore Pipeline with SmartUI +To integrate Semaphore 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. + +:::tip Sample repo +Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI. + +Image View on GitHub +::: + +### Step 1: Create your Project +- Click on the **Create New** >> **Choose Repository**. +- Select your desired repository from your VCS (GitHub or Bitbucket) +Create New Project + +### Step 2: Setup your Workflow +- Select your desired build tool and edit your workflow as per your requirement. A sample workflow is given for your reference: +- Click on **Run the Workflow** button to trigger your tests +```yaml reference title="semaphore.yml" +https://github.com/amanchopra1905/smartui-ci-cd-integrations/blob/semaphore/.semaphore/semaphore.yml +``` + +:::tip +You can also store your *LT_USERNAME*, *LT_ACCESS_KEY* and *PROJECT_TOKEN* as secrets in your Semaphore project repository. +::: + +### Step 3: Check the output + +- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects) + +Create New Project \ No newline at end of file diff --git a/docs/smartui-with-travis-ci.md b/docs/smartui-with-travis-ci.md new file mode 100644 index 000000000..8c4726d23 --- /dev/null +++ b/docs/smartui-with-travis-ci.md @@ -0,0 +1,94 @@ +--- +id: smartui-with-travis-ci +title: Travis CI Pipeline Integration with SmartUI +sidebar_label: Travis CI +description: SmartUI now integrates with Travis CI Pipeline to boost pipeline delivery. Perform automated cross browser testing with SmartUI to seamlessly providing 3000+ real browsers running through machines. +keywords: + - lambdatest integrations + - smart ui integration + - smart ui integrations with ci/cd tools + - ci/cd tools + - continuous integration,continuous delivery + - continuous integration tools + - Travis CI ci cd +url: https://www.lambdatest.com/support/docs/smartui-with-travis-ci/ +site_name: LambdaTest +slug: smartui-with-travis-ci/ +--- + + +Travis CI is one of the most popular CI/CD platforms, known for its simplicity and support for open-source projects. It provides continuous integration for projects hosted on GitHub and Bitbucket. + +This guide explains how to integrate your project with the Travis CI CI/CD pipeline to trigger visual regression testing with LambdaTest SmartUI whenever changes are made to your repository. + +## Steps to Integrate Travis CI Pipeline with SmartUI +To integrate Travis CI 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. + +:::tip Sample repo +Download or Clone the code sample from the LambdaTest GitHub repository to run the tests on the SmartUI. + +Image View on GitHub +::: + +### Step 1: Set Up Your Repository +Ensure your project is hosted in GitHub, or any supported repository. + +### Step 2: Create a New Pipeline: + +- Navigate to Pipelines in your TravisCI project. +- Select New Pipeline and connect your repository. + +### Step 3: Add Environment Variables + +Go to Pipeline Settings > Variables. Add the following variables: +- `LT_USERNAME`: Your LambdaTest username. +- `LT_ACCESS_KEY`: Your LambdaTest access key. + +### Step 4: Setup your Workflow + +```yaml title=".travis.yml" +language: node_js +node_js: + - "16" + +env: + global: + - LT_USERNAME=${LT_USERNAME} + - LT_ACCESS_KEY=${LT_ACCESS_KEY} + +script: + - echo "Installing SmartUI CLI" + - npm install @lambdatest/smartui-cli + - echo "Running SmartUI tests" + - npx smartui --version + - npx smartui config:create smartui-web.json + - npx smartui --config smartui-web.json exec -- mvn --quiet test -D suite=sdk-cloud.xml +``` + +### Step 5: Check the output + +- After triggering the workflow, check your results in the [Smart UI Dashboard](https://smartui.lambdatest.com/projects) + +Create New Project \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index c635295e3..7210d3e10 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2839,7 +2839,12 @@ module.exports = { items: [ "smartui-with-github-actions", "smartui-with-gitlab", - "smartui-with-bitbucket" + "smartui-with-bitbucket", + "smartui-with-semaphore", + "smartui-with-azure", + "smartui-with-buildkite", + "smartui-with-circle-ci", + "smartui-with-travis-ci" ], }, {