Clean Up Playwright Page Objects

Author: akshayp7

.eslintrc.js

@@ -0,0 +1,58 @@
+const tsPlugin = require(`@typescript-eslint/eslint-plugin`);
+const tsParser = require(`@typescript-eslint/parser`);
+
+const nodeGlobals = {
+  Buffer: `readonly`,
+  __dirname: `readonly`,
+  __filename: `readonly`,
+  clearInterval: `readonly`,
+  clearTimeout: `readonly`,
+  console: `readonly`,
+  exports: `readonly`,
+  module: `readonly`,
+  process: `readonly`,
+  require: `readonly`,
+  setInterval: `readonly`,
+  setTimeout: `readonly`,
+};
+
+module.exports = [
+  {
+    ignores: [
+      `allure-results/**`,
+      `html-report/**`,
+      `logs/**`,
+      `node_modules/**`,
+      `playwright-report/**`,
+      `test-results/**`,
+    ],
+  },
+  {
+    files: [`**/*.{js,ts}`],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: nodeGlobals,
+      sourceType: `module`,
+    },
+  },
+  {
+    files: [`**/*.ts`],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 2022,
+        sourceType: `module`,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+    },
+    rules: {
+      ...tsPlugin.configs.recommended.rules,
+      '@typescript-eslint/no-explicit-any': `off`,
+      '@typescript-eslint/no-require-imports': `off`,
+      '@typescript-eslint/no-unused-vars': `off`,
+      '@typescript-eslint/no-wrapper-object-types': `off`,
+    },
+  },
+];

eslint.config.js

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "test": "cross-env ENV=%ENV% npx playwright test",
-    "test:single": "cross-env ENV=%ENV% npx playwright test AlertsFrameWindows.test.ts --project=Chrome",
+    "test:single": "cross-env ENV=%ENV% npx playwright test Interactions.test.ts --project=Chrome",
     "test:parallel": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --project=Chrome",
     "test:serial": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --workers=1 --project=Chrome",
     "test:serial:ci": "npx playwright test --grep @Smoke --workers=1 --project=Chrome",

package.json

