🔧 Building Playwright Framework Step By Step - Implementing POM as Fixture and Auth User Session

🎯 Introduction

Fixtures in Playwright provide a powerful mechanism to set up the environment for your tests, manage resources, and share common objects or context across multiple tests! 🚀 These reusable components allow you to define custom setup and teardown procedures that automate the preparation and cleanup processes, ensuring a consistent testing environment and optimizing your workflows.

💡 What are Fixtures?: Think of fixtures as your testing toolkit - they provide the foundation and tools your tests need to run consistently and efficiently.

🛠️ Implement POM (Page Object Model) as Fixture

📁 Create Fixtures Folder

Create fixtures/pom folders in the root directory of the project.

project-root/
├── fixtures/
│   └── pom/
│       ├── page-object-fixture.ts
│       └── test-options.ts
├── tests/
└── playwright.config.ts

🎭 Create Fixtures Files

Create and implement fixtures for the client site for all pages of the application.

🔧 Page Object Fixture

• page-object-fixture.ts: This file is used for extending the test fixture from @playwright/test

import { test as base } from '@playwright/test';
import { HomePage } from '../../pages/clientSite/homePage';
import { NavPage } from '../../pages/clientSite/navPage';
import { ArticlePage } from '../../pages/clientSite/articlePage';

export type FrameworkFixtures = {
    homePage: HomePage;

    navPage: NavPage;

    articlePage: ArticlePage;
};

export const test = base.extend<FrameworkFixtures>({
    homePage: async ({ page }, use) => {
        await use(new HomePage(page));
    },

    navPage: async ({ page }, use) => {
        await use(new NavPage(page));
    },

    articlePage: async ({ page }, use) => {
        await use(new ArticlePage(page));
    },
});

export { expect } from '@playwright/test';

⚙️ Test Options Configuration

• test-options.ts: This file is used for merging all extended test fixtures

import { test as base, mergeTests } from '@playwright/test';
import { test as pageObjectFixture } from './page-object-fixture';

const test = mergeTests(pageObjectFixture);

const expect = base.expect;
export { test, expect };

🔐 Implement Auth User Session

🎯 Strategic Advantage: Leveraging authenticated user sessions in Playwright is a strategic approach to streamline testing of password-protected applications!

This method involves pre-creating and reusing authentication tokens or session information, allowing automated tests to bypass the login UI. It significantly reduces the time and resources required for tests that need an authenticated user context, enhancing test efficiency and reliability.

🌟 Advantages of Using Authenticated User Sessions in Playwright:

• ⚡ Speed: Directly using authenticated sessions eliminates the overhead of navigating through login screens for each test, accelerating the test execution process

• 🛡️ Stability: Tests become less prone to failures related to UI changes in the authentication flow, increasing their reliability

• 🎯 Focus: Allows tests to concentrate on the core functionalities that require authentication, rather than the login process itself, making them more targeted and concise

📝 Create Auth Script File

Create auth.setup.ts file in the test directory of the project.

import { test as setup } from '../fixtures/pom/test-options';

setup('auth user', async ({ homePage, navPage, page }) => {
    await setup.step('create logged in user session', async () => {
        await homePage.navigateToHomePageGuest();

        await navPage.logIn(process.env.EMAIL!, process.env.PASSWORD!);

        await page.context().storageState({ path: '.auth/userSession.json' });
    });
});

⚙️ Update Configuration File

Add the following configuration to your playwright.config.ts:

projects: [
        {
            name: 'setup',
            use: {
                ...devices['Desktop Chrome'],
                viewport: { width: 1366, height: 768 },
            },
            testMatch: /.*\.setup\.ts/,
        },

        {
            name: 'chromium',
            use: {
                ...devices['Desktop Chrome'],
                storageState: '.auth/userSession.json',
                viewport: { width: 1366, height: 768 },
            },
            dependencies: ['setup'],
        },

        {
            name: 'firefox',
            use: { ...devices['Desktop Firefox'] },
        },

        {
            name: 'webkit',
            use: { ...devices['Desktop Safari'] },
        },
    ],

🔒 Add File to .gitignore

⚠️ Security Best Practice: Add userSession.json file to .gitignore file in the root directory of the project.

# Authentication User file
userSession.json

🏃‍♂️ Create Auth User Session

Run the auth.setup.ts file to create auth user session:

npx playwright test auth.setup.ts

👤 Create Guest User Session

Create guestSession.json file in the .auth directory of the project and add {} to it.

💡 Guest Sessions: Empty JSON object represents an unauthenticated state for tests that require guest access.

🎯 What's Next?

In the next article we will implement UI Tests - bringing your framework to life with comprehensive user interface testing!

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

---

✨ Ready to enhance your testing capabilities? Let's continue building this robust framework together!