Transcripted Summary
In the Introduction to Cypress course, which you can find here at Tests Automation University, you'll find a chapter on Cypress headless mode which can be ran by npx cypress run. This command is great if you want to run all of your Cypress tests, but you would normally not do that locally. For that, using continuous integration services is the way to go.
In this lesson, I want to show you how to set up a very simple workflow using GitHub Actions. To do that, I'm going to add a new folder into my root folder, which is going to be called .github, and a subfolder called workflows. This is where GitHub Actions service looks for different workflows. I'm going to add a new file and I'm going to call it e2etests. It's going to be a YAML file and in this file I will be defining a recipe or a workflow that GitHub Actions should follow. In this workflow, I want GitHub Actions to run my tests. So I'm going to give this workflow a name and call it e2etests. I'll define when they should be running and I'll say that on every git push that we do on remote and I'll define jobs that should be run.
I'll call my job Cypress run and define on what machine it should be running on. So runs on and I'll choose Ubuntu latest. And now I'm going to define steps that should be executed. So the first step is going to be called checkout. The very first thing we need to do is to check out the repository that we're working on. GitHub Actions are great. We don't have to define the checkout manually. Instead, we can use a predefined set of actions that will do the hard stuff for us. So we don't actually have to define git checkout or some other steps. We can instead refer to a GitHub action and use that instead. So I'll type actions slash checkout at version 4. If you want to read more about what this action does, feel free to look at the resources links down below.
All right, so now the next step is going to be called Cypress run. And again, we're going to be using predefined set of actions. Cypress team has actually put together a Cypress action for us. So we can just reference that and say we want to use cypressio slash github action at version 6. This github action is going to take care of our npm install and it's also going to take care of the proper caching so that when we install package and all of the node modules, we're not going to be downloading them all every time, but instead we'll use the cache and make the installation much faster and therefore much cheaper.
This cypress github action can be configured with some additional arguments that are passed with this with key. So since we want to run our tests against our Trello app, which is going to be running locally, we'll add a start argument. With this one, we're telling Cypress that it should run npm start before it runs the tests. There are many of these different arguments that you can pass and they can all be found in the cypress github action documentation which I'm going to reference in the resources section.
One of the useful ones is the spec argument that defines which test we want to run. So for this one, I have prepared a test in my cypress e2e folder called github actions and I'm going to paste a very simple test in here that's going to create a new list and a new cart and I'm going to reference that so we don't run all of the tests just this one. If we were to run all of our tests, probably a bunch of them would fail because they are just example files and they don't all contain proper data handling. This is pretty much it for the workflow definition. I'm going to save this and then commit all of my files and push them into my remote repository.
I'll open my repository on github and under actions tab I can actually see my action workflow running. When I'll click into the details I'll see my e2e tests yaml file being ran and I can see cypress run doing its thing. After my tests finish the job is complete and I can see that my tests were successful and therefore my pipeline has passed. I find github actions to be very straightforward and easy to use but in the cypress documentation you can find provider examples for all of the most popular services.
Resources
- Introduction to Cypress TAU course
- My blog on how to set up Github actions
- Docs for headless mode
- Setting up filtering using cypress.config.js
- Cross browser testing in Cypress
