Cypress E2E testing with Azure pipeline

By Qautomation on August 12, 2020 • ( 1 Comment )

Cypress is is a next-generation front end/UI testing tool constructed for the modern web and it is very popular for Web integration and End to End UI test automation, Now a days most of organization following Agile development methodology for rapid software development,in which sprint are short duration which required testing to be completed in short span of time ,so QA are using CI/CD pipeline practises to execute the test cases .

This post explore Cypress E2E testing with azure pipeline

Parallel execution
Cross Browser Testing (Using Chrome,FireFox & Edge)

We will execute the same test on 3 different browsers(Chrome,FireFox & Edge) in parallel.

one can find the project at github @ https://github.com/QACodeDev/cypress-pipeline-demo

I am usingg https://example.cypress.io as sample application .

Prerequisite

1.Azure DevOps account

2.Cypress project with azure yaml for pipeline

Installation

Create a project directory and Clone the project: git clone https://github.com/QACodeDev/cypress-pipeline-demo.git on your local to modify as per your application and requirement and also fork the repo on your git account for creating a azure pipeline.
Under the project directory install the followings: npm install

Create Azure Pipeline

We will create a pipeline through yaml file which is saved with cypress project.

From the dashboard, select Pipelines then on Builds.

2. You will see a message telling you there are no build pipelines found yet. Click on New pipeline to begin creating the build pipeline.

No build pipelines bound yet. Creating a new pipeline.

3. You will then be prompted for where your code is stored. In this Project, the code is stored in a GitHub repository. Select GitHub. This is the place where code is stored and the triggers for invoking the build will come from.

4. Once you click on GitHub, you’ll be prompted to provide your GitHub account credentials as shown below.

5. Next, confirm the step where you are asked to authorize Azure Pipelines. This ensures Azure DevOps has permission to access your GitHub repos.

6.Select the repository

7.Allow the project to read, write and check source code from the repository you selected earlier. Then confirm this process by clicking Approve & Install.

8. azure pipeline yaml file will be displayed .

name: 'Cypress E2E Testing'

trigger:
- master
- dev

schedules:
- cron: "0 6 * * *"
  displayName: Each morning at 6am
  branches:
    include:
    - dev

variables:
- ${{ if eq(variables['build.SourceBranchName'], 'master') }}:
  - group: vargroup-master
- ${{ if ne(variables['build.SourceBranchName'], 'master') }}:
  - group: vargroup-dev
- name: npm_config_cache
  value: $(Pipeline.Workspace)/.npm
- name: CYPRESS_CACHE_FOLDER # Overrides the default cache location
  value: $(Pipeline.Workspace)/.cache/Cypress

stages:
- stage: e2e_testing_stage_chrome
  displayName: 'Chrome E2E Testing'
  jobs:
  - job: e2e_testing_job_chrome
    displayName: 'Run E2E in Chrome'
    pool:
      vmImage: macos-latest
    steps:
      - template: devops/e2e.testing.yml
        parameters:
          browserType: chrome

- stage: e2e_testing_stage_firefox
  displayName: 'Firefox E2E Testing'
  dependsOn: []
  jobs:
  - job: e2e_testing_job_firefox
    displayName: 'Run E2E in Firefox'
    pool:
      vmImage: macos-latest
    steps:
      - template: devops/e2e.testing.yml
        parameters:
          browserType: firefox
          
- stage: e2e_testing_stage_edge
  displayName: 'Edge E2E Testing'
  dependsOn: []
  jobs:  
  - job: e2e_testing_job_edge
    displayName: 'Run E2E in Edge'
    pool:
      vmImage: macos-latest
    steps:
      - template: devops/e2e.testing.yml
        parameters:
          browserType: edge

9.Start by creating a new variable group on Azure DevOps. I use two, one for my DEV branch and one for my master branch. If you only want to use one branch or one environment, you can remove the dynamic grouping expression in the azure-pipelines.yml file. Add the following variables to the group: CI: true cypress_project_id: – the ID of the project Cypress gave you. cypress_record_key: – If you want to record to Cypress.io. verbose: true or false – Allows you to run the pipeline in verbose mode, and will add some extra logging. Cypress will also run in DEBUG mode by setting it to true. In the azure-pipelines.yml file, update the dynamic group name variables from vargroup-master and vargroup-dev to your corresponding group names.