Introduction

The super keyword is used in JavaScript classes to access the constructor and methods of a parent class. It is primarily used when working with inheritance.

When a child class extends a parent class, the super keyword allows the child class to:

Call the parent class constructor.
Access methods defined in the parent class.

If a child class defines its own constructor, it must call super() before accessing this. Otherwise, JavaScript throws an error.

For automation engineers, the super keyword is commonly used when creating reusable base classes for Playwright, Selenium, and Cypress frameworks. It ensures that the parent class is initialized before the child class adds its own functionality.

In this tutorial, you’ll learn how to use the super keyword in different scenarios.

What is the `super` Keyword?

The super keyword refers to the parent class.

It is mainly used to:

Call the parent class constructor.
Access parent class methods.

Syntax

Calling the Parent Constructor

class Parent {

    constructor() {

    }

}

class Child extends Parent {

    constructor() {

        super();

    }

}

Calling a Parent Method

class Parent {

    display() {

        console.log("Parent");

    }

}

class Child extends Parent {

    show() {

        super.display();

    }

}

Why Use the `super` Keyword?

The super keyword helps developers:

Initialize parent class properties.
Reuse parent class constructors.
Access parent methods.
Reduce duplicate code.
Extend existing functionality.
Build reusable class hierarchies.
Improve maintainability.

Example 1: Calling the Parent Constructor

class Person {

    constructor(name) {

        this.name = name;

    }

}

class Student extends Person {

    constructor(name) {

        super(name);

    }

}

const student =
    new Student("David");

console.log(student.name);

Sample Output

David

The super(name) call initializes the name property in the parent class.

Example 2: Parent Constructor with Additional Child Properties

class Employee {

    constructor(name) {

        this.name = name;

    }

}

class Manager extends Employee {

    constructor(name, department) {

        super(name);

        this.department = department;

    }

}

const manager =
    new Manager(
        "John",
        "IT"
    );

console.log(manager.name);

console.log(manager.department);

Sample Output

John
IT

Example 3: Calling Parent Methods

class Animal {

    eat() {

        console.log(
            "Animal is eating."
        );

    }

}

class Dog extends Animal {

    eatFood() {

        super.eat();

    }

}

const dog =
    new Dog();

dog.eatFood();

Sample Output

Animal is eating.

Example 4: Parent and Child Methods

class Vehicle {

    start() {

        console.log(
            "Vehicle started."
        );

    }

}

class Car extends Vehicle {

    drive() {

        super.start();

        console.log(
            "Car is moving."
        );

    }

}

const car =
    new Car();

car.drive();

Sample Output

Vehicle started.
Car is moving.

Example 5: Reusing Parent Constructor

class User {

    constructor(name, role) {

        this.name = name;

        this.role = role;

    }

}

class Admin extends User {

    constructor(name, role) {

        super(name, role);

    }

}

const admin =
    new Admin(
        "Rahul",
        "Administrator"
    );

console.log(admin.name);

console.log(admin.role);

Sample Output

Rahul
Administrator

Example 6: Real-World Example

Employee management system.

class Employee {

    constructor(name) {

        this.name = name;

    }

    login() {

        console.log(
            this.name +
            " logged in."
        );

    }

}

class Developer extends Employee {

    constructor(name, language) {

        super(name);

        this.language = language;

    }

    showLanguage() {

        console.log(this.language);

    }

}

const developer =
    new Developer(
        "Alice",
        "JavaScript"
    );

developer.login();

developer.showLanguage();

Sample Output

Alice logged in.
JavaScript

Automation Testing Example

The super keyword is widely used in automation frameworks.

Playwright Example

Initialize the base page.

class BasePage {

    constructor(page) {

        this.page = page;

    }

}

class LoginPage extends BasePage {

    constructor(page) {

        super(page);

    }

}

const loginPage =
    new LoginPage("Browser Page");

console.log(loginPage.page);

Selenium Example

Initialize the WebDriver.

class BaseTest {

    constructor(driver) {

        this.driver = driver;

    }

}

class LoginTest extends BaseTest {

    constructor(driver) {

        super(driver);

    }

}

const test =
    new LoginTest("ChromeDriver");

console.log(test.driver);

Cypress Example

Reuse configuration.

class BaseConfig {

    constructor(baseUrl) {

        this.baseUrl = baseUrl;

    }

}

class DashboardConfig extends BaseConfig {

    constructor(baseUrl) {

        super(baseUrl);

    }

}

const config =
    new DashboardConfig(
        "https://example.com"
    );

console.log(config.baseUrl);

API Testing Example

Initialize an API client.

class BaseApi {

    constructor(url) {

        this.url = url;

    }

}

class UserApi extends BaseApi {

    constructor(url) {

        super(url);

    }

}

const api =
    new UserApi(
        "https://api.example.com"
    );

console.log(api.url);

Data-Driven Testing Example

Reuse employee information.

class Employee {

    constructor(id) {

        this.id = id;

    }

}

class Tester extends Employee {

    constructor(id, name) {

        super(id);

        this.name = name;

    }

}

const tester =
    new Tester(
        101,
        "John"
    );

console.log(tester.id);

console.log(tester.name);

Common Mistakes

Forgetting to Call `super()`

Incorrect:

class Student extends Person {

    constructor(name) {

        this.name = name;

    }

}

This produces an error because super() must be called before using this.

Using `this` Before `super()`

Incorrect:

class Student extends Person {

    constructor(name) {

        this.name = name;

        super(name);

    }

}

Always call super() first.

Calling Parent Methods Incorrectly

Incorrect:

Parent.display();

Correct:

super.display();

Best Practices

Always call super() before using this in a child constructor.
Pass the required parameters to super().
Use super to reuse parent class functionality.
Keep parent classes generic and reusable.
Avoid duplicating initialization code.
Use super.methodName() to access parent methods when needed.
Design clear parent-child relationships.

Conclusion

The super keyword is an essential part of inheritance in JavaScript. It enables child classes to initialize parent class properties and reuse parent class methods, resulting in cleaner and more maintainable code.

For automation engineers, the super keyword is frequently used when extending base classes for page objects, browser setup, API clients, and reusable utilities in Playwright, Selenium, and Cypress.

Understanding the super keyword is an important step before learning method overriding and polymorphism.

Frequently Asked Questions (FAQs)