updated latest version of playwright and code refactoring based on la…

…test version

.gitignore

@@ -47,6 +47,7 @@ allure-results
 html-report
 html-report.zip
 reports
+orange-hrm
 
 automation-practice
 # Typescript v1 declaration files
@@ -82,4 +83,4 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
-.now
+.now

package.json

@@ -14,18 +14,22 @@
     "test:ui-testing-playground": "yarn workspace ui-testing-playground test",
     "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"
+    "allure:ui-testing-playground": "yarn workspace ui-testing-playground allure",
+    "test:orange-hrm": "yarn workspace orange-hrm test",
+    "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"
   },
   "author": "Eric Stanley",
   "license": "MIT",
   "devDependencies": {
-    "@faker-js/faker": "^7.5.0",
-    "@playwright/test": "^1.25.2",
-    "allure-commandline": "^2.18.1",
-    "allure-playwright": "^2.0.0-beta.19",
+    "@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.25.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.8.3"
+    "playwright": "^1.42.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
   }
 }

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

@@ -15,4 +15,8 @@ export default class CommonPage {
   async waitForAnimationEnd(locator: string) {
     await actions.waitForAnimationEnd(this.page, locator);
   }
+
+  async waitForNetworkIdle() {
+    await actions.waitForNetworkIdle(this.page);
+  }
 }

src/utils/base/web/actions.ts

@@ -39,6 +39,17 @@ export const fill = async (
     async () => await page.fill(locator, text)
   );
 
