Introduction

Method overriding is an important feature of Object-Oriented Programming (OOP) that allows a child class to provide its own implementation of a method that already exists in its parent class.

When a child class overrides a method, the overridden version is executed instead of the parent class method whenever that method is called on an object of the child class.

Method overriding allows developers to customize or extend the behavior of inherited methods without modifying the parent class. This makes applications more flexible, reusable, and easier to maintain.

In Node.js, method overriding is achieved by defining a method in the child class with the same name as the method in the parent class.

For automation engineers, method overriding is commonly used in Playwright, Selenium, and Cypress frameworks to customize reusable methods such as login, browser launch, page navigation, API requests, reporting, and test setup.

In this tutorial, you’ll learn how method overriding works in JavaScript.

What is Method Overriding?

Method overriding occurs when a child class defines a method with the same name as a method in its parent class.

When the method is called using an object of the child class, the child class version is executed instead of the parent class version.

Why Use Method Overriding?

Method overriding helps developers:

Customize inherited behavior.
Extend parent class functionality.
Reduce duplicate code.
Improve code flexibility.
Build reusable applications.
Support polymorphism.
Improve maintainability.

Syntax

class Parent {

    display() {

        console.log("Parent");

    }

}

class Child extends Parent {

    display() {

        console.log("Child");

    }

}

The child class replaces the implementation of the parent method.

Example 1: Basic Method Overriding

class Animal {

    sound() {

        console.log(
            "Animal makes a sound."
        );

    }

}

class Dog extends Animal {

    sound() {

        console.log(
            "Dog barks."
        );

    }

}

const dog =
    new Dog();

dog.sound();

Sample Output

Dog barks.

Example 2: Parent and Child Methods

class Employee {

    work() {

        console.log(
            "Employee is working."
        );

    }

}

class Manager extends Employee {

    work() {

        console.log(
            "Manager is managing the team."
        );

    }

}

const manager =
    new Manager();

manager.work();

Sample Output

Manager is managing the team.

Example 3: Calling the Parent Method Using `super`

class Vehicle {

    start() {

        console.log(
            "Vehicle started."
        );

    }

}

class Car extends Vehicle {

    start() {

        super.start();

        console.log(
            "Car is ready to drive."
        );

    }

}

const car =
    new Car();

car.start();

Sample Output

Vehicle started.
Car is ready to drive.

Example 4: Override with Additional Logic

class Person {

    greet() {

        console.log(
            "Hello!"
        );

    }

}

class Student extends Person {

    greet() {

        console.log(
            "Hello! Welcome to the class."
        );

    }

}

const student =
    new Student();

student.greet();

Sample Output

Hello! Welcome to the class.

Example 5: Different Behavior for Different Classes

class Shape {

    draw() {

        console.log(
            "Drawing a shape."
        );

    }

}

class Circle extends Shape {

    draw() {

        console.log(
            "Drawing a circle."
        );

    }

}

const circle =
    new Circle();

circle.draw();

Sample Output

Drawing a circle.

Example 6: Real-World Example

Employee login system.

class Employee {

    login() {

        console.log(
            "Employee login."
        );

    }

}

class Admin extends Employee {

    login() {

        console.log(
            "Admin login with additional security."
        );

    }

}

const admin =
    new Admin();

admin.login();

Sample Output

Admin login with additional security.

Automation Testing Example

Method overriding is commonly used in automation frameworks.

Playwright Example

Customize a login method.

class BasePage {

    login() {

        console.log(
            "Default login."
        );

    }

}

class LoginPage extends BasePage {

    login() {

        console.log(
            "Playwright login."
        );

    }

}

const page =
    new LoginPage();

page.login();

Selenium Example

Override browser launch.

class BaseTest {

    launchBrowser() {

        console.log(
            "Launching browser."
        );

    }

}

class ChromeTest extends BaseTest {

    launchBrowser() {

        console.log(
            "Launching Chrome browser."
        );

    }

}

const test =
    new ChromeTest();

test.launchBrowser();

Cypress Example

Customize page navigation.

class BaseCommands {

    visitPage() {

        console.log(
            "Opening page."
        );

    }

}

class DashboardPage extends BaseCommands {

    visitPage() {

        console.log(
            "Opening Dashboard."
        );

    }

}

const dashboard =
    new DashboardPage();

dashboard.visitPage();

API Testing Example

Override request handling.

class BaseApi {

    sendRequest() {

        console.log(
            "Sending API request."
        );

    }

}

class UserApi extends BaseApi {

    sendRequest() {

        console.log(
            "Sending User API request."
        );

    }

}

const api =
    new UserApi();

api.sendRequest();

Data-Driven Testing Example

Customize employee details.

class Employee {

    displayRole() {

        console.log(
            "Employee"
        );

    }

}

class Tester extends Employee {

    displayRole() {

        console.log(
            "QA Tester"
        );

    }

}

const tester =
    new Tester();

tester.displayRole();

Common Mistakes

Changing the Method Name

Incorrect:

class Animal {

    sound() {

    }

}

class Dog extends Animal {

    bark() {

    }

}

This is not method overriding because the method names are different.

Forgetting `extends`

class Dog {

    sound() {

        console.log(
            "Dog barks."
        );

    }

}

Without extends, there is no inheritance, so overriding cannot occur.

Not Using `super` When Parent Behavior Is Needed

If you want to keep the parent method’s behavior and add extra functionality, call the parent method using super.methodName().

Best Practices

Override methods only when the child class needs different behavior.
Keep the same method name and parameters.
Use super.methodName() when you want to extend the parent method.
Avoid duplicating the parent method unnecessarily.
Keep overridden methods simple and readable.
Use meaningful class and method names.
Test overridden methods carefully.

Conclusion

Method overriding allows child classes to replace or customize the behavior of inherited methods. It is one of the key features of Object-Oriented Programming that makes applications flexible, reusable, and easier to maintain.

For automation engineers, method overriding is widely used to customize browser actions, login functionality, API requests, reporting, and reusable framework components in Playwright, Selenium, and Cypress.

Understanding method overriding is essential before learning dynamic method resolution and polymorphism.

Frequently Asked Questions (FAQs)