Playwright TypeScript Framework

Author: BakkappaN

Playwright-TypeScript/.env

@@ -1,5 +1,6 @@
 ENV=qa
-URL=https://parabank.parasoft.com/parabank/index.htm
+STAGING_URL=https://www.google.com
+QA_URL=https://www.google.com
 USER_NAME=1234DF
 PASSWORD=DFGHJK67
 

Playwright-TypeScript/package-lock.json

@@ -15,6 +15,7 @@
     "@eslint/js": "^9.10.0",
     "@playwright/test": "^1.47.1",
     "@types/debug": "^4.1.12",
+    "@types/dotenv": "^8.2.0",
     "@types/node": "^22.5.5",
     "@types/winston": "^2.4.4",
     "@types/xlsx": "^0.0.36",

Playwright-TypeScript/package.json

@@ -5,15 +5,17 @@ import { writeTestStatusToExcelFile } from '../utils/excelhandler';
 import { HomePage } from '../pages/homepage';
 import { PlaylistPage } from '../pages/playlistpage';
 import { ResultPage } from '../pages/resultpage';
-import BaseTest from '../utils/basetest';
 
+import { loadTestData } from '../utils/jsonhandler';
+
+import { TestData } from '../interfaces/testdata.interface';
 
 export const test = base.extend<{
   saveLogs: void;
   homePage: HomePage;
   playlistPage: PlaylistPage;
   resultPage: ResultPage;
-  baseTest: BaseTest;
+  testData: TestData;
 }>({
   saveLogs: [async ({ }, use, testInfo) => {
     // Collecting logs during the test.
@@ -42,15 +44,14 @@ export const test = base.extend<{
     const playlistPage = new PlaylistPage(page);
     await use(playlistPage);
   },
-  resultPage: async ({ page }, use) => {
-    const resultPage = new ResultPage(page);
+  resultPage: async ({ page, testData }, use) => {
+    const resultPage = new ResultPage(page, testData);
     await use(resultPage);
   },
-  baseTest: async ({ page }, use) => {
-    const baseTest = new BaseTest(page);
-    await use(baseTest);
+  testData: async ({ }, use) => {
+    const data = await loadTestData();
+    await use(data);
   }
-
 });
 
 export { expect } from '@playwright/test';

Playwright-TypeScript/src/fixtures/testfixture.ts

@@ -0,0 +1,14 @@
+export interface Module1Data {
+    "skill1": string;
+    "skill2": string;
+    "skill3": string;
+    "skill4": string;
+    "skill5": string;
+    "skill6": string;
+    "skill7": string;
+    "skill8": string;
+}
+
+export interface TestData {
+    module1?: Module1Data;
+}

Playwright-TypeScript/src/interfaces/testdata.interface.ts

@@ -1,5 +1,7 @@
 // Inlcude playwright module
 import { expect, type Locator, type Page } from '@playwright/test';
+import dotenv from 'dotenv';
+dotenv.config();
 
 // create class
 export class HomePage {
@@ -15,9 +17,13 @@ export class HomePage {
         this.searchTextbox = page.locator('#APjFqb');
     }
 
-    async goto(){
-        await this.page.setViewportSize({width:1366, height:728})
-        await this.page.goto('https://www.google.com');
+    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));
+        }
     }
 
     async searchKeywords(param1:string){

Playwright-TypeScript/src/pages/homepage.ts

@@ -1,28 +1,21 @@
 // Inlcude playwright module
 import { expect, type Locator, type Page } from '@playwright/test';
 
-import BaseTest from '../utils/basetest';
-
 // create class
 export class ResultPage {
 
     readonly page: Page;
     readonly playlistlink: Locator;
 
-    constructor(page: Page) {
-        const baseTest = new BaseTest(page);
-
+    constructor(page: Page, testData: any) {
         // Init page object
         this.page = page;
-
-        console.log(String(baseTest.testData.module1.skill1));
         // Elements
-        this.playlistlink = page.getByRole('link',{name: String(baseTest.testData.module1.skill1) });
+        this.playlistlink = page.getByRole('link',{name: String(testData.module1.skill1) });
     }
 
     async clickOnPlaylist(){
         await expect(this.playlistlink.first()).toBeEnabled();
         await this.playlistlink.first().click();
     }
-
 }

Playwright-TypeScript/src/pages/resultpage.ts

@@ -0,0 +1,19 @@
+import fs from 'fs';
+import path from 'path';
+import { TestData } from '../interfaces/testdata.interface';
+
+export async function loadTestData() {
+    const environment = process.env.ENV || 'qa';
+    const directoryPath = path.join(__dirname.replace('utils',''), `/test-data`, environment);
+    const jsonData: TestData = {};
+
+    fs.readdirSync(directoryPath).forEach(file => {
+        if (path.extname(file) === '.json') {
+            const filePath = path.join(directoryPath, file);
+            const fileContent: TestData = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+            Object.assign(jsonData, fileContent); // Merge the content into a single object
+        }
+    });
+
+    return jsonData;
+}

Playwright-TypeScript/src/utils/basetest.ts

@@ -10,14 +10,14 @@ dotenv.config();
 /**
  * Bakkappa N
  */
-test('[2] UI automation test using playwright', { tag: '@UITest' }, async ({ page, baseTest, homePage, resultPage, playlistPage }) => {
+test('[2] UI automation test using playwright', { tag: '@UITest' }, async ({ page, testData, homePage, resultPage, playlistPage }) => {
 
     await test.step('Go to URL', async () => {
-        await baseTest.goto();
+        await homePage.goto();
     });
 
     await test.step('Search with keywords', async () => {
-        await homePage.searchKeywords(String(baseTest.testData.module1.skill1));
+        await homePage.searchKeywords(String(testData.module1?.skill1));
     });
 
     await test.step('Click on playlist', async () => {
@@ -34,7 +34,7 @@ test('[2] UI automation test using playwright', { tag: '@UITest' }, async ({ pag
 /**
  * Bakkappa N
  */
-test('[9, 12, 14] Verify excel data using playwright', { tag: '@ValidateExcel' }, async ({ page }) => {
+test('[9, 12, 14] Verify excel data using playwright', { tag: '@ValidateExcel' }, async ({ page, testData }) => {
     const filePath = path.resolve(__dirname, String(process.env.DOWNLOAD_PATH)).toString();
     const workbook = xlsx.readFile(filePath);
     const worksheet = workbook.Sheets[process.env.Sheet1 as string];