Photo by freestocks on Unsplash
Testing
When it comes to testing, we always want to believe that we will be using a lot of tools, and we will be able to use them in the right way. However, we would love to see new outcomes and try to find bugs before the end-user will find them.
For this reason, I would love to share with you my thoughts about Cypress vs any other tool that is out there.
According to Wikipedia Software testing is an investigation conducted to provide stakeholders with information about the quality of the software product or service under test.
Cypress
Cypress.io Fast, easy and reliable testing for anything that runs in a browser. Install Cypress in seconds and take the pain out of front-end testing. By using this tool, you can show others how easy can be to test and how easy is to share your test case scenarios. Also, the diversity of tools that you can use to make your job a little bit easier.
Integration Tools
Right now, I will give you a better idea of what tools can be used, and what tools we should use to run our test.
The best example is to go through Github, and Actions since this is a way that you can automate your test and share it with others. The best thing about using Github actions is that we can share our testing and we can do a quicker sprint since you don’t have to send your code for review instead, you will push your test scenarios to your Pipeline and you will be able to see if this tests will pass or will fail.
GitHub Actions Example
Let’s start with child steps to make sure any beginner will know how to start with this.
1.- Create a local directory on your machine:
mkdir [directory_name]
2.- CD into your local directory
cd [directory_name]
3.- Start an NPM project
npm init -y
4.- Install cypress
npm install cypress --save-dev
5.- Run Cypress
npx cypress open "or" ./node_modules/.bin/cypress open
6.-Stop Cypress
control + c
7.- Now, you will have to login to Github & create a repo. After you created your repo, you will have to make sure to add all of the commands needed to be able to take your code into that repository.
8.- Now, if you make any updates, you will have to make sure to run the following commands:
git add .
git commit -m "[Any_message]"
git push
9.- Inside of your github account, you will have to click on actions:
10.- Now, you have two different options where you can choose to set up your workflow yourself or you can choose the node.js configuration.
In my case, I will choose Node.js since we are using and npm, Inc. library. My code for this file is the following:
name: End-to-end tests
on: [push]
jobs:
cypress-run:
runs-on: ubuntu-16.04
steps:
- name: Checkout
uses: actions/checkout@v1
# Install NPM dependencies, cache them correctly
# and run all Cypress tests
- name: Cypress run
uses: cypress-io/github-action@v2
- name: Run Cypress tests
run: npm run test:chrome
continue-on-error: false
- name: Copy test execution videos and screenshots
run: |
mkdir public
cp -r cypress/videos public/videos
cp -r cypress/screenshots public/screenshots
- name: Merge test reports
run: npm run combine:report
- name: Generate HTML report
run: npm run generate:report
- name: Deploy report page to GitHub Page
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
11.- Now, you will have to commit the file. Now, you will be able to see your Github action running. The first time will take a little bit longer since your Pipeline will have to install of the dependencies that you will need. After the first run, you can commit and push your changes, and you will be able to see that the running time will be 100% less than what it was before.
Note: If you are using VScode, you will have to run [git pull] to be able to see this file inside of your local directory.
Atlassian Bitbucket Example
Now, if you want to use different tools like bitbucket pipeline, you will have to do the following:
Create a repo inside of your Bitbucket account
Create a local directory on your computer
Git clone your repo
git clone [repo_url]
- Create an Npm project
npm init -y
- Install cypress
npm install cypress --save-dev
- Run cypress
npx cypress open "OR" ./node_modules/.bin/cypress open
- Close Cypress
control + c
- Add, commit & push
git add .
git commit -m "[any_comment]"
git push
- Open bitbucket again > select your repo >inside of the options, click on Pipeline > select node.js.
Use the following bitbucket_pipeline.YAML file:
*# Template NodeJS build*
# This template allows you to validate your NodeJS code.
# The workflow allows running tests and code linting on the default branch.
image: node:10.15.3
options:
max-time: 15
pipelines:
default:
- step:
name: Pipeline Cypress E2E
caches:
- npm
- cypress
image: cypress/base:10
script:
- npm ci
- npx cypress run
artifacts:
- cypress/reports/**
- cypress/videos/**
definitions:
caches:
npm: $HOME/.npm
cypress: $HOME/.cache/Cypress
Note: To understand this image that I’m using, you will have to check the Docker images inside of this repo https://github.com/cypress-io/cypress-docker-images to see if it is the docker image that you want to use or if you want to use a different image.
If you would like to test or pull any other images from docker, you will have to download & install docker.
This is an example of what it looks like the pipeline through bitbucket
Thank you for your time
Please let me know if you have more questions or concerns and I will be more than happy to help you. Feel free to take a look at my other publications and let me know your thoughts.
*How do I get a job as an engineer? | UX Developer | I am the Engineer that you are looking for | Send Multiple Messages through the Terminal with the iMessage App!*