Execute Cypress.io script in GitHub with Jenkins

When your product code base is getting expanded, and the number of people who are working on that code base is getting increased, you may find it very hard to manage the code repositories without any risk of errors. To resolve this issue, Jenkins was introduced.

Prerequisites:

• Java
• Cypress script
• Github
• Jenkins

What is Jenkins?

Jenkins is an open-source Continuous Integration / Continuous Delivery and Deployment software.

Continuous Integration

Continuous Integration enables the developers to maintain certain criteria for merging the code changes with the main branch repository. If the criteria weren’t met, then the Jenkins execution will throw an error and ask to make changes. This will avoid the error code getting merged into the main repo.

Continuous Delivery

Once the Continuous Integration is completed, the next step will be continuous Delivery. In this step, the application is delivered with all the packages that will be needed for deploying the same in the production or test environment.

Continuous Deployment

As the name implies, the application will be deployed either in the production or testing server at this step.

Jenkins installation

To get Jenkins installed, make sure that you have Java installed on your machine as it is a Java Java-based application.

Execute the below commands to get Jenkins installed on your Linux machine:

sudo wget -O /usr/share/keyrings/jenkins-keyring.asc \
  https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key
echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
  https://pkg.jenkins.io/debian-stable binary/ | sudo tee \
  /etc/apt/sources.list.d/jenkins.list > /dev/null
sudo apt-get update
sudo apt-get install jenkins

For other OS, you can go through the Jenkins official website to get it installed — click here

You can start your Jenkins instance with the below command,

sudo systemctl start jenkins

To check whether you have Jenkins getting executed in you machine, please execute the following command from terminal,

sudo systemctl status jenkins

Setting up Jenkins

Try to open the following URL from your machine browser,

http://localhost:8080

To get the admin password, use the following command,

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

After providing the password, you are done with the Jenkins setup.

Create Cypress.io code

Hope you have the Cypress setup ready, if not get it installed by referring here — Documentation

Then once the setup is ready, copy and paste the below code into your initially created spec file.

describe('template spec', () => {
  it('passes', () => {
    cy.visit('https://google.com')
    cy.get('.SDkEP').type('javascript')
    cy.get('.G43f7e > li > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > span:nth-child(1)').each(ele =>{
      // cy.log(ele)
      let textSearch = "javascript basics"
      cy.log(ele.text())
      // let elementText = ele.text.innerHTML
      if(ele.text().includes(textSearch))
      {
        ele.trigger('click')
      }

    })
  })
})

With the above script, we are trying to type Javascript in Google search engine and trying to select the perfectly matched text from the suggestion box.

A detailed explanation of the above script can be found here — blog link

Adding Jenkinsfile into our code base

• To execute our script from Jenkins, we need an additional file named Jenkinsfile.
• Create a new file inside our project folder named “Jenkinsfile”
• Add the following script to it,

pipeline {
    agent any
    stages {
        stage('Build') { 
            steps {
                sh 'npm install'
                sh 'npx cypress run' 
            }
        }
    }
}

• With the above script, we are asking the Jenkins to install the node packages required and then we are executing the cypress script

Adding .gitignore file

• There are a few more things that we need not be uploaded into our GitHub repository.
• To avoid the node_modules folder and package-lock.json file getting added to our repository, we are giving it into the .gitignore file as below,

Upload script into GitHub repository

If you don’t have GitHub installed on your machine, then refer to the document — here

To initialize git in your project folder, move inside the project folder and give the following command,

git init

• Create an account in GitHub and create a new repository — click here

• Now inside the project folder from the terminal, execute the following command to push your code in local git into the remote GitHub repository

git commit -m "first commit"
git branch -M master
git remote add origin <your github repository link here>
git push -u origin master

If you are facing any issue while pushing code into GitHub repository, please refer — this link

Creating Jenkins Pipeline

• Now let us set our Jenkins pipeline to execute scripts
• Move to the Jenkins URL
• In the Jenkins home screen, select New Item

• Give a name for the new item name and select Pipeline as an option and press the OK button,

Configuring Jenkins to get script from GitHub

• Under Pipeline, select Definition as “Pipeline script from SCM”

• Under SCM select the option as Git,

• Provide your GitHub repository URL under the Repository URL textbox.

• You can also specify the branch for which you want to execute.
• Also, you can specify the Jenkinsfile script path if you have it somewhere inside the folder. In our case, we have it inside the project folder so we need not alter it.
• Click on the save button.

Execute the script from Jenkins

• Now you have the setup ready let us execute the job by clicking on the “Build now” option inside our job.
• Once the build is triggered, you can visit the “console log” it by clicking on the dotted icon near the job triggered,

• You can view the entire log of the execution inside the console log like below,

Hurray!!! We have successfully executed the automation script from Jenkins with the help of our Jenkinsfile. You can view this complete code here in this — GitHub repository.