Tutorial 4 – Write and Execute First Test Case in Cypress using Mocha framework
What you will Learn :
-Understand Mocha framework
-Write our first Test Case in cypress using Mocha framework
-Execute our first Test case
Understand Mocha framework
Before we write our first test case, we have to first understand the structure or syntax of the code that we would be writing for our test case. So to do that, let us go to cypress documentation:
https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Add-a-test-file
Click ‘Writing Your First Test’ that you on left hand side. On the right hand side, you would see a code syntax that describes the Mocha framework. This framework is analogous to TestNg/Junit framework that we use for writing selenium test cases.
As we all know, framework gives a proper structure to our test code. A framework helps us to manage the test suites and test cases. So Mocha is the default javascript based framework that gets installed automatically when we install cypress. You don’t have to install Mocha.
So let us understand the above syntax using below diagram
When we start writing our test case, we have to start with the ‘describe’ keyword.
The ‘describe’ keyword accepts 2 arguments:
-first argument is of string type where we mention the name of our test suite
-second argument is a function() that contains multiple functions
-function body will start with a curly brace on first line { and will end with a curly brace on last line }Within the ‘describe’ block, we can write multiple ‘it’ blocks that specify multiple test cases. ‘it’ keyword also follows a similar syntax:
-in the first argument we specify the name of the test case
-the second argument is a function()
-Inside the function(), we will create all the Test StepsSo inside a single ‘describe’ block, we can write multiple ‘it’ blocks.
So, every ‘describe’ is a parent representing one ‘Test Suite’ & every ‘it’ represents one Test Case
In the latest Mocha framework code syntax, function() is represented as () =>
So, this is the Test Suite and Test Case structure we will follow to write our test cases in cypress!!
Write our first Test Case in cypress using Mocha framework
The test scripts are written under ‘integration’ folder. To write our first Test case, right click ‘integration \ examples’ folder and click ‘New File’
You will see a blank text area
Let us name it as ‘MyFirstTestScript.js’ and hit ‘Enter’. Make sure to add .js extension at the end. On the right hand side, you will see a blank Test case. We will be writing our code here.
Copy the code syntax from cyrpess doc
Paste it in code editor
So we know that the ‘describe’ block starts from line 1 & ends at line 5.
The ‘it’ block starts at line 2 & ends at line 4. As of now we have only 1 ‘it’ block & hence 1 test case.
So, let us mention some text for the ‘describe’ and ‘it’ keywords. So our test suite name is ‘My First Test Suite’ and test case name is ‘Verify Page Title’.
Select line 3
Delete the content of line 3
Now, we will launch any website and verify the title of the webpage. So for example, the website www.linkedin.com has page title ‘LinkedIn: Log In or Sign Up’
Now, cy is a pre-defined object in cypress, using which you can call the methods. Let su see that. So cy. will give you all the methods available in cypress.
Right now, if you type cy. you will NOT see the predefined cypress methods
To see the predefined cypress methods, we have to simply type the below line at the top of our code. This will help us to refer cypress documentation while we are writing our code
/// <reference types="Cypress" />
See below line#1
Now type cy. you will see all methods and cypress will provide auto-suggestions:
At any point you can see detailed documentation of a method
So when we click ‘Read More’, we can see detailed documentation for any method, see below
So coming back, to visit any website, we use the ‘visit’ method and write the name of the website within single quotes (line 5)
Next, we will use pre-defined title() method
Next, we will use ‘should’ method to verify the page title
should() method accepts 2 arguments:
-The first argument refers to the kind of operation that we want to perform. In this case we want to perform equality operation. So we will use ‘eq’
-The second argument is the title you are expecting 'LinkedIn: Log In or Sign Up' (line 6)
So in line 6, we have used an assertion. We use assertions to verify something. In this case, we are using the ‘should’ assertion to verify whether the page title is equal to 'LinkedIn: Log In or Sign Up'.
This is the very basic test case.
Execute our first Test case that we have written above
Save the .js file.
Open code editor terminal. We will now launch test runner (we have already studied this in previous session)
It might take 2-3 minutes to launch Test runner. We will see our test case that we created
Let us click ‘MyFirstTestScript.js’. The 2 test steps will load on left hand side
After the steps are loaded, the execution will begin. You can see ‘My First Test Suite’ written at the top left hand side & ‘Verify Page Title’ written just below it. Notice below that our assertion has passed
So the actual page title (during runtime) matches with the expected title that we mentioned in the code.
You can click to re-run your test case
The above test case was a positive test case (actual result matched the expected). Let us now add a negative test case. To do that, select the first ‘it’ block and copy it
Paste it (lines 9-12)
Edit the name of 2 test cases (lines 4 and 9)
Let us intentionally make an error in line 11 as shown below
So this time, the first test should passs & the second one should fail. So we have 2 tests inside our suite.
Save the file.
You don’t have to re-run the script using Test runner. That’s the beauty of cypress. As soon as you save the .js file, the script gets executed automatically by the cypress. So just open the previous browser window. The first test case passed.
However the second test case failed. You will see an assertion error for the second test case. You can see
Also, if you notice at the page bottom, you will see the logs. The log tells us that line 11 has some problem.
If for some reason, the script doesn’t get automatically executed in the browser, you can open the test runner and click the test script.
If required, you can also close the previous test runner window and re-launch the test runner.
So this is how we write and execute the test cases.
Thank you for reading!