🏗️ Building Playwright Framework Step By Step - Setup Design Pattern

✅ Prerequisites

This article builds directly on the concepts from previous ones. To get the most out of it, you should have:

• Initialized Playwright Framework
• Created User Snippets
• Set Environment Variables

🎯 Importance of Design Pattern

The importance of employing design patterns in test automation cannot be overstated! It serves as a blueprint for organizing interaction with the user interface (UI) elements of web pages in a structured and reusable manner. 🎭

💡 What is a Design Pattern? A proven solution to common problems in software design that provides a template for how to solve problems in various situations

🚀 Why Design Patterns Matter

Design patterns provide several critical benefits:

• 🔧 Enhanced Maintainability - Centralized UI changes management

• 📖 Improved Readability - Cleaner, more efficient code

• 🔄 Reduced Code Duplication - Reusable components

• 🏗️ Better Structure - Organized and scalable architecture

• 🛡️ Increased Robustness - More reliable test automation

By abstracting the UI structure away from the test scripts, Design Patterns enable testers to write cleaner, more efficient code. Changes to the UI can be managed in a centralized manner, minimizing the impact on tests and improving the robustness of the automation suite.

⚡ Result: More scalable, maintainable, and reliable test automation strategies that align with software development best practices

🤔 POM (Page Object Model) vs Functional Helpers

Both Page Object Model (POM) and Functional Helpers are popular design patterns used to enhance test automation frameworks. Let's explore the key differences:

🏛️ Page Object Model (POM)

⚙️ Functional Helpers

🎯 Which Should You Choose?

💡 Decision Factors:

• Project Scale: Large/complex → POM, Small/simple → Functional Helpers

• Team Experience: Experienced → POM, Beginners → Functional Helpers

• UI Complexity: Complex/changing → POM, Static/simple → Functional Helpers

• Long-term Maintenance: Long-term → POM, Short-term → Functional Helpers

Decision taken: For this series, we'll implement POM as it's more popular and provides better scalability for real-world applications.

🛠️ POM Setup

Since POM Design Pattern is more popular and scalable, we will implement it in our project. There are several different implementations, but I'll show you the two most effective approaches.

Step 1: Create Folder Structure

Create a logical folder structure in your project's root directory:

project-root/
├── pages/
│   └── clientSite/
│       ├── HomePage.ts
│       ├── NavPage.ts
│       └── ArticlePage.ts
├── tests/
└── playwright.config.ts

🏗️ Why This Structure?: This gives you flexibility to extend with Admin Panel or other application sections later

Step 2: Create Page Object Files

Create and implement page objects for all pages of the application. We'll create page objects for:

• 🏠 Home Page - Main landing page functionality

• 🧭 Nav Page - Navigation bar (present on every page, but defined once)

• 📄 Article Page - Article creation and management

Step 3: Create Page Object Classes

📚 Complete Implementation: The three page objects are fully implemented in the GitHub repository

Before we continue, you can learn more about Classes in TypeScript.

Let's examine the Article Page as our primary example:

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

/**
 * This is the page object for Article Page functionality.
 * @export
 * @class ArticlePage
 * @typedef {ArticlePage}
 */
export class ArticlePage {
    constructor(private page: Page) {}

    get articleTitleInput(): Locator {
        return this.page.getByRole('textbox', {
            name: 'Article Title',
        });
    }
    get articleDescriptionInput(): Locator {
        return this.page.getByRole('textbox', {
            name: "What's this article about?",
        });
    }
    get articleBodyInput(): Locator {
        return this.page.getByRole('textbox', {
            name: 'Write your article (in',
        });
    }
    get articleTagInput(): Locator {
        return this.page.getByRole('textbox', {
            name: 'Enter tags',
        });
    }
    get publishArticleButton(): Locator {
        return this.page.getByRole('button', {
            name: 'Publish Article',
        });
    }
    get publishErrorMessage(): Locator {
        return this.page.getByText("title can't be blank");
    }
    get editArticleButton(): Locator {
        return this.page.getByRole('link', { name: ' Edit Article' }).first();
    }
    get deleteArticleButton(): Locator {
        return this.page
            .getByRole('button', { name: ' Delete Article' })
            .first();
    }

    /**
     * Navigates to the edit article page by clicking the edit button.
     * Waits for the page to reach a network idle state after navigation.
     * @returns {Promise<void>}
     */
    async navigateToEditArticlePage(): Promise<void> {
        await this.editArticleButton.click();

        await this.page.waitForResponse(
            (response) =>
                response.url().includes('/api/articles/') &&
                response.request().method() === 'GET'
        );
    }

    /**
     * Publishes an article with the given details.
     * @param {string} title - The title of the article.
     * @param {string} description - A brief description of the article.
     * @param {string} body - The main content of the article.
     * @param {string} [tags] - Optional tags for the article.
     * @returns {Promise<void>}
     */
    async publishArticle(
        title: string,
        description: string,
        body: string,
        tags?: string
    ): Promise<void> {
        await this.articleTitleInput.fill(title);
        await this.articleDescriptionInput.fill(description);
        await this.articleBodyInput.fill(body);

        if (tags) {
            await this.articleTagInput.fill(tags);
        }

        await this.publishArticleButton.click();

        await this.page.waitForResponse(
            (response) =>
                response.url().includes('/api/articles/') &&
                response.request().method() === 'GET'
        );

        await expect(
            this.page.getByRole('heading', { name: title })
        ).toBeVisible();
    }

    /**
     * Edits an existing article with the given details.
     * @param {string} title - The new title of the article.
     * @param {string} description - The new description of the article.
     * @param {string} body - The new content of the article.
     * @param {string} [tags] - Optional new tags for the article.
     * @returns {Promise<void>}
     */
    async editArticle(
        title: string,
        description: string,
        body: string,
        tags?: string
    ): Promise<void> {
        await this.articleTitleInput.fill(title);
        await this.articleDescriptionInput.fill(description);
        await this.articleBodyInput.fill(body);

        if (tags) {
            await this.articleTagInput.fill(tags);
        }

        await this.publishArticleButton.click();

        await this.page.waitForResponse(
            (response) =>
                response.url().includes('/api/articles/') &&
                response.request().method() === 'GET'
        );

        await expect(
            this.page.getByRole('heading', { name: title })
        ).toBeVisible();
    }

    /**
     * Deletes the currently selected article.
     * @returns {Promise<void>}
     */
    async deleteArticle(): Promise<void> {
        await this.deleteArticleButton.click();

        await expect(this.page.getByText('Global Feed')).toBeVisible();
    }
}

It is debatable if using only methods leads to easier implementation. My opinion is to stick with get functions and use them into the methods.

🎯 What's Next?

In the next article we will dive into implementing POM (Page Object Model) as Fixture and creating Auth User Session.

💬 Community: Please feel free to initiate discussions on this topic, as every contribution has the potential to drive further refinement.

---

✨ Ready to supercharge your testing skills? Let's continue this journey together!

---

🙏🏻 Thank you for reading! Building robust, scalable automation frameworks is a journey best taken together. If you found this article helpful, consider joining a growing community of QA professionals 🚀 who are passionate about mastering modern testing.

Join the community and get the latest articles and tips by signing up for the newsletter.