Write and Execute First Test Case in Cypress using Mocha framework

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 Steps

• So 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!