Building a Custom Test Framework with Playwright

 ✅ Building a Custom Test Framework with Playwright

Playwright is a powerful Node.js library for automating modern web apps. It supports multiple browsers (Chromium, Firefox, WebKit), multiple languages (JavaScript, TypeScript, Python, etc.), and advanced features like network interception, multi-tab automation, and mobile emulation.


Creating a custom test framework using Playwright gives you full control over test execution, reporting, and structure—great for enterprise or large-scale automation needs.


🚧 1. Why Build a Custom Test Framework?

Full flexibility over test structure and config


Integrate custom logging, reporting, and retries


Use your own folder structure and test lifecycle


Tailor test execution for CI/CD, multi-browser runs, etc.


🧱 2. Core Components of a Custom Framework

Your custom framework will typically consist of:


Test runner setup (e.g. using Playwright Test or an alternative like Mocha)


Configuration file (browser, timeouts, base URLs, etc.)


Custom base test class or wrapper


Test utilities and selectors


Reporting (e.g. Allure, custom logs)


Folder structure


🧰 3. Initial Setup

📦 Initialize Project

bash

Copy

Edit

mkdir playwright-framework

cd playwright-framework

npm init -y

npm install -D @playwright/test

📁 Folder Structure

plaintext

Copy

Edit

/playwright-framework

│

├── tests/             # Test cases

├── pages/             # Page Object Models

├── utils/             # Helpers, custom functions

├── config/            # Test configurations

├── reports/           # Test reports

├── test-runner.js     # Custom runner logic (optional)

└── playwright.config.js

⚙️ 4. Configuring playwright.config.js

Create a base configuration for your framework.


js

Copy

Edit

// playwright.config.js

import { defineConfig } from '@playwright/test';


export default defineConfig({

  timeout: 30000,

  retries: 1,

  use: {

    baseURL: 'https://your-website.com',

    headless: true,

    screenshot: 'only-on-failure',

    video: 'retain-on-failure',

  },

  projects: [

    { name: 'chromium', use: { browserName: 'chromium' } },

    { name: 'firefox', use: { browserName: 'firefox' } },

  ],

  reporter: [['list'], ['html', { outputFolder: 'reports/html' }]],

});

🧩 5. Building a Base Test Class

Use the Page Object Model (POM) for maintainable tests.


js

Copy

Edit

// pages/LoginPage.js

export class LoginPage {

  constructor(page) {

    this.page = page;

    this.usernameInput = page.locator('#username');

    this.passwordInput = page.locator('#password');

    this.loginButton = page.locator('#login');

  }


  async login(username, password) {

    await this.usernameInput.fill(username);

    await this.passwordInput.fill(password);

    await this.loginButton.click();

  }

}

🧪 6. Writing Tests Using the Framework

js

Copy

Edit

// tests/login.spec.js

import { test, expect } from '@playwright/test';

import { LoginPage } from '../pages/LoginPage';


test.describe('Login Tests', () => {

  test('Valid login', async ({ page }) => {

    const loginPage = new LoginPage(page);

    await page.goto('/');

    await loginPage.login('admin', 'password123');

    await expect(page.locator('text=Welcome')).toBeVisible();

  });

});

📊 7. Reporting and Logs

Use built-in reporters or plugins like Allure.


Install Allure (optional)

bash

Copy

Edit

npm install -D allure-playwright

Then modify your config:


js

Copy

Edit

reporter: [['allure-playwright']],

Generate report:


bash

Copy

Edit

npx allure generate ./allure-results --clean -o ./reports/allure-report

🚀 8. Running Tests

Run all tests

bash

Copy

Edit

npx playwright test

Run tests in a specific browser

bash

Copy

Edit

npx playwright test --project=firefox

Run a specific file

bash

Copy

Edit

npx playwright test tests/login.spec.js

🧩 9. Extending the Framework

Parallel Execution: Set workers in config


Custom Commands: Add helpers to utils/


Test Hooks: Use beforeAll, afterEach, etc.


CI Integration: Add GitHub Actions, Jenkins, or GitLab pipelines


✅ 10. Summary

Feature Tool / Method

Test Runner Playwright Test

Config Management playwright.config.js

Page Object Model Custom classes in pages/

Reporting HTML, Allure, Console

Test Execution CLI, CI/CD

Flexibility Full control over structure and flow

Learn Playwright Training Course in Hyderabad

Read More

Handling CAPTCHA with Playwright

Authentication Testing with JWT in Playwright

Component Testing with Playwright

Accessibility Testing with Playwright

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions


Comments

Post a Comment

Popular posts from this blog

How to Install and Set Up Selenium in Python (Step-by-Step)

 Here’s your step-by-step guide to installing and setting up Selenium in Python — perfect if you're just getting started with browser automation. 🚀 🐍 Step 1: Install Python If you haven’t already: Download Python: https://www.python.org/downloads/ Make sure to check the box "Add Python to PATH" during installation Verify installation: bash Copy Edit python --version pip --version 📦 Step 2: Install Selenium Library Open your terminal or command prompt and run: bash Copy Edit pip install selenium To verify: bash Copy Edit pip show selenium 🌐 Step 3: Download WebDriver for Your Browser Depending on what browser you want to automate: 🔹 Chrome: Download ChromeDriver: ➡️ https://sites.google.com/chromium.org/driver/ Make sure the driver version matches your installed Chrome version. 🔹 Firefox: Download GeckoDriver: ➡️ https://github.com/mozilla/geckodriver/releases Unzip and place the executable somewhere on your system, like: Windows: C:\WebDrivers\ Mac/Linux: /usr/local...
Read more

Tosca for API Testing: A Step-by-Step Tutorial

Tosca for API Testing: A Step-by-Step Tutorial Tricentis Tosca is a powerful and user-friendly test automation tool that supports a wide range of testing types — including API testing. With Tosca, you can easily design, automate, and execute API tests without writing any code. It supports REST, SOAP, and other service types, making it a great choice for end-to-end API validation. 🧰 What is Tosca API Testing? Tosca’s API testing allows testers to: Send requests (GET, POST, PUT, DELETE, etc.) Validate responses (status codes, body, headers) Chain requests and share data between them Perform security, load, and functional tests on APIs ✅ Step-by-Step Guide: Tosca API Testing 🔹 Step 1: Open Tosca and Create a Workspace Launch Tosca Commander Create a new workspace (or open an existing one) Choose the workspace type as Multi-user or Single-user based on your setup 🔹 Step 2: Add a New API Test Case Navigate to the Modules section. Right-click and choose Scan > API Scan. The API Scan wi...
Read more

Waits in Playwright: Explicit, Implicit, and Auto

 In Playwright (a powerful end-to-end testing framework), waiting mechanisms help ensure your scripts interact with elements only when they’re ready. Playwright handles waits more intelligently than older tools like Selenium, but understanding the types of waits—Explicit, Implicit, and Auto-waiting—is key for writing reliable tests. 🕰️ Waits in Playwright: Explicit, Implicit, and Auto ✅ 1. Auto-Waiting (Built-in) – Playwright’s Default Behavior What it is: Playwright automatically waits for elements to be actionable before performing actions (like click, type, fill, etc.). This is its most powerful feature. How it works: Waits for the element to be attached to the DOM Waits for the element to be visible Waits for the element to be enabled (not disabled) Waits for stable animation or layout Example: python Copy Edit await page.click('#submit-button') No need for a separate wait — Playwright will wait until the button is ready. Benefits: Reduces the need for manual waits More re...
Read more