Playwright TypeScript Framework

Author: BakkappaN

Diff for: Playwright-TypeScript/src/pages/basepage.ts

@@ -0,0 +1,46 @@
+import { Locator, Page } from 'playwright';
+import { expect } from '@playwright/test';
+
+export class BasePage {
+    protected page: Page;
+
+    constructor(page: Page) {
+        this.page = page;
+    }
+
+    async navigateTo(url: string): Promise<void> {
+        await this.page.goto(url);
+    }
+
+    async clickOnElement(locator: Locator): Promise<void> {
+        await locator.waitFor({ state: 'visible' }); 
+        await locator.click();
+    }
+
+    async doubleClickOnElement(locator: Locator): Promise<void> {
+        await locator.waitFor({ state: 'visible' }); 
+        await locator.dblclick(); 
+    }
+
+    async enterText(locator: Locator, value: string): Promise<void> {
+        await locator.click();
+        await locator.fill(''); 
+        await locator.fill(value);
+    }
+
+    async isElementVisible(locator: Locator): Promise<boolean> {
+        return await locator.isVisible();
+    }
+
+    async getText(locator: Locator): Promise<string | null> {
+        return await locator.textContent();
+    }
+
+    async pressKeyboardKey(locator: Locator, key: string): Promise<void> {
+        await locator.press(key);
+    }
+
+    async isElementEnabled(locator: Locator): Promise<void> {
+        await expect(locator).toBeEnabled();
+    }
+}

Diff for: Playwright-TypeScript/src/pages/homepage.ts

@@ -1,36 +1,34 @@
 // Inlcude playwright module
 import { expect, type Locator, type Page } from '@playwright/test';
+import { BasePage } from './basepage';
+
 import dotenv from 'dotenv';
 dotenv.config();
 
 // create class
-export class HomePage {
+export class HomePage extends BasePage {
 
-    readonly page: Page;
     readonly searchTextbox: Locator;
 
     constructor(page: Page) {
-        // Init page object
-        this.page = page;
-
+        super(page); 
+        
         // Elements
         this.searchTextbox = page.locator('#APjFqb');
     }
 
     async goto() {
-        await this.page.setViewportSize({ width: 1366, height: 728 })
-        if (String(process.env.ENV).toUpperCase() == 'QA') {
-            await this.page.goto(String(process.env.QA_URL));
-        } else if (String(process.env.ENV).toUpperCase() == 'STAGE') {
-            await this.page.goto(String(process.env.STAGING_URL));
+        await this.page.setViewportSize({ width: 1366, height: 728 });
+        if (String(process.env.ENV).toUpperCase() === 'QA') {
+            await this.navigateTo(String(process.env.QA_URL));
+        } else if (String(process.env.ENV).toUpperCase() === 'STAGE') {
+            await this.navigateTo(String(process.env.STAGING_URL));
         }
     }
 
-    async searchKeywords(param1:string){
-        await expect(this.searchTextbox).toBeEnabled();
-        await this.searchTextbox.click();
-        await this.searchTextbox.fill(param1);
-        await this.searchTextbox.press('Enter');
+    async searchKeywords(param1: string) {
+        await this.clickOnElement(this.searchTextbox);
+        await this.enterText(this.searchTextbox, param1);
+        await this.pressKeyboardKey(this.searchTextbox, 'Enter');
     }
-
 }

Diff for: Playwright-TypeScript/src/pages/playlistpage.ts

@@ -1,24 +1,22 @@
 // Inlcude playwright module
 import { expect, type Locator, type Page } from '@playwright/test';
-import { setTimeout } from 'timers';
+import { BasePage } from './basepage';
 
 // create class
-export class PlaylistPage {
-    readonly page: Page;
+export class PlaylistPage extends BasePage {
+
     readonly videoLink: Locator;
 
     constructor(page: Page) {
-        // Init page object
-        this.page = page;
+        super(page); 
 
         // Elements
         this.videoLink = page.locator('#container > #thumbnail');
     }
 
     async clickOnVideo(){
         await this.page.waitForTimeout(3000);
-        await expect(this.videoLink.first()).toBeEnabled(),{setTimeout:60000};
-        await this.videoLink.first().click();
+        await this.isElementEnabled(this.videoLink.first());
+        await this.clickOnElement(this.videoLink.first());
     }
-
 }

Diff for: Playwright-TypeScript/src/pages/resultpage.ts

@@ -1,26 +1,27 @@
 // Inlcude playwright module
 import { expect, type Locator, type Page } from '@playwright/test';
+import { BasePage } from './basepage';
 
 // create class
-export class ResultPage {
+export class ResultPage extends BasePage {
 
-    readonly page: Page;
     readonly playlistlink: Locator;
 
     constructor(page: Page, testData: any) {
-        // Init page object
-        this.page = page;
+        super(page);
+        
         // Elements
         this.playlistlink = page.getByRole('link',{name: String(testData.module1.skill1) });
     }
 
     async clickOnPlaylist(){
-        await expect(this.playlistlink.first()).toBeEnabled();
-        await this.playlistlink.first().click();
+        await this.isElementEnabled(this.playlistlink.first());
+        await this.clickOnElement( this.playlistlink.first());
     }
 
     async clickOnPlaylistLink(playlist:string) {
-        await expect(this.page.getByRole('link', { name: playlist }).first()).toBeEnabled();
-        await this.page.getByRole('link', { name: playlist }).first().click();
+        const link = this.page.getByRole('link', { name: playlist }).first();
+        await expect(link).toBeEnabled();
+        await this.clickOnElement(link);
     }
 }