updated framework actions

.gitignore

@@ -48,6 +48,7 @@ html-report
 html-report.zip
 reports
 orange-hrm
+deriv-api
 
 automation-practice
 # Typescript v1 declaration files

config.init.ts

@@ -2,7 +2,7 @@ import path from "path";
 
 export const initConfig = (appName: string) => {
   const configFile = path.join(
-    __dirname,
+    __dirname.toString(),
     "src",
     "apps",
     appName,

package.json

@@ -8,28 +8,38 @@
   ],
   "scripts": {
     "test": "yarn workspace ui-testing-playground test",
+    "test:ui": "yarn workspace ui-testing-playground test:ui",
     "test:debug": "yarn workspace ui-testing-playground test:debug",
     "report": "yarn workspace ui-testing-playground report",
     "allure": "yarn workspace ui-testing-playground allure",
     "test:ui-testing-playground": "yarn workspace ui-testing-playground test",
+    "test::ui:ui-testing-playground": "yarn workspace ui-testing-playground test:ui",
     "test:debug:ui-testing-playground": "yarn workspace ui-testing-playground test:debug",
     "report:ui-testing-playground": "yarn workspace ui-testing-playground report",
     "allure:ui-testing-playground": "yarn workspace ui-testing-playground allure",
     "test:orange-hrm": "yarn workspace orange-hrm test",
+    "test:ui:orange-hrm": "yarn workspace orange-hrm test:ui",
     "test:debug:orange-hrm": "yarn workspace orange-hrm test:debug",
     "report:orange-hrm": "yarn workspace orange-hrm report",
-    "allure:orange-hrm": "yarn workspace orange-hrm allure"
+    "allure:orange-hrm": "yarn workspace orange-hrm allure",
+    "test:deriv-api": "yarn workspace deriv-api test",
+    "test:ui:deriv-api": "yarn workspace deriv-api test:ui",
+    "test:debug:deriv-api": "yarn workspace deriv-api test:debug",
+    "report:deriv-api": "yarn workspace deriv-api report",
+    "allure:deriv-api": "yarn workspace deriv-api allure"
   },
   "author": "Eric Stanley",
   "license": "MIT",
-  "devDependencies": {
+  "dependencies": {
     "@faker-js/faker": "^8.4.1",
     "@playwright/test": "^1.42.1",
     "allure-commandline": "^2.27.0",
     "allure-playwright": "^2.13.0",
     "colors": "^1.4.0",
     "playwright": "^1.42.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@types/node": "^20.11.24",
+    "lodash": "^4.17.21"
   }
 }

src/apps/common/pages/common.page.ts

@@ -1,13 +1,14 @@
 import type { Page, TestInfo } from "@playwright/test";
-import { matchScreenshot } from "@utils/base/web/screenshots";
+import { matchScreenshot, takeScreenshot } from "@utils/base/web/screenshots";
 import * as actions from "@utils/base/web/actions";
 import { appConfigPath } from "@config";
 
 export default class CommonPage {
-  constructor(public page: Page, public workerInfo: TestInfo) {}
+  constructor(public page: Page, public workerInfo: TestInfo) {
+    const config = require(appConfigPath);
+  }
 
   async verifySnapshot(name: string) {
-    const config = require(appConfigPath);
     !config.default.use.headless &&
       (await matchScreenshot(this.page, name, this.workerInfo));
   }
@@ -19,4 +20,26 @@ export default class CommonPage {
   async waitForNetworkIdle() {
     await actions.waitForNetworkIdle(this.page);
   }
+
+  async waitForDocumentLoad() {
+    await actions.waitForDocumentLoad(this.page);
+  }
+
+  async deBounceDOM() {
+    await actions.deBounceDOM(this.page);
+  }
+
+  async verifyElementDoesNotExists(locator: string) {
+    await actions.verifyElementDoesNotExists(this.page, locator, this.workerInfo);
+  }
+
+  async captureScreenshot(name: string) {
+    await takeScreenshot(
+      this.page, 
+      name, 
+      true, 
+      this.workerInfo
+      )
+  }
+
 }

src/apps/ui-testing-playground/package.json

@@ -6,6 +6,7 @@
   "license": "MIT",
   "scripts": {
     "test": "APP_NAME=ui-testing-playground NODE_ENV=dev playwright test",
+    "test:ui": "APP_NAME=ui-testing-playground NODE_ENV=dev playwright test --ui",
     "test:debug": "APP_NAME=ui-testing-playground NODE_ENV=dev PWDEBUG=1 playwright test",
     "report": "npx playwright show-report reports/playwright-report",
     "allure": "npx allure generate reports/allure/allure-result -o reports/allure/allure-report --clean && npx allure open reports/allure/allure-report"

src/utils/base/web/actions.ts

@@ -1,5 +1,6 @@
 import type { Page, TestInfo } from "@playwright/test";
 import { expect, test } from "@playwright/test";
+var _ = require('lodash');
 
 export const pressEnter = async (page: Page, workerInfo: TestInfo) =>
   await test.step(
@@ -150,6 +151,17 @@ export const clickLastElement = async (
     async () => await page.locator(locator).last().click()
   );
 
+export const clickNthElement = async (
+  page: Page,
+  locator: string,
+  index: number,
+  workerInfo: TestInfo
+) =>
+  await test.step(
+    workerInfo.project.name + ": Click nth element " + locator,
+    async () => await page.locator(locator).nth(index).click()
+  );
+
 export const javascriptClick = async (
   page: Page,
   locator: string,
@@ -298,3 +310,38 @@ export const elementHasClass = async (
         ? true
         : false
   );
+
+export const isJSONEqual = (
+  page: Page,
+  obj1, 
+  obj2,
+  workerInfo: TestInfo
+) => 
+  test.step(
+    workerInfo.project.name + ": Check if JSON objects are equal",
+    () => {
+      console.log("Expected: \n" 
+        + JSON.stringify(obj1, null, 2) + "\n\nActual: \n" 
+        + JSON.stringify(obj2, null, 2) + "\n\n");
+      return _.isEqual(obj1, obj2);
+    }
+  );
+
+export const deBounceDOM = async (page) => {
+    const pollDelay = 500;
+    const stableDelay = 1000;
+    let markupPrevious = '';
+    const timerStart = new Date();
+    let isStable = false;
+    while (!isStable) {
+        const markupCurrent = await page.evaluate(() => document.body.innerHTML);
+        if (markupCurrent == markupPrevious) {
+            const elapsed = new Date().getTime() - timerStart.getTime();
+            isStable = stableDelay <= elapsed;
+        } else {
+            markupPrevious = markupCurrent;
+        }
+        if (!isStable) await new Promise(resolve => setTimeout(resolve, pollDelay));
+    }
+};
+

tsconfig.json

@@ -7,7 +7,7 @@
     "noImplicitAny": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "commonjs": "es2020",
+    // "commonjs": "es2020",
     "baseUrl": ".",
     "paths": {
       /* Specify a set of entries that re-map imports to additional lookup locations. */