+91 7387620624

Importing Modules

Introduction

JavaScript modules allow developers to split applications into multiple files, making code easier to organize, maintain, and reuse. Once a module exports variables, functions, classes, or objects, other files can access them using the import keyword.

The import statement enables one JavaScript file to use code defined in another file without duplicating it. This promotes modular programming and keeps applications clean and scalable.

For automation engineers, importing modules is essential for reusing page objects, utility functions, API helpers, locators, configuration files, and test data across multiple test scripts in frameworks such as Playwright, Selenium, and Cypress.

What is Importing Modules?

Importing modules means bringing exported code from one JavaScript file into another file so it can be used.

Only values that have been exported using the export keyword can be imported.

Why Use the import Statement?

The import statement provides several benefits:

  • Reuse existing code

  • Reduce code duplication

  • Improve project organization

  • Simplify maintenance

  • Keep files smaller and easier to understand

  • Encourage modular development

Basic Syntax

Import a Named Export

import { variableName } from "./file.js";

Import Multiple Named Exports

import { value1, value2 } from "./file.js";

Import a Default Export

import functionName from "./file.js";

Import Everything

import * as utilities from "./utilities.js";

Example 1: Import a Variable

config.js

export const appName = "Inventory System";

main.js

import { appName } from "./config.js";

console.log(appName);

Output

Inventory System

Example 2: Import a Function

math.js

export function add(a, b) {

    return a + b;

}

main.js

import { add } from "./math.js";

console.log(add(15, 20));

Output

35

Example 3: Import Multiple Values

utilities.js

export const company = "OpenTech";

export const version = "2.0";

export function greet() {

    console.log("Welcome");

}

main.js

import { company, version, greet } from "./utilities.js";

console.log(company);

console.log(version);

greet();

Output

OpenTech

2.0

Welcome

Example 4: Import a Default Export

greeting.js

export default function greet() {

    console.log("Hello JavaScript");

}

main.js

import greet from "./greeting.js";

greet();

Output

Hello JavaScript

Example 5: Import Everything

calculator.js

export function add(a, b) {

    return a + b;

}

export function subtract(a, b) {

    return a - b;

}

main.js

import * as calculator from "./calculator.js";

console.log(calculator.add(20, 10));

console.log(calculator.subtract(20, 10));

Output

30

10

Example 6: Rename Imported Values

Sometimes you may want to use a different name for an imported value.

math.js

export function multiply(a, b) {

    return a * b;

}

main.js

import { multiply as product } from "./math.js";

console.log(product(6, 5));

Output

30

Real-World Example

Import application configuration.

config.js

export const baseURL = "https://example.com";

export const timeout = 5000;

app.js

import { baseURL, timeout } from "./config.js";

console.log(baseURL);

console.log(timeout);

Output

https://example.com

5000

Another example:

Import helper functions.

helpers.js

export function formatName(name) {

    return name.toUpperCase();

}

main.js

import { formatName } from "./helpers.js";

console.log(formatName("john"));

Output

JOHN

Automation Testing Example

Importing modules is a standard practice in automation frameworks for organizing reusable code.

Playwright Example

Import page object.

login.spec.js

import { LoginPage } from "./pages/LoginPage.js";

console.log("Login page imported");

Output

Login page imported

Selenium Example

Import browser utilities.

test.js

import { launchBrowser } from "./browserUtils.js";

launchBrowser();

Output

Launching browser

Cypress Example

Import reusable helper methods.

test.cy.js

import { login } from "./commands.js";

login();

Output

Logging into application

API Testing Example

Import API endpoints.

apiTest.js

import { loginAPI, usersAPI } from "./api.js";

console.log(loginAPI);

console.log(usersAPI);

Output

/api/login

/api/users

Data-Driven Testing Example

Import test data.

userTest.js

import { users } from "./users.js";

console.log(users);

Output

[
  {
    username: "admin",
    password: "admin123"
  }
]

Import Variations

Import TypeSyntax
Named Importimport { add } from "./math.js";
Multiple Named Importsimport { add, subtract } from "./math.js";
Default Importimport greet from "./greeting.js";
Namespace Importimport * as math from "./math.js";
Renamed Importimport { add as sum } from "./math.js";

Common Mistakes

Forgetting Curly Braces for Named Imports

Incorrect:

import add from "./math.js";

Correct:

import { add } from "./math.js";

Using Curly Braces for Default Imports

Incorrect:

import { greet } from "./greeting.js";

Correct:

import greet from "./greeting.js";

Incorrect File Path

Incorrect:

import { add } from "math.js";

Correct:

import { add } from "./math.js";

Always provide the correct relative path to the module.

Best Practices

  • Organize related code into separate modules.

  • Use named imports for multiple exported values.

  • Use default imports for a single primary export.

  • Keep module names meaningful and descriptive.

  • Use relative paths correctly.

  • Avoid importing unused modules.

  • Reuse imported utilities instead of duplicating code.

Conclusion

The import statement is a core feature of modern JavaScript that enables developers to reuse code across multiple files. By importing exported variables, functions, classes, and objects, applications become more modular, maintainable, and scalable.

For automation engineers, importing modules is essential for organizing page objects, utility methods, API helpers, configuration files, locators, and test data into reusable components that simplify automation framework development.

Mastering the import statement is a fundamental step toward writing professional JavaScript applications and automation projects.

Frequently Asked Questions (FAQs)

What is the import statement?

The import statement is used to access exported code from another JavaScript module.

Can I import multiple values from one module?

Yes. You can import multiple named exports using curly braces.

What is the difference between named and default imports?

Named imports use curly braces and must match the exported names. Default imports do not use curly braces and can be given any name.

What does import * as do?

It imports all named exports from a module into a single namespace object.

Can I rename imported values?

Yes. Use the as keyword to assign a different name to an imported value.

Why are imports important in automation testing?

Automation engineers use imports to reuse page objects, helper functions, API utilities, configuration files, locators, and test data across multiple test scripts, making frameworks more modular and maintainable.

Key Takeaways

  • The import statement is used to access exported code from other modules.

  • Modules improve code organization and reusability.

  • Named imports require curly braces.

  • Default imports do not require curly braces.

  • Namespace imports use import * as.

  • Imported values can be renamed using the as keyword.

  • Use correct relative file paths when importing modules.

  • Organize reusable code into separate modules.

  • Importing modules is widely used in Playwright, Selenium, Cypress, Node.js, and modern JavaScript applications.

  • Mastering imports is essential for building scalable and maintainable JavaScript projects.