@@ -1,4 +1,4 @@
-import { expect, Locator, Page, BrowserContext } from '@playwright/test';
+import { Locator, Page, BrowserContext } from '@playwright/test';
 
 export class AlertsFrameWindowsPage {
     readonly page: Page;
@@ -22,46 +22,26 @@ export class AlertsFrameWindowsPage {
         this.NESTED_CHILDFRAME_LOCATOR = page.frameLocator('#frame1').frameLocator('iframe').getByText('Child Iframe');
     }
 
-    async verifyNewTab(newTabUrlExpect): Promise<void> {
+    async openNewTab(): Promise<Page> {
         // Start waiting for new page before clicking.
         const pagePromise = this.context.waitForEvent('page');
         await this.NEW_TAB_BUTTON.click();
         const newTab = await pagePromise;
         await newTab.waitForLoadState();
-        const newTabUrlActual = newTab.url();
-        //Verify New Tab URL
-        expect(newTabUrlActual == newTabUrlExpect).toBeTruthy();
-        //Verify Text displayed in New tab
-        await expect(newTab.locator('#sampleHeading')).toContainText('This is a sample page');
-        //Close New tab
-        await newTab.close();
+        return newTab;
     }
 
-    async verifyNewWindow(newWindowUrlExpect): Promise<void> {
+    async openNewWindow(): Promise<Page> {
         const pagePromise = this.context.waitForEvent('page');
         await this.NEW_WINDOW_BUTTON.click();
         const newWindow = await pagePromise;
         await newWindow.waitForLoadState();
-        const newWindowUrlActual = newWindow.url();
-        //Verify New Tab URL
-        expect(newWindowUrlActual == newWindowUrlExpect).toBeTruthy();
-        //Close New Window
-        await newWindow.close();
+        return newWindow;
     }
 
     async enterTextAndAccept(text: string): Promise<void> {
         //We have to accept the dialog before we perform action
         this.page.on('dialog', dialog => dialog.accept(text));
         await this.PROMPT_ALERT_BUTTON.click();
-        expect(this.PROMPT_RESULT).toContainText(`You entered ${text}`); // Verify User has clicked on Cancel button
     }
-
-    async verifyFrameText(expectedFrameText: string): Promise<void> {
-        const actualFrameText = await this.FRAME_LOCATOR.textContent();
-        expect(expectedFrameText == actualFrameText).toBeTruthy();
-    }
-
-    async verifyNestedFrameChildText() {
-        expect(this.NESTED_CHILDFRAME_LOCATOR).toBeVisible();
-    }
-}
+}

pageFactory/pageRepository/AlertsFrameWindowsPage.ts

@@ -1,4 +1,4 @@
-import { expect, Locator, Page, BrowserContext } from '@playwright/test';
+import { Locator, Page, BrowserContext } from '@playwright/test';
 import path from 'path';
 
 export class ElementsPage {
@@ -31,7 +31,7 @@ export class ElementsPage {
         this.FULL_NAME_EDITBOX = page.getByPlaceholder(`Full Name`);
         this.SUBMIT_BUTTON = page.getByText(`Submit`);
         this.SUBMITTED_TEXT = page.getByText(`Name:AutoTest`, { exact: true }); // Matches exact text
-        this.HOME_CHECK_BOX = page.getByText('Home');
+        this.HOME_CHECK_BOX = page.getByRole('checkbox', { name: 'Select Home' });
         this.HOME_SELECTED_TEXT = page.locator(`#result`);
         this.NO_RADIO_BUTTON = page.locator(`#noRadio`); // Using CSS Selector
         this.WEB_TABLES_HEADER = page.getByRole('columnheader');
@@ -56,35 +56,19 @@ export class ElementsPage {
         await this.SUBMIT_BUTTON.click();
     }
 
-    async verifySubmittedText(): Promise<void> {
-        await expect(this.SUBMITTED_TEXT).toBeVisible(); // Verifies if the text is visble on webpage
-    }
-
     async clickHomeCheckBox(): Promise<void> {
         await this.HOME_CHECK_BOX.check();
     }
 
-    async verifyHomeCheckboxSelectedText(): Promise<void> {
-        await expect(this.HOME_SELECTED_TEXT).toContainText('home'); // Verifies if the locator contains text
-    }
-
-    async verifyNoRadioButtonDisabled(): Promise<void> {
-        expect(this.NO_RADIO_BUTTON).toBeDisabled()
-    }
-
-    async verifyFirstColumnTableHeader(header: String): Promise<void> {
+    async getFirstColumnTableHeader(): Promise<string> {
         const headerText = await this.WEB_TABLES_HEADER.allTextContents(); // Get all Text from WebTable Header
-        expect(headerText[0] == header).toBeTruthy(); // Verify the First Column Header here we are comparing string values
+        return headerText[0];
     }
 
     async editCierraEntry(): Promise<void> {
         await this.WEB_TABLES_EDIT_ICON.click();
     }
 
-    async verifyRegistrationForm(): Promise<void> {
-        await expect(this.REGISTRATION_FORM_HEADER).toBeVisible();
-    }
-
     async registrationFormClose(): Promise<void> {
         await this.REGISTRATION_FORM_CLOSE_BUTTON.click();
     }
@@ -93,29 +77,20 @@ export class ElementsPage {
         await this.DOUBLE_CLICK_BUTTON.dblclick();
     }
 
-    async verifyDoubleClickText(): Promise<void> {
-        await expect(this.DOUBLE_CLICK_TEXT).toBeVisible();
-    }
-
     async rightClickButton(): Promise<void> {
         await this.RIGHT_CLICK_BUTTON.click({ button: 'right' }); // Right Click on button
     }
 
-    async verifyRightClickText(): Promise<void> {
-        await expect(this.RIGHT_CLICK_TEXT).toBeVisible();
-    }
-
-    async verifyNewBrowserTab(newPageURLExpected): Promise<void> {
+    async openHomeLinkInNewTab(): Promise<Page> {
         // Start waiting for new page before clicking.
         const pagePromise = this.context.waitForEvent('page');
         await this.HOME_LINK.click();
         const newPage = await pagePromise;
         await newPage.waitForLoadState();
-        const newPageURLActual = newPage.url();
-        expect(newPageURLActual == newPageURLExpected).toBeTruthy();
+        return newPage;
     }
 
-    async verifyFileDownload(): Promise<void> {
+    async downloadFile(): Promise<void> {
         // Start waiting for download before clicking. Note no await.
         const downloadPromise = this.page.waitForEvent('download');
         await this.DOWNLOAD_BUTTON.click();
@@ -125,10 +100,9 @@ export class ElementsPage {
         await download.saveAs(path.join(__dirname, `../../Downloads`, download.suggestedFilename()));
     }
 
-    async verifyFileUpload(): Promise<void> {
+    async uploadFile(): Promise<void> {
         // Select one file
         const uploadFilePath = path.join(__dirname, `../../utils/functional/sampleFile.jpeg`);
         await this.UPLOAD_BUTTON.setInputFiles(uploadFilePath);
-        await expect(this.UPLOADED_FILE_TEXT).toBeVisible();
     }
-}
+}

pageFactory/pageRepository/ElementsPage.ts

@@ -1,23 +1,23 @@
-import { expect, Locator, Page, BrowserContext } from '@playwright/test';
+import { Locator, Page, BrowserContext } from '@playwright/test';
 
 export class InteractionsPage {
     readonly page: Page;
     readonly context: BrowserContext;
     readonly DRAGGABLE: Locator;
-    readonly DROPPABLE: Locator
+    readonly DROPPABLE: Locator;
+    readonly DROPPABLE_READY: Locator;
 
     constructor(page: Page, context: BrowserContext) {
         this.page = page;
         this.context = context;
-        this.DRAGGABLE = page.getByRole('tabpanel', { name: 'Simple' }).locator('#draggable');
-        this.DROPPABLE = page.getByRole('tabpanel', { name: 'Simple' }).locator('#droppable');
+        const simpleTab = page.getByRole('tabpanel', { name: 'Simple' });
+        this.DRAGGABLE = simpleTab.locator('#draggable');
+        this.DROPPABLE = simpleTab.locator('#droppable');
+        this.DROPPABLE_READY = simpleTab.locator('#droppable.ui-droppable');
     }
 
-    async verifyDragandDrop(): Promise<void> {
-        await this.DRAGGABLE.hover();
-        await this.page.mouse.down();
-        await this.DROPPABLE.hover();
-        await this.page.mouse.up();
-        await expect(this.DROPPABLE).toContainText('Dropped'); //Verify Dropped text
+    async dragAndDrop(): Promise<void> {
+        await this.DROPPABLE_READY.waitFor();
+        await this.DRAGGABLE.dragTo(this.DROPPABLE);
     }
-}
+}

pageFactory/pageRepository/InteractionsPage.ts

@@ -1,4 +1,4 @@
-import { Page, BrowserContext, Locator, expect } from '@playwright/test';
+import { Page, BrowserContext, Locator } from '@playwright/test';
 import { WebActions } from "@lib/WebActions";
 import { testConfig } from '../../testConfig';
 
@@ -37,7 +37,4 @@ export class LoginPage {
         await this.LOGIN_BUTTON.click();
     }
 
-    async verifyProfilePage(): Promise<void> {
-        await expect(this.BOOKS_SEARCH_BOX).toBeVisible();
-    }
-}
+}

pageFactory/pageRepository/LoginPage.ts

@@ -1,4 +1,4 @@
-import { expect, Locator, Page, BrowserContext } from '@playwright/test';
+import { Locator, Page, BrowserContext } from '@playwright/test';
 
 export class WidgetsPage {
     readonly page: Page;
@@ -26,16 +26,11 @@ export class WidgetsPage {
         await this.BLUE_COLOUR_TEXT.click();
     }
 
-    async verifyBlueColourSelected(): Promise<void> {
-        await expect(this.BLUE_COLOUR_TEXT).toBeVisible();
-    }
-
-    async verifyButtonTooltip(hoverText: string): Promise<void> {
+    async hoverButtonForTooltip(): Promise<void> {
         await this.HOVER_BUTTON.hover();  //Hover over element
-        await expect(this.TOOL_TIP_TEXT).toContainText(hoverText); // Verify Tooltip
     }
 
     async oldStyleSelectColour(colourName: string): Promise<void> {
         await this.OLD_SELECT_MENU.selectOption(colourName);
     }
-}
+}

pageFactory/pageRepository/WidgetsPage.ts

@@ -1,15 +1,23 @@
 import test from '@lib/BaseTest';
+import { expect } from '@playwright/test';
 
 test(`Verify Alerts, Frame & Windows Page`, { tag: '@Smoke'}, async ({ loginPage, alertsFrameWindowsPage, webActions }) => {
     await loginPage.navigateToURL();
     await webActions.clickByText('Alerts, Frame & Windows'); // Click on Alerts, Frame & Windows icon
     await webActions.clickByText('Browser Windows'); // Click on Browser Windows navigation side bar
-    await alertsFrameWindowsPage.verifyNewTab(`https://demoqa.com/sample`);
-    await alertsFrameWindowsPage.verifyNewWindow(`https://demoqa.com/sample`);
+    const newTab = await alertsFrameWindowsPage.openNewTab();
+    expect(newTab.url()).toBe(`https://demoqa.com/sample`);
+    await expect(newTab.locator(`#sampleHeading`)).toContainText(`This is a sample page`);
+    await newTab.close();
+
+    const newWindow = await alertsFrameWindowsPage.openNewWindow();
+    expect(newWindow.url()).toBe(`https://demoqa.com/sample`);
+    await newWindow.close();
     await webActions.clickByText('Alerts');
     await alertsFrameWindowsPage.enterTextAndAccept(`Hello`); // Enter Text Hello in alert prompt and click ok
+    await expect(alertsFrameWindowsPage.PROMPT_RESULT).toContainText(`You entered Hello`);
     await webActions.clickByText('Frames');
-    await alertsFrameWindowsPage.verifyFrameText('This is a sample page');
+    await expect(alertsFrameWindowsPage.FRAME_LOCATOR).toHaveText(`This is a sample page`);
     await webActions.clickByText('Nested Frames');
-    await alertsFrameWindowsPage.verifyNestedFrameChildText();
-});
+    await expect(alertsFrameWindowsPage.NESTED_CHILDFRAME_LOCATOR).toBeVisible();
+});

tests/functional/AlertsFrameWindows.test.ts

@@ -1,30 +1,34 @@
 import test from '@lib/BaseTest';
+import { expect } from '@playwright/test';
 
 test(`Verify Elements Page`, { tag: '@Smoke'}, async ({ loginPage, elementsPage, webActions }) => {
     await loginPage.navigateToURL();
     await webActions.clickByText('Elements'); // Click on Elements Icon identified via text selector
     await webActions.clickByText('Text Box'); //Click on TextBox Navigation Sidebar identified via text selector
     await elementsPage.enterFullName(`AutoTest`);
     await elementsPage.clickSubmit();
-    await elementsPage.verifySubmittedText();
+    await expect(elementsPage.SUBMITTED_TEXT).toBeVisible();
     await webActions.clickByText('Check Box');
     await elementsPage.clickHomeCheckBox();
-    await elementsPage.verifyHomeCheckboxSelectedText();
+    await expect(elementsPage.HOME_SELECTED_TEXT).toContainText(`home`);
     await webActions.clickByText('Radio Button');
-    await elementsPage.verifyNoRadioButtonDisabled();
+    await expect(elementsPage.NO_RADIO_BUTTON).toBeDisabled();
     await webActions.clickByText('Web Tables');
-    await elementsPage.verifyFirstColumnTableHeader('First Name');
+    expect(await elementsPage.getFirstColumnTableHeader()).toBe(`First Name`);
     await elementsPage.editCierraEntry();
-    await elementsPage.verifyRegistrationForm();
+    await expect(elementsPage.REGISTRATION_FORM_HEADER).toBeVisible();
     await elementsPage.registrationFormClose();
     await webActions.clickByText('Buttons');
     await elementsPage.doubleClickButton();
-    await elementsPage.verifyDoubleClickText();
+    await expect(elementsPage.DOUBLE_CLICK_TEXT).toBeVisible();
     await elementsPage.rightClickButton();
-    await elementsPage.verifyRightClickText();
+    await expect(elementsPage.RIGHT_CLICK_TEXT).toBeVisible();
     await webActions.clickByText('Upload and Download');
-    await elementsPage.verifyFileDownload();
-    await elementsPage.verifyFileUpload();
+    await elementsPage.downloadFile();
+    await elementsPage.uploadFile();
+    await expect(elementsPage.UPLOADED_FILE_TEXT).toBeVisible();
     await webActions.clickByText('Links');
-    await elementsPage.verifyNewBrowserTab("https://demoqa.com/");
-});
+    const homePage = await elementsPage.openHomeLinkInNewTab();
+    expect(homePage.url()).toBe(`https://demoqa.com/`);
+    await homePage.close();
+});