Inheritance in Cypress, learn about ScrollUp/ScrollDown in cypress

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024