QA Automation Labs

Setup CI/CD Pipeline with GitHub Actions and Docker Image For Cypress Test case execution

1_xjP18UPK27NG_9Zn-9ApBQ

Setup CI/CD Pipeline with GitHub Actions and Docker Image For Cypress Test case execution

This blog cover TWO part

In the first part, we will explain how we can run our test cases in GitHub-hosted virtual machines with CI/CD GitHub action.

In the SECOND part will explain how we can run cypress test cases in Docker container with CI/CD GitHub action

What are GitHub Actions

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository or deploy merged pull requests to production.

GitHub Actions goes beyond just DevOps and lets you run workflows when other events happen in your repository. For example, you can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository. GitHub provides Linux, Windows, and macOS virtual machines to run your workflows, or you can host your own self-hosted runners in your own data center or cloud infrastructure.

Set Up CI/CD GitHub Action

Pre-condition :

User should have a GitHub account and already logged in

Step 1

Create a repository in my case let’s say “cypress_github_Action”.Initially, there is no code in created repo

Step 2

Push the code to the newly created repo. Below is a simple test case where we searched some data and verified it.

Code snippet is below

/// <reference types=”cypress” />

describe(“Open and Search in the site”, () => {

it(“Open URL”, () => {

cy.visit(“https://qaautomationlabs.com/”);

});

it(“Click on Read More “, () => {

cy.get(“.staticslider-button”).click();

});

it(“Verify Particular Blog “, () => {

cy.contains(“How to Setup And Run Cypress Test Cases in Google Cloud?”);

});

it(“Click on Blogs”, () => {

cy.contains(“Blog”).scrollIntoView().click({ force: true });

});

it(“Search the data”, () => {

cy.get(‘[id=”wp-block-search__input-2″]’).scrollIntoView();

cy.get(‘[id=”wp-block-search__input-2″]’).click({ force: true }) .type(“cypress”);

cy.get(‘[id=”search-icon”]’).click({ force: true });

cy.contains(“Search Results for: cypress”);

});});

Step 3

After pushing the code click on the “Actions” Tab

Step 4

After clicking on Actions Tab go to the bottom and click on Configure under Automation -> Manual workflow Section (Highlighted below)

Workflow

workflow is a configurable automated process that will run one or more jobs. Workflows are defined by a YAML file checked into your repository and will run when triggered by an event in your repository, or they can be triggered manually, or at a defined schedule. Workflows are defined in the .github/workflows directory in a repository,

Under project/.github/workflow/manual.yml created

Step 5

Update the manual.yml with the below code. We can update the .yml name as per your convenience.

# This is a basic workflow that is manually triggered

name: Cypress test in GitHub Action
on: [push]

jobs:
my_job:
name: deploy to staging
runs-on: ubuntu-18.04
steps:
— name: Checkout
uses: actions/checkout@v1

– name: cyress test cases
uses: cypress-io/[email protected]
with:
start: npm start

Explanation of lines used above

Line#3 name: Name of the workflow.

Line#4 on: The on keyword lets you define the events that trigger when the workflow is run. For more information, see “Triggering a workflow.” . We can use on keywords with the appropriate event as per our project requirement

Line#6 Jobs: Groups together all the jobs that run in the workflow file.

Line#7,#8 #9: Name of the Job and system on which job will run in this case Job will run in ubuntu

Line#10 steps: Groups together all the steps that you will run as part of the job. Each job in a workflow has its own steps section.

Line #11,#12: The uses keyword tells the job to retrieve the action named actions/checkout. This is an action that checks out your repository and downloads it to the runner.

Finally Line #16 and #17, our Cypress GitHub Action will:

  • Install npm dependencies
  • Start the project web server (npm start)
  • Run the Cypress tests within our GitHub repository within Electron.

Run Cypress Test cases on GitHub-hosted virtual machines

As we push the code workflow starts to run automatically

Click on deploy to staging

In the Below screenshot, we can see Cypress test cases start running in GitHub-hosted virtual machines

We have one test case to run once all test cases are executed check icon becomes GREEN

Click “cypress test cases” in the below screenshot we can see we have one test case that is executed successfully

Run Cypress Test cases in GitHub Actions with Docker Images

GitHub Actions provides the option to specify a container image for the job. Cypress offers various Docker Images for running Cypress test cases in CI.

Below we add the container using a Cypress Docker Image built with Google Chrome

Step 1

Update the existing manual.yml file with containers

name: Run Cypress Tests using Cypress Docker Image

on: [push]

jobs:
cypress-run:
runs-on: ubuntu-latest

# specify the cypress contained with node
container: cypress/browsers:node12.18.3-chrome87-ff82
steps:
— name: Checkout
uses: actions/checkout@v2

# Install NPM dependencies,
# and run all Cypress tests
— name: Cypress run
uses: cypress-io/github-action@v4
with:
# Specify Browser since container image is compiled with chrome
browser: Chrome

Step 2

Push the code as we push the code build to start triggering. In the below screenshot, we can see docker is initialized

In the Next step, the code is checkout from the .git

Once code checkout cypress test cases start executing in the Docker image

Finally, Test cases are executed successfully in the docker image

Once all test cases are executed container is stopped

Reference

https://docs.cypress.io/guides/

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More
image

Enhance Testing Workflows with HTML Allure Reports in Cypress

Allure Report is the utility that processes test results collected by a compatible test framework and produces an HTML report. Allure Report is i
Read More