Tutorial 24 – Inheritance in cypress
What you will Learn :
What is Inheritance
Inheritance syntax
Create a class
Write test cases
Complete code
What is Inheritance?
Inheritance is the mechanism where one class acquires the properties of another class. The class which inherits is known as child class and the class whose properties are inherited is known as parent class.
The parent class is also called as superclass or base class. The child class is also called as derived class or subclass.
We use ‘extends’ keyword to inherit the properties of parent class. The parent class will mostly have all the re-usable functions. The ‘Test’ class (or child class) can call any of the re-usable methods from parent class and use them. In addition, the child class may have its own properties and methods.
Inheritance syntax
Below is a typical syntax used in inheritance that has 2 classes: one as parent, another as child.
Create a class
If you want to create a class in cypress, there is a ‘class’ keyword
Let us give some name to our parent class as ‘ParentPage’
We will now write some of the functions inside the parent class. The functions would be static so that we can directly call them inside the child class.
Our first function would be to load the website ‘loadHomePage’
Let us now add cy.visit() inside the body of this function
Let us now create another function wait(number)
So we have created 2 simple functions inside our parent class: loadHomePage and wait.
Let us now create a child class and name it as ChildPage
We will now use the ‘extends’ keyword to create a relationship between child and parent class
Now, child class can have its own methods. Let us make a function ‘scrollDown’
This will scroll down the page up to the link ‘FREE with LIFETIME MEMBERSHIP CLUB’, see below
Let us inspect the link ‘FREE with LIFETIME MEMBERSHIP CLUB’. We can use the linktext ‘FREE with LIFETIME MEMBERSHIP CLUB’ to identify this element
We would next use cy.contains(<linktext>) method to locate this element
Next, cypress has an inbuilt method to scroll down the page ‘scrollIntoview’, so let’s use this
Next we will scroll up the page until we get the text ‘Leaders in providing Manual..’
Let us inspect this element
We can use the css selector this time
‘section.section-advantages.wow.bounceInLeft:nth-child(1) > h2’
Fortunately, the same method ‘scrollIntoview’ can be used to scroll up as well
So these are the 2 static functions for the child class. Our child class block ends at line#21
Write test cases
Next, we will write our test cases inside the ‘it’ block
Remember that, when you run the spec file, it would look for the ‘it’ block and starts executing from the ‘it’ block.
Our first test case would be to load the home page. Now how would you do that?
See below. Simply type the name of child class and suffix it with dot viz ChildPage.
Observe above that you will automatically see all the methods inside the parent class including the one that we are interested in ‘loadHomePage’. This is the because of inheritance.
So we will simply call this function
After loading the page, we will next call scrollDown() method
After scrolling down, we will wait for sometime. Let’s add 5 seconds wait time
Next we will scroll up
Save the script
Open the Test runner
Run the script
Notice below that scroll down happens
Notice below that scroll up happens
So, this is how we use inheritance concept and call/re-use the functions of parent class from the child class. Inheritance process would be helpful in page object model framework designing, plus other frameworks as well.
Complete code
Thank you for reading!