+export const fillPwd = async (
+  page: Page,
+  locator: string,
+  text: string,
+  workerInfo: TestInfo
+) =>
+  await test.step(
+    workerInfo.project.name + ": Enter text: " + text.replace(/./g, '*'),
+    async () => await page.fill(locator, text)
+  );
+
 export const getInnerText = async (
   page: Page,
   locator: string,
@@ -259,6 +270,10 @@ export const getElementCoordinates = async (page: Page, locator: string) =>
 
 export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
+export const waitForNetworkIdle = (page: Page) => page.waitForLoadState('networkidle');
+
+export const waitForDocumentLoad = (page: Page) => page.waitForLoadState('domcontentloaded');
+
 export const waitForAnimationEnd = (page: Page, selector: string) =>
   page
     .locator(selector)

src/utils/base/web/screenshots.ts

@@ -47,10 +47,11 @@ export const takeScreenshot = async (
   await test.step(
     workerInfo.project.name + ": Capture screenshot to " + path,
     async () => {
-      await page.screenshot({
+      const screenshot = await page.screenshot({
         path: path,
         fullPage: fullPageFlag,
       });
+      await workerInfo.attach(path, { body: screenshot, contentType: 'image/png' });
     }
   );
 };

src/utils/reports/custom-reporter.ts

@@ -10,6 +10,19 @@ import {
 } from "@playwright/test/reporter";
 import colors from "colors";
 
+colors.setTheme({
+  silly: 'rainbow',
+  input: 'grey',
+  verbose: 'cyan',
+  prompt: 'grey',
+  info: 'green',
+  data: 'grey',
+  help: 'cyan',
+  warn: 'yellow',
+  debug: 'blue',
+  error: 'red'
+});
+
 process.env.FORCE_COLOR = "true";
 
 let totalTests = 0;
@@ -59,95 +72,94 @@ export default class CustomReporter implements Reporter {
     suiteStartTime = getFormattedTime();
     totalTests = suite.allTests().length;
     console.log(
-      `${getFormattedTime()}:`.bgCyan.black,
+      colors.help(`${getFormattedTime()}:`,
       ``,
-      `Starting the run with ${suite.allTests().length} tests`.underline.blue
-        .bold,
-      "\n"
+      colors.info(`Starting the run with ${suite.allTests().length} tests`),
+      "\n")
     );
   };
 
   onEnd = (result: FullResult): void | Promise<void> => {
     suiteEndTime = getFormattedTime();
     console.log(
-      `${getFormattedTime()}:`.bgCyan.black,
+      colors.verbose(`${getFormattedTime()}:`,
       ``,
-      `Finished the run with status`.underline.blue.bold,
+      colors.debug(`Finished the run with status`),
       result.status === "passed"
-        ? `${result.status}`.green.bold
-        : `${result.status}`.red.bold,
-      `\n\nOverall run duration: ${getDuration(suiteStartTime, suiteEndTime)}`
-        .yellow.bold
+        ? colors.info(`${result.status}`)
+        : colors.error(`${result.status}`),
+      colors.warn(`\n\nOverall run duration: ${getDuration(suiteStartTime, suiteEndTime)}`)
+      )
     );
   };
 
-  onError = (error: TestError): void => console.error(error.message.red);
+  onError = (error: TestError): void => console.error(colors.error(error));
 
   onStdErr = (
     chunk: string | Buffer,
     test: void | TestCase,
     result: void | TestResult
   ): void =>
     typeof chunk === "string"
-      ? console.log(chunk.red)
-      : console.log(chunk.toString().red);
+      ? console.log(colors.error(chunk))
+      : console.log(colors.error(chunk.toString()));
 
   onStdOut = (
     chunk: string | Buffer,
     test: void | TestCase,
     result: void | TestResult
   ): void =>
     typeof chunk === "string"
-      ? console.log(chunk.gray)
-      : console.log(chunk.toString().gray);
+      ? console.log(colors.data(chunk))
+      : console.log(colors.data(chunk.toString()));
 
   onStepBegin = (test: TestCase, result: TestResult, step: TestStep): void =>
     step.category === "test.step" &&
     console.log(
-      `${getFormattedTime()}:`.bgCyan.black,
-      ` Started step: ${step.title}`.magenta
+      colors.verbose(`${getFormattedTime()}:`,
+      colors.info(` Started step: ${step.title}`))
     );
 
   onStepEnd = (test: TestCase, result: TestResult, step: TestStep): void =>
     step.category === "test.step" &&
     console.log(
-      `${getFormattedTime()}:`.bgCyan.black,
-      ` Finished step: ${step.title}`.cyan
+      colors.verbose(`${getFormattedTime()}:`,
+      colors.info(` Finished step: ${step.title}`))
     );
 
   onTestBegin = (test: TestCase, result: TestResult): void => {
     testStartTime = getFormattedTime();
     console.log(
-      `Test ${i} of ${totalTests} - ${test.parent.title}`.yellow.bold
+      colors.warn(`Test ${i} of ${totalTests} - ${test.parent.title}`)
     );
     result.retry === 0
       ? console.log(
-          `${getFormattedTime()}:`.bgCyan.black,
+          colors.verbose(`${getFormattedTime()}:`,
           ` Started test`,
-          `${test.title}`.yellow
+          colors.warn(`${test.title}`))
         )
       : console.log(
-          `${getFormattedTime()}:`.bgCyan.black,
+          colors.verbose(`${getFormattedTime()}:`,
           ` Retrying test... (attempt ${result.retry} of ${test.retries})`,
-          `${test.title}`.yellow
+          colors.warn(`${test.title}`))
         );
   };
 
   onTestEnd = (test: TestCase, result: TestResult): void => {
     testEndTime = getFormattedTime();
     console.log(
-      `${getFormattedTime()}:`.bgCyan.black,
+      colors.verbose(`${getFormattedTime()}:`,
       ` Finished test`,
-      `${test.title}`.yellow,
+      colors.warn(`${test.title}`),
       `with status`,
       result.status === "passed"
-        ? `${result.status}`.green.bold
-        : `${result.status}`.red.bold,
-      `\n\nTest duration: ${getDuration(testStartTime, testEndTime)}\n`
+        ? colors.info(`${result.status}`)
+        : colors.error(`${result.status}`),
+      `\n\nTest duration: ${getDuration(testStartTime, testEndTime)}\n`)
     );
     if (result.status === "failed") {
-      console.log(stripAnsi(result.error?.message.red ?? ""));
-      console.log(stripAnsi(result.error?.stack.red ?? ""));
+      console.log(stripAnsi(colors.error(result.error?.message) ?? ""));
+      console.log(stripAnsi(colors.error(result.error?.stack) ?? ""));
     }
     if (result.status === "passed" || result.retry === 3) i++;
   };

tsconfig.json

@@ -1,12 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "module": "es6",
+    "target": "es2020",
+    "module": "es2020",
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "noImplicitAny": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "commonjs": "es2020",
     "baseUrl": ".",
     "paths": {
       /* Specify a set of entries that re-map imports to additional lookup locations. */