Day 27 of 100: ES Modules — import, export, and Barrel Files

Day 27 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Modules split frameworks into files. Pages, utils, fixtures — each its own module. import/export is the glue.

Named and Default Exports

// utils/url.js
export const BASE = 'http://localhost:3000';
export function buildUrl(path) { return BASE + path; }
export default class UrlBuilder { /* ... */ }

// tests/example.spec.js
import UrlBuilder, { BASE, buildUrl } from '../utils/url.js';
import * as urlUtils from '../utils/url.js';   // namespace import

Barrel Files — Framework Pattern

// pages/index.js — re-export everything
export { LoginPage } from './LoginPage.js';
export { DashboardPage } from './DashboardPage.js';
export { CheckoutPage } from './CheckoutPage.js';

// Now tests import from one place:
// import { LoginPage, CheckoutPage } from '../pages';

Rules

• Prefer named exports — searchable, rename-safe, autocomplete-friendly
• One class per file in pages/ — LoginPage.ts holds LoginPage only
• Barrel index files keep test imports short
• CommonJS require() still appears in old configs — recognize it, write ESM

Tomorrow (Day 28): npm and package.json — managing your test project.