diff --git a/src/helper/api/apiHelper.ts b/src/helper/api/apiHelper.ts
index ebca483..f4c8ce0 100644
--- a/src/helper/api/apiHelper.ts
+++ b/src/helper/api/apiHelper.ts
@@ -1,23 +1,28 @@
-import { request } from "@playwright/test";
+import { request, expect, APIResponse } from "@playwright/test";
+import exp from "constants";
 export class ApiHelper {
   private apiContext: any;
   constructor(apiContext: any) {
     this.apiContext = apiContext.newContext();
   }
 
-  async hitApiEndPoint(operationType: string) {
+  async hitApiEndPoint(
+    operationType: string,
+    endPoint: string,
+    payload: object
+  ) {
     switch (operationType.toLowerCase()) {
       case "get":
-        await this.invokeGetApi();
+        await this.invokeGetApi(endPoint);
         break;
       case "post":
-        await this.invokePostApi();
+        await this.invokePostApi(endPoint, payload);
         break;
       case "delete":
         await this.invokeDeleteApi();
         break;
       case "put":
-        await this.invokePutApi();
+        await this.invokePutApi(endPoint, payload);
         break;
 
       default:
@@ -25,8 +30,70 @@ export class ApiHelper {
     }
   }
 
-  async invokeGetApi() {}
+  async invokeGetApi(endPoint: string) {
+    let response;
+    try {
+      console.log(`endPoint: , ${endPoint} `);
+      response = await this.apiContext.get(endPoint);
+      expect(response.status()).toBe(200);
+      return await response.json();
+    } catch (error) {
+      return error;
+    }
+  }
   async invokeDeleteApi() {}
-  async invokePostApi() {}
-  async invokePutApi() {}
+
+  /**
+   * The function `invokePostApi` is an asynchronous function that sends a POST request to an API
+   * endpoint with a payload and returns the response data.
+   * @param {string} endPoint - The `endPoint` parameter is a string that represents the URL or endpoint
+   * of the API you want to call.
+   * @param {object} payload - The `payload` parameter is an object that contains the data to be sent in
+   * the request body. It is typically used to send data to the server for processing or to update a
+   * resource.
+   * @returns the response data as a JSON object if the response status is 200. If there is an error, it
+   * will return the error object.
+   */
+  async invokePostApi(endPoint: string, payload: object) {
+    let response;
+    try {
+      console.log(`endPoint: , ${endPoint} payload :${payload} `);
+      response = await this.apiContext.post(endPoint, {
+        data: payload,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      expect(response.status()).toBe(200);
+      return await response.json();
+    } catch (error) {
+      return error;
+    }
+  }
+  async invokePutApi(endPoint: string, payload: object) {
+    let response;
+    try {
+      console.log(`endPoint: , ${endPoint} payload :${payload} `);
+      response = await this.apiContext.put(endPoint, {
+        data: payload,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      expect(response.status()).toBe(200);
+      return await response.json();
+    } catch (error) {
+      return error;
+    }
+  }
+
+  async verifyStatusCode(
+    response: APIResponse,
+    statusCode: number = 200
+  ): Promise<void> {
+    await expect(
+      response,
+      `${statusCode} status code was not displayed`
+    ).toBeOK();
+  }
 }
diff --git a/src/helper/web/webHelper.ts b/src/helper/web/webHelper.ts
index e69de29..e40fcc7 100644
--- a/src/helper/web/webHelper.ts
+++ b/src/helper/web/webHelper.ts
@@ -0,0 +1,86 @@
+import { BrowserContext, Page, expect } from "@playwright/test";
+
+export class WebHelper {
+  readonly webPage: Page;
+  readonly browserContext: BrowserContext;
+
+  constructor(webPage: Page, browserContext: BrowserContext) {
+    this.webPage = webPage;
+    this.browserContext = browserContext;
+  }
+
+  /**
+   * The `delay` function is an asynchronous function that waits for a specified amount of time before
+   * resolving.
+   * @param {number} time - The `time` parameter is a number that represents the duration of the delay
+   * in seconds.
+   * @returns a Promise that resolves to void.
+   */
+  async delay(time: number): Promise<void> {
+    return new Promise(function (resolve) {
+      setTimeout(resolve, time * 1000);
+    });
+  }
+
+  /**
+   * The function clicks on an element on a web page based on its text content.
+   * @param {string} text - The text parameter is a string that represents the text content of an element
+   * that you want to click on. It is used to locate the element on the web page.
+   * @param {boolean} [exact=true] - The `exact` parameter is a boolean value that determines whether the
+   * text should be matched exactly or not. If `exact` is set to `true`, the `clickByText` function will
+   * only click on elements that have an exact match with the provided text. If `exact` is set to `
+   */
+  async clickByText(text: string, exact: boolean = true): Promise<void> {
+    await this.webPage.getByText(text, { exact: exact }).click();
+  }
+
+  async rightClickButton(locator: string): Promise<void> {
+    await this.webPage.locator(locator).click({ button: "right" });
+  }
+
+  async leftClickButton(locator: string): Promise<void> {
+    await this.webPage.locator(locator).click({ button: "left" });
+  }
+
+  async navigateToUrl(url: string): Promise<void> {
+    await this.webPage.goto(url);
+  }
+
+  async verifyDragAndDrop(
+    source: string,
+    target: string,
+    verifyText: string
+  ): Promise<void> {
+    let draggable = await this.webPage.locator(source);
+    let droppable = await this.webPage.locator(target);
+    await draggable.hover();
+    await this.webPage.mouse.down();
+    await droppable.hover();
+    await this.webPage.mouse.up();
+    await expect(droppable).toContainText(verifyText);
+  }
+
+  async verifyToolTip(locator: string, hoverText: string): Promise<void> {
+    let el = await this.webPage.locator(locator);
+    el.hover();
+    await expect(el).toContainText(hoverText);
+  }
+
+  async verifyFileDownload(): Promise<void> {
+    //TBD
+  }
+
+  async verifyNewTab(newTabUrlExpected: string): Promise<void> {
+    //TBD
+  }
+
+  async verifyNewWindow(newWindowUrlExpected: string): Promise<void> {
+    //TBD
+  }
+  async verifyFrameText(): Promise<void> {
+    //TBD
+  }
+  async verifyNestedFrame(): Promise<void> {
+    //TBD
+  }
+}
diff --git a/src/tests/web/example/example.spec.js b/src/tests/web/example/example.spec.js
index 349e50d..6283d11 100644
--- a/src/tests/web/example/example.spec.js
+++ b/src/tests/web/example/example.spec.js
@@ -1,4 +1,5 @@
 // @ts-check
+
 import { test, expect } from "@playwright/test";
 
 test("has title", async ({ page }) => {
@@ -15,5 +16,12 @@ test("get started link", async ({ page }) => {
   await page.getByRole("link", { name: "Get started" }).click();
 
   // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Installation" })
+  ).toBeVisible();
+});
+
+test(`Generate HAR file`, async ({ page: Page }) => {
+  // To record HAR file, use "update:true", below code will create a directory named har and store all the har related files in it
+  await Page.routeFromHAR("har/example.har", { update: true });
 });