Setup CI/CD Pipeline with GitHub Actions and Docker Image For Cypress Test cases 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 and Run Cypress Test cases on GitHub-hosted virtual machines
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
A 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/github-action@v2.9.7
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.”
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.
Step 6
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 locally
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 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/
☕️ Happy testing! ☕️
For more blogs on Cypress please follow the below link
