POM Structure change

Author: akshayp7

Diff for: CustomReporterConfig.ts

@@ -6,13 +6,13 @@ const logger = winston.createLogger({
     level: 'info',
     format: winston.format.json(),
     transports: [
-      // - Write all logs with importance level of `info` or less than it
-      new winston.transports.File({ filename: 'logs/info.log', level: 'info' }),
+        // - Write all logs with importance level of `info` or less than it
+        new winston.transports.File({ filename: 'logs/info.log', level: 'info' }),
     ],
-  });
+});
 
-  // Writes logs to console
-  logger.add(console);
+// Writes logs to console
+logger.add(console);
 
 export default class CustomReporterConfig implements Reporter {
 

Diff for: Dockerfile

@@ -1,11 +1,14 @@
-FROM mcr.microsoft.com/playwright:v1.22.0-focal
+FROM mcr.microsoft.com/playwright:v1.31.0-focal
 
 WORKDIR /app
 
 COPY package.json package-lock.json ./
 
 RUN npm ci
 
+#Install chrome on Docker container
+RUN npx playwright install chrome
+
 COPY . .
 
 #Adding a non root User named "turing"
@@ -17,4 +20,4 @@ RUN chown -R turing /app
 #Switching from root user to non-root user(turing)
 USER turing
 
-CMD ["npx","cross-env","ENV=qa","npm","run","test:serial"]
+CMD npx cross-env ENV=qa npm run test:serial

Diff for: README.md

@@ -55,7 +55,7 @@ Bonus:
 
 - Supports PostgresSQL using 'pg' module.
 - Supports Excel File Read/Write using 'excel-js' module.
-- Converts HTL Reports to Zip format which can shared across.
+- Converts HTML Reports to Zip format which can shared across.
 
 ### Built With
 
@@ -108,6 +108,11 @@ https://github.com/akshayp7/playwright-typescipt-playwright-test.git
 ```sh
 npm install
 ```
+3. For first time installation run below command to download required browsers
+
+```sh
+npx playwright install
+```
 
 <!-- USAGE EXAMPLES-->
 
@@ -267,13 +272,13 @@ docker run --name playContainer playtest
 - If you want to run a different test or provide custom command, Go to Dockerfile and edit the last line which is CMD section. The below sample runs test cases serially on QA environment.
 Once you have edited the CMD section we have to follow Step 1 to build a new image and ten run the Container from that image.
 ```JS
-CMD ["npx","cross-env","ENV=qa","npm","run","test:serial"]
+CMD npx cross-env ENV=qa npm run test:serial
 ```
 
 ## Lighthouse
 Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.
-I have configure Lighthouse for Performance in my Project.
-- To configure Lighthouse navigate to "Lighthouse.js" and replace "https://www.google.com" with desired URL to test.
+I have configure Lighthouse for Performance in my Project. Please use version 9.6.8 as later versions are not compatible.
+- To configure Lighthouse navigate to "tests/lighthouse/Lighthouse.js" and replace "https://www.google.com" with desired URL to test.
 - To run test on Mobile devices, comment out desktop mode config line and uncomment the config line written for mobile devices, Default Device is Moto G4
 - To run Lighhouse test use below command, reports will be generated in htnl format in root directory with name "LighthouseReport.html" 
 ```JS
@@ -285,4 +290,4 @@ npm run lighthouse
 [overall-report-screenshot]: ReadMeImages/OverallReport.PNG
 [detailed-report-screenshot]: ReadMeImages/DetailedReport.PNG
 [failure-report-screenshot]: ReadMeImages/FailureReport.PNG
-[sonar-report-screenshot]: ReadMeImages/SonarReport.PNG
+[sonar-report-screenshot]: ReadMeImages/SonarReport.PNG

Diff for: lib/BaseTest.ts

@@ -1,28 +1,37 @@
 import { test as baseTest } from '@playwright/test';
 import { LoginPage } from '@pages/LoginPage';
-import { MyAccountPage } from '@pages/MyAccountPage';
-import { MyAddressesPage } from '@pages/MyAddressesPage'
-import { MyPersonalInformationPage } from '@pages/MyPersonalInformationPage';
+import { ElementsPage } from '@pages/ElementsPage';
+import { AlertsFrameWindowsPage } from '@pages/AlertsFrameWindowsPage';
+import { WidgetsPage } from '@pages/WidgetsPage';
+import { InteractionsPage } from '@pages/InteractionsPage';
+import { WebActions } from '@lib/WebActions';
 
 const test = baseTest.extend<{
+    webActions: WebActions;
     loginPage: LoginPage;
-    myAccountPage: MyAccountPage;
-    myAddressesPage: MyAddressesPage;
-    myPersonalInformationPage: MyPersonalInformationPage;
-
+    elementsPage: ElementsPage;
+    alertsFrameWindowsPage: AlertsFrameWindowsPage;
+    widgetsPage: WidgetsPage;
+    interactionsPage: InteractionsPage;
 }>({
-    loginPage: async ({ page }, use) => {
-        await use(new LoginPage(page));
+    webActions: async ({ page, context }, use) => {
+        await use(new WebActions(page, context));
+    },
+    loginPage: async ({ page, context }, use) => {
+        await use(new LoginPage(page, context));
+    },
+    elementsPage: async ({ page, context }, use) => {
+        await use(new ElementsPage(page, context));
     },
-    myAccountPage: async ({ page }, use) => {
-        await use(new MyAccountPage(page));
+    alertsFrameWindowsPage: async ({ page, context }, use) => {
+        await use(new AlertsFrameWindowsPage(page, context));
     },
-    myAddressesPage: async ({ page }, use) => {
-        await use(new MyAddressesPage(page));
+    widgetsPage: async ({ page, context }, use) => {
+        await use(new WidgetsPage(page, context));
     },
-    myPersonalInformationPage: async ({ page }, use) => {
-        await use(new MyPersonalInformationPage(page));
+    interactionsPage: async ({ page, context }, use) => {
+        await use(new InteractionsPage(page, context));
     }
-});
+})
 
 export default test;

Diff for: lib/WebActions.ts

@@ -4,92 +4,38 @@ import type { Page } from '@playwright/test';
 import { BrowserContext, expect } from '@playwright/test';
 import { Workbook } from 'exceljs';
 import { testConfig } from '../testConfig';
-import path from 'path';
-const waitForElement = testConfig.waitForElement;
 
 export class WebActions {
     readonly page: Page;
+    readonly context: BrowserContext;
 
-    constructor(page: Page) {
+    constructor(page: Page, context: BrowserContext) {
         this.page = page;
-    }
-
-    async navigateToURL(url: string) {
-        this.page.goto(url);
+        this.context = context;
     }
 
     async decipherPassword(): Promise<string> {
         const key = `SECRET`;
         //ENCRYPT
-        // const cipher = CryptoJS.AES.encrypt('demouat',key);
+        // const cipher = CryptoJS.AES.encrypt('Demouat@09',key);
         // console.log(cipher.toString());
         return CryptoJS.AES.decrypt(testConfig.password, key).toString(CryptoJS.enc.Utf8);
     }
 
-    async waitForPageNavigation(event: string): Promise<void> {
-        switch (event.toLowerCase()) {
-            case `networkidle`:
-                await this.page.waitForNavigation({ waitUntil: `networkidle`, timeout: waitForElement });
-                break;
-            case `load`:
-                await this.page.waitForNavigation({ waitUntil: `load`, timeout: waitForElement });
-                break;
-            case `domcontentloaded`:
-                await this.page.waitForNavigation({ waitUntil: `domcontentloaded`, timeout: waitForElement });
-        }
-    }
-
     async delay(time: number): Promise<void> {
         return new Promise(function (resolve) {
             setTimeout(resolve, time);
         });
     }
 
-    async clickElement(locator: string): Promise<void> {
-        await this.page.click(locator);
+    async clickByText(text: string): Promise<void> {
+        await this.page.getByText(text, { exact: true }).click();  //Matches locator with exact text and clicks
     }
 
     async clickElementJS(locator: string): Promise<void> {
         await this.page.$eval(locator, (element: HTMLElement) => element.click());
     }
 
-    async boundingBoxClickElement(locator: string): Promise<void> {
-        await this.delay(1000);
-        const elementHandle = await this.page.$(locator);
-        const box = await elementHandle.boundingBox();
-        await this.page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
-    }
-
-    async enterElementText(locator: string, text: string): Promise<void> {
-        await this.page.fill(locator, text);
-    }
-
-    async dragAndDrop(dragElementLocator: string, dropElementLocator: string): Promise<void> {
-        await this.page.dragAndDrop(dragElementLocator, dropElementLocator);
-    }
-
-    async selectOptionFromDropdown(locator: string, option: string): Promise<void> {
-        const selectDropDownLocator = await this.page.$(locator);
-        selectDropDownLocator.type(option);
-    }
-
-    async getTextFromWebElements(locator: string): Promise<string[]> {
-        return this.page.$$eval(locator, elements => elements.map(item => item.textContent.trim()));
-    }
-
-    async downloadFile(locator: string): Promise<string> {
-        const [download] = await Promise.all([
-            this.page.waitForEvent(`download`),
-            this.page.click(locator)
-        ]);
-        await download.saveAs(path.join(__dirname, `../Downloads`, download.suggestedFilename()));
-        return download.suggestedFilename();
-    }
-
-    async keyPress(locator: string, key: string): Promise<void> {
-        this.page.press(locator, key);
-    }
-
     async readDataFromExcel(fileName: string, sheetName: string, rowNum: number, cellNum: number): Promise<string> {
         const workbook = new Workbook();
         return workbook.xlsx.readFile(`./Downloads/${fileName}`).then(function () {
@@ -108,48 +54,4 @@ export class WebActions {
                 throw error;
         });
     }
-
-    async verifyElementText(locator: string, text: string): Promise<void> {
-        const textValue = await this.page.textContent(locator);
-        expect(textValue.trim()).toBe(text);
-    }
-
-
-    async verifyNewWindowUrlAndClick(context: BrowserContext, newWindowLocator: string, urlText: string,clickOnNewWindowLocator:string): Promise<void> {
-        const [newPage] = await Promise.all([
-            context.waitForEvent('page'),
-            this.page.click(newWindowLocator)
-        ])
-        await newPage.waitForLoadState();
-        expect(newPage.url()).toContain(urlText);
-        await newPage.click(clickOnNewWindowLocator);
-        await newPage.close();
-    }
-
-    async verifyElementContainsText(locator: string, text: string): Promise<void> {
-        await expect(this.page.locator(locator)).toContainText(text);
-    }
-
-    async verifyJSElementValue(locator: string, text: string): Promise<void> {
-        const textValue = await this.page.$eval(locator, (element: HTMLInputElement) => element.value);
-        expect(textValue.trim()).toBe(text);
-    }
-
-    async verifyElementAttribute(locator: string, attribute: string, value: string): Promise<void> {
-        const textValue = await this.page.getAttribute(locator, attribute);
-        expect(textValue.trim()).toBe(value);
-    }
-
-    async verifyElementIsDisplayed(locator: string, errorMessage: string): Promise<void> {
-        await this.page.waitForSelector(locator, { state: `visible`, timeout: waitForElement })
-            .catch(() => { throw new Error(`${errorMessage}`); });
-    }
-
-    async expectToBeTrue(status: boolean, errorMessage: string): Promise<void> {
-        expect(status, `${errorMessage}`).toBe(true);
-    }
-
-    async expectToBeValue(expectedValue: string, actualValue: string, errorMessage: string): Promise<void> {
-        expect(expectedValue.trim(), `${errorMessage}`).toBe(actualValue);
-    }
 }