This post I am going to discuss about the new testing framework for testing, it is called Cypress and integrating the Cypress tests in CI pipeline.
I encourage you to go through how-to-works section of the website and get a brief idea of how it is different from existing framework like Selenium.
Start with setting up your Create React App and Cypress following the blog code-create-react-app-v3-and-its-cypress-tests-using-typescript.
This will get you up and running with cypress and you app with Create React app and Typescript. I was using Azure DevOps for CI so I had to create a variable SKIP_PREFLIGHT_CHECK in my pipeline to make it work.
These 2 tests are testing if application loads successfully and my states select is rendered.
I encourage you to go through how-to-works section of the website and get a brief idea of how it is different from existing framework like Selenium.
Setup
Start with setting up your Create React App and Cypress following the blog code-create-react-app-v3-and-its-cypress-tests-using-typescript.
This will get you up and running with cypress and you app with Create React app and Typescript. I was using Azure DevOps for CI so I had to create a variable SKIP_PREFLIGHT_CHECK in my pipeline to make it work.
Writing Tests
If you have every written tests with mocha then you will find yourself in very familiar environment. Cypress has adopted mocha style syntax. Read about the bundled tools.
I am gonna give example of very simple tests. As, purpose of this article is to make you aware of things we can do in Cypress.
describe('Should render', () => {
it('Successfully loads', () => {
cy.visit('/');
});
it('State Select', function () {
cy.visit("/")
cy.get('#select-name').should('be.visible')
})
})
I have configured my base url in the cypress.json file so that I do not have to type it again and again.
{
"baseUrl": "http://localhost:3000"
}
Running Tests
You can run Cypress tests using command npx cypress open from command line if you are using npm and have npx available.
I have added scripts to start cypress when I am running locally or when I need to run t from CI.
"scripts": {
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"cypress:verify": "cypress verify",
"ci:cypress-run": "start-server-and-test start http://localhost:3000 cypress:run"
},
These are the tasks I have added in package.json to run cypress.
use cypress:open while doing locall development which open the Electron browser and watch the changes. So I can see my tests run while I am typing them. It is super fast.. I Love it.
cypress:run is used to run the tests from command line.
cypress:verify is task added to verify that cypress is installed properly.
CI/CD
You might have other tasks in the pipeline which will do you package restores versioning and builds. So once your code is built you want to run your tests.
Here is how my pipeline looks like
 |
| Build Pipeline |
Once my build is successful I would want to verify cypress is installed properly.
 |
| Cypress Verify |
Now that we know that cypress is installed properly and my actual step which will run the tests will fail only if there are tests failure and not because issue with cypress.
Note: In command line tasks you might have to change your working folder in the Advanced settings.
Now comes the part where we need to run the cypress tests.
I am using a package start-server-and-test and it helps me start the server monitor the url and then run my tests in one script task.
 |
| Cypress run |
If you see my script tasks
"scripts": {
"cypress:run": "cypress run",
"cypress:verify": "cypress verify",
"ci:cypress-run": "start-server-and-test start http://localhost:3000 cypress:run"
},
ci:cypress-run task is the one that is responsible for running my tests. This task is running my create react script start task and monitoring the url and later run my tests.
If you will run the command locally you will see that the recordings are saved in the Cypress/Videos folder.
If your tests are run successfully you will see those great lines at the end of CI.
