Tutorial 3 - Cypress Test Runner
What you will Learn :
Start cypress in code editor
How to launch Test Runner
Run demo (sample) tests in cypress
Start cypress in code editor
To start cypress, let us open a new terminal (Terminal > New Terminal)
You can see that a new terminal window opens in code editor. PS stands for power shell window. By default, the terminal takes us to the cypress working folder location
Let us see cypress doc to see how to open cypress, to do that, go to below link
https://docs.cypress.io/guides/getting-started/installing-cypress.html#Opening-Cypress
So to open cypress, the above documentation shows us the linux command ./node_modules/.bin/cypress open
Note that, all the cypress commands should be executed under .bin folder. If you expand node_modules, you would see .bin, if we expand .bin, you will see all the cypress related commands, see below
Now ./node_modules/.bin/cypress open is a linux command (with forward slashes). Let us change it to backward slashes for windows. So we have below command for windows:
node_modules\.bin\cypress open
Copy this and paste it in terminal, hit Enter. First time, you might see a failure, but don’t worry.
Try the same command again, you should see success, see below. This time you would see ‘Opening Cypress…’
Cypress gets launched with a popup that says that some example tests have been added that you can execute. Click on ‘Ok, got it’
Below would be seen with example tests (demo tests)
Launch Test Runner
So above, we have launched the test runner window. Test Runner is used to execute the cypress test cases. When you launch cypress usijg the above command, an additional folder ‘cypress’ gets created under your project
Expand cypress folder
You will see a default framework provided by cypress community. This framework, as you can see has multiple folders: fixtures, integration etc.
Just expand ‘integration’ folder, you will ‘examples’ folder inside it & inside examples, you would see demo test cases given by cypress
This same set of demo test cases can also be seen in test runner window
When you want to create a new test, you create it in CODE EDITOR under ‘integration’ folder. It will automatically reflect in Test Runner window.
However, when you want to execute/run your test case, you run it from Test Runner.
All test cases will end with .js extension
Run demo (sample) tests in cypress
To run any demo tets case, simply click any test case in the Test Runner window.
Once you click it, you might get below popup, just allow access
A new browser window will open to execute the test
On the left hand side, it will load all the steps from the test case, You will also see ‘Chrome is being controlled by Automted test software’.
On the right hand side, you will see all the steps (shown on left hand side) will get executed. So the right side will show real actions (clicking, typing etc) on website.
Once execution is over, you will see all steps being passed & hence the test case passed
You must have noticed how fast the execution is.
We also get all the logs for all the steps. We get all the screenshots (Before and After) for all the steps. To understand this, let us click the first step on the left hand side & further click step 2 under TEST BODY. The icon 
will tell you what step you have clicked. Now, at the right hand side bottom screen, you can see ‘before’ and ‘after’. When you click ‘before’, it would tell you the text that was written before cypress executed this step. So in this case, the text is ‘Email’
When you click ‘after’, you would see the text that cypress types after performing the automation step, in this case ‘fake@email.com’
Thus you have log for each and every step. This helps us in debugging any issues.
Similarly you can execute another demo test case.
So this is how we execute the test cases using test runner. In the next session, we will write our own test case using Mocha framework & execute it!
Thank you for reading!