Playwright Framework Build-Up

Framework build sequence

🔗 Framework Connectivity — Who Imports What, and Why?

This is the section to revisit whenever the framework feels confusing. A framework is not just a collection of folders. The files are connected through exports → imports → object creation → method calls → returned data.

2. The “Export → Import → Use” Rule

module.exports = HomePage;

const HomePage = require('../pages/HomePage');

3. Exactly How TC102 Moves Through the Framework

4. Method-Level Connection Map

5. What “Static” Changes

// Because this is static:
CommanMethods.clickButton(locator);

// NOT:
const methods = new CommanMethods();
methods.clickButton(locator);

6. What “Instance Method” Means in a POM

const homePage = new HomePage(page);

await homePage.clickSignupLogin();

                    ↓

this.signupLoginButton
                    ↓
the locator stored when HomePage(page) was created

7. The One Mental Model to Remember

When confused about a framework file, trace the arrow backwards and forwards: Who exported this? Who imported it? Who created it? Who calls it? What does it call next?

Constants — AppConstants.js

Store shared values once instead of hard-coding them throughout tests.

const BASE_URL = 'https://www.automationexercise.com/';

module.exports = { BASE_URL };

ScreenshotHelper.js

Centralizes screenshot logic so tests do not duplicate screenshot code.

class ScreenshotHelpers {
    static async capture(page, name) {
        await page.screenshot({ path: `screenshots/${name}.png` });
    }
}
module.exports = ScreenshotHelpers;

Hooks — hooks.js

test.beforeEach(async ({ page }) => {
    await page.goto(AppConstants.BASE_URL);
});

test.afterEach(async ({ page }, testInfo) => {
    if (testInfo.status !== testInfo.expectedStatus) {
        await ScreenshotHelpers.capture(
            page,
            testInfo.title.replace(/\s+/g, "_")
        );
    }
});

Test data — loginData.json

TC102 login credentials live outside the spec.

{
  "validUser": {
    "email": "valid-email",
    "password": "valid-password"
  },
  "invalidUser": {
    "email": "invalid-email",
    "password": "invalid-password"
  }
}

Page Object Model — HomePage + LoginPage

Each POM owns locators and page-specific actions/verifications.

JsonReader.js

The spec should not contain JSON-reading implementation details.

class JsonReader {
    static login() {
        // read loginData.json
        // return login data
    }
}
module.exports = JsonReader;

CommonMethods.js

Generic actions are centralized here so multiple POMs can reuse them.

class CommanMethods {

    static async checkButtonEnabled(locator) {
        await expect(locator).toBeEnabled();
    }

    static async checkTextBoxEnabled(locator) {
        await expect(locator).toBeEnabled();
    }

    static async clickButton(locator) {
        await CommanMethods.checkButtonEnabled(locator);
        await locator.click();
    }

    static async type(locator, value) {
        await CommanMethods.checkTextBoxEnabled(locator);
        await locator.fill(value);
    }
}
module.exports = CommanMethods;

LoginPage.userLogin()
   ↓
CommanMethods.type(...)
   ↓
checkTextBoxEnabled(...)
   ↓
locator.fill(...)

LoginPage.userLogin()
   ↓
CommanMethods.clickButton(...)
   ↓
checkButtonEnabled(...)
   ↓
locator.click()

Custom fixture — baseFixture.js

The fixture moves repeated POM object creation out of every spec.

const base = require('@playwright/test');

const LoginPage = require('../pages/LoginPage');
const HomePage = require('../pages/HomePage');

exports.test = base.test.extend({

    loginPage: async ({ page }, use) => {
        const loginPage = new LoginPage(page);
        await use(loginPage);
    },

    homePage: async ({ page }, use) => {
        const homePage = new HomePage(page);
        await use(homePage);
    }
});

exports.expect = base.expect;

Spec file — TC102

const { test, expect } = require('../fixture/basefixture');
const JsonReader = require('../utils/JsonReader');
const Hooks = require('../hooks/hooks');

test('TC102 - Login User with correct email and password @smoke @login',
    async ({ homePage, loginPage }) => {

        const loginData = JsonReader.login();

        await homePage.verifyHomePage();
        await homePage.clickSignupLogin();
        await loginPage.verifyLoginPage();

        await loginPage.userLogin(
            loginData.validUser.email,
            loginData.validUser.password
        );

        await homePage.verifyLoggedInUser();
        await homePage.userDeletion();
        await homePage.verifyAccountDeleted();
    }
);

Complete execution flow

TC102 Spec
   ↓
Custom test from baseFixture
   ↓
Fixtures create HomePage + LoginPage objects
   ↓
Hooks provide common setup/teardown
   ↓
JsonReader provides login data
   ↓
Spec calls POM methods
   ↓
POM calls CommonMethods where appropriate
   ↓
CommonMethods performs reusable Playwright actions
   ↓
Browser / Automation Exercise
   ↓
Assertions verify the result

Key rules to memorize