Introduction
The extends keyword is used in JavaScript to create inheritance between classes. It allows one class (called the child class) to inherit the properties and methods of another class (called the parent class).
Instead of writing the same code multiple times, the extends keyword enables code reuse by allowing child classes to use the functionality already defined in the parent class.
The child class automatically inherits all accessible methods and properties of the parent class and can also define its own additional properties and methods.
For automation engineers, the extends keyword is widely used in frameworks such as Playwright, Selenium, and Cypress. Base classes containing reusable methods like browser setup, login, navigation, screenshots, and utility functions are extended by page classes and test classes.
In this tutorial, you’ll learn how the extends keyword works and how to use it effectively in Node.js.
What is the extends Keyword?
The extends keyword is used to create a child class that inherits from a parent class.
It establishes an inheritance relationship between two classes.
Syntax
class ParentClass {
}
class ChildClass extends ParentClass {
}
The child class automatically inherits the accessible members of the parent class.
Why Use the extends Keyword?
The extends keyword helps developers:
Reuse existing code.
Reduce code duplication.
Improve code organization.
Build scalable applications.
Extend existing functionality.
Create parent-child relationships.
Improve maintainability.
Example 1: Basic Inheritance
class Animal {
eat() {
console.log(
"Animal is eating."
);
}
}
class Dog extends Animal {
}
const dog =
new Dog();
dog.eat();
Sample Output
Animal is eating.
The Dog class inherits the eat() method from the Animal class.
Example 2: Child Class Adds New Method
class Vehicle {
start() {
console.log(
"Vehicle started."
);
}
}
class Car extends Vehicle {
drive() {
console.log(
"Car is moving."
);
}
}
const car =
new Car();
car.start();
car.drive();
Sample Output
Vehicle started.
Car is moving.
Example 3: Multiple Child Objects
class Employee {
work() {
console.log(
"Employee working."
);
}
}
class Developer extends Employee {
}
const developer1 =
new Developer();
const developer2 =
new Developer();
developer1.work();
developer2.work();
Sample Output
Employee working.
Employee working.
Example 4: Inheriting Constructor Properties
class User {
constructor() {
this.role = "User";
}
}
class Admin extends User {
}
const admin =
new Admin();
console.log(admin.role);
Sample Output
User
Example 5: Parent and Child Methods
class Person {
speak() {
console.log(
"Speaking..."
);
}
}
class Teacher extends Person {
teach() {
console.log(
"Teaching..."
);
}
}
const teacher =
new Teacher();
teacher.speak();
teacher.teach();
Sample Output
Speaking...
Teaching...
Example 6: Real-World Example
Employee management system.
class Employee {
login() {
console.log(
"Employee logged in."
);
}
}
class Manager extends Employee {
approveLeave() {
console.log(
"Leave approved."
);
}
}
const manager =
new Manager();
manager.login();
manager.approveLeave();
Sample Output
Employee logged in.
Leave approved.
Automation Testing Example
The extends keyword is heavily used in automation frameworks.
Playwright Example
Create a reusable base page.
class BasePage {
openApplication() {
console.log(
"Application opened."
);
}
}
class LoginPage extends BasePage {
}
const loginPage =
new LoginPage();
loginPage.openApplication();
Selenium Example
Reuse browser methods.
class BaseTest {
launchBrowser() {
console.log(
"Browser launched."
);
}
}
class LoginTest extends BaseTest {
}
const test =
new LoginTest();
test.launchBrowser();
Cypress Example
Extend common commands.
class BaseCommands {
visitHomePage() {
console.log(
"Homepage opened."
);
}
}
class DashboardPage extends BaseCommands {
}
const dashboard =
new DashboardPage();
dashboard.visitHomePage();
API Testing Example
Extend reusable API methods.
class BaseApi {
sendRequest() {
console.log(
"API request sent."
);
}
}
class UserApi extends BaseApi {
}
const api =
new UserApi();
api.sendRequest();
Data-Driven Testing Example
Extend employee information.
class Employee {
showDepartment() {
console.log(
"IT Department"
);
}
}
class Tester extends Employee {
}
const tester =
new Tester();
tester.showDepartment();
Common Mistakes
Forgetting the extends Keyword
Incorrect:
class Dog Animal {
}
Correct:
class Dog extends Animal {
}
Trying to Access Parent Methods Without Inheritance
class Animal {
eat() {
console.log(
"Eating"
);
}
}
class Dog {
}
const dog =
new Dog();
dog.eat();
This produces an error because the Dog class does not inherit from Animal.
Rewriting Common Methods
Avoid duplicating methods in multiple classes. Place common functionality in the parent class and use the extends keyword to inherit it.
Best Practices
Use the
extendskeyword only when an “is-a” relationship exists.Keep parent classes generic and reusable.
Place shared functionality in the parent class.
Keep child classes focused on specialized behavior.
Avoid unnecessary inheritance.
Use meaningful class names.
Design inheritance hierarchies carefully.
Conclusion
The extends keyword is the foundation of inheritance in JavaScript. It allows child classes to inherit the properties and methods of parent classes, reducing code duplication and improving maintainability.
For automation engineers, the extends keyword is essential for creating reusable Page Object Models (POM), browser utilities, API clients, and common test classes in Playwright, Selenium, and Cypress.
Understanding the extends keyword prepares you for learning advanced inheritance concepts such as the super keyword, method overriding, and polymorphism.
Frequently Asked Questions (FAQs)
What is the purpose of the extends keyword?
The extends keyword creates a child class that inherits from a parent class.
Does extends inherit methods and properties?
Yes. The child class inherits accessible properties and methods from the parent class.
Can a child class add its own methods?
Yes. A child class can define additional properties and methods while inheriting from the parent class.
Is the extends keyword mandatory for inheritance?
Yes. In JavaScript class-based inheritance, the extends keyword is used to establish the inheritance relationship.
Why is the extends keyword important in automation testing?
It allows page classes, browser utilities, API clients, and reusable test classes to inherit common functionality from base classes, reducing duplication and improving maintainability.
Key Takeaways
The
extendskeyword creates inheritance between classes.It allows a child class to inherit from a parent class.
Inheritance promotes code reuse.
Child classes can inherit and extend parent class functionality.
Use
extendsonly when a logical parent-child relationship exists.Parent classes should contain reusable functionality.
The
extendskeyword is widely used in Playwright, Selenium, Cypress, and API testing frameworks.It reduces code duplication and improves maintainability.
Child classes can add their own methods and properties.
Understanding
extendsis essential before learning thesuperkeyword and method overriding.