Classes, Modules & JSON

Classes, Modules & JSON: Class Hierarchy — class Dog extends Animal Modern JavaScript applications are built on top of object-oriented classes (ES6 Classes), modules (import/expo

Class Hierarchy — class Dog extends Animal

Modern JavaScript applications are built on top of object-oriented classes (ES6 Classes), modules (import/export), and JSON text data. Think of it as organising a kitchen: a class is the recipe card holding the method and its tools together; a module is the drawer that card lives in; JSON is the written order that reaches the kitchen. In test automation, the Page Object Model (POM) is designed using ES6 classes. But if plain functions can express the same test code, why do we need this structure at all? Because when a login form's locator changes, a suite without classes forces you to hunt that selector across 40 files; with POM you change it in one `LoginPage`. The Java mapping is one-to-one — `export class LoginPage` + `import` instead of `class LoginPage` + `import` — with one difference: JavaScript resolves imports by file path, not by package name. For QA this distinction *is* the maintenance cost: on a product whose UI shifts often, a suite written without POM gets deleted and rewritten by the second sprint.

Java Class vs JavaScript ES6 Class — Comparison

ES6 Module: import / export Usage

// ── pageObjects/BasePage.js ────────────────────── export class BasePage { // named export constructor(url) { this.url = url; } open() { console.log("Navigating to:", this.url); } } export const BASE_URL = "https://learnqa.dev"; // named export (constant) // ── pageObjects/LoginPage.js ───────────────────── import { BasePage, BASE_URL } from './BasePage.js'; // named import class LoginPage extends BasePage { constructor() { super(BASE_URL + "/login"); // calls parent constructor via super() } fillForm(user, pass) { return `Logging in as ${user}`; } } export default LoginPage; // default export // ── tests/login.test.js ────────────────────────── import LoginPage from '../pageObjects/LoginPage.js'; // default import const page = new LoginPage(); page.open(); console.log(page.fillForm("hasan", "secret123"));

Micro Lab: JavaScript QA coding practice

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

Step by Step: JavaScript QA coding practice

Read the goal and async dependencies

Place await / Promise chain in the right spot

Complete the assertion or expectation line

Run and read console or test output

If flaky, add a wait strategy or retry

What is the safe order for writing and testing JavaScript QA code?