vasu-playwright-utils 0.11.1 → 0.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasu-playwright-utils",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "Playwright Typescript Library with reusable utilities",
   "main": "./dist/src/vasu-playwright-lib/index.js",
   "types": "./dist/src/vasu-playwright-lib/index.d.ts",
@@ -38,30 +38,31 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@playwright/test": "~1.41.0",
-    "@types/node": "^20.11.5",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@playwright/test": "~1.41.1",
+    "@types/node": "^20.11.14",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "allure-commandline": "^2.26.0",
-    "allure-playwright": "^2.10.0",
-    "axios": "^1.6.5",
+    "allure-playwright": "^2.11.1",
+    "axios": "^1.6.7",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.0.2",
-    "eslint-plugin-playwright": "^0.21.0",
+    "eslint-plugin-jsdoc": "^48.0.4",
+    "eslint-plugin-playwright": "^0.22.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
+    "husky": "^9.0.7",
+    "lint-staged": "^15.2.1",
     "prettier": "^3.2.4",
     "rimraf": "^5.0.5",
     "tslib": "^2.6.2",
@@ -75,7 +76,7 @@
     "validate": "tsc --noEmit",
     "prepublishOnly": "npm run build",
     "postpublish": "npm run clean",
-    "ready": "rimraf dist node_modules package-lock.json && npm i && npm run validate && npm run build",
+    "ready": "rimraf dist node_modules package-lock.json && npm i && npm run validate && npm run build && npm run test",
     "test": "playwright test",
     "test:chromium": "playwright test --retries 0 --project=chromiumheadless",
     "test:chromium-headed": "playwright test -j 1 --retries 0 --headed --project=chromium",

package/src/vasu-playwright-lib/constants/index.ts

@@ -0,0 +1,3 @@
+export * from './loadstate';
+export * from './timeouts';
+export * as Timeouts from './timeouts';

package/src/vasu-playwright-lib/constants/loadstate.ts

@@ -0,0 +1,50 @@
+/**
+ * loadstate.ts
+ *
+ * This module provides two key constants: `defaultLoadState` and `defaultVisibleOnlyOption`.
+ *
+ * - `defaultLoadState` is used to set the initial page load state. It serves as the default value
+ * in functions such as `gotoURL`, `waitForPageLoadState`, and `clickAndNavigate`.
+ *
+ * - `defaultVisibleOnlyOption` configures the default visibility setting for locators. It dictates
+ * whether locators should, by default, find only visible elements. This setting is particularly
+ * useful in action utilities like `click`, `fill` etc.
+ *
+ * Both constants can be initialized within this module and can be overridden in specific functions
+ * as necessary, allowing for flexible and context-specific configurations.
+ *
+ * @module loadstate
+ */
+
+import { WaitForLoadStateOptions } from '../types/optional-parameter-types';
+
+/**
+ * Represents the load state option for waiting for specific events during page navigation.
+ * This constant is utilized in the gotoURL, waitForPageLoadState, and clickAndNavigate helper functions.
+ * It can be set to values like 'load', 'domcontentloaded', or 'networkidle'.
+ */
+let defaultLoadState: WaitForLoadStateOptions = 'domcontentloaded';
+
+export function getDefaultLoadState(): WaitForLoadStateOptions {
+  return defaultLoadState;
+}
+
+export function setDefaultLoadState(value: WaitForLoadStateOptions): void {
+  defaultLoadState = value;
+}
+
+/**
+ * Default visibility setting for locators.
+ * This object holds the global configuration for whether locators should by default only find visible elements.
+ * It can be used across the project to maintain a consistent behavior for element visibility handling.
+ */
+export const defaultVisibleOnlyOption = { onlyVisible: true };
+
+/**
+ * Sets the default visibility filter for locator functions.
+ * This function allows changing the global default setting for whether locators should only find visible elements.
+ * @param value - The value to set for the default visibility filter (true if only visible elements should be found).
+ */
+export function setDefaultLocatorFilterVisibility(value: boolean): void {
+  defaultVisibleOnlyOption.onlyVisible = value;
+}

package/src/vasu-playwright-lib/constants/timeouts.ts

@@ -0,0 +1,53 @@
+/**
+ * timeouts.ts: This module provides Timeout constants that can be used to override various actions, conditional statements and assertions.
+ * Instead of hard coding the timeout when overriding any utility functions, use these Timeout constants.
+ */
+
+/**
+ * Timeout constant for instant actions/assertions, set to 1000 milliseconds (1 second).
+ */
+export const INSTANT_TIMEOUT = 1000;
+
+/**
+ * Timeout constant for small actions/assertions, set to 5000 milliseconds (5 seconds).
+ */
+export const SMALL_TIMEOUT = 5 * 1000;
+
+/**
+ * Standard timeout constant, set to 15000 milliseconds (15 seconds).
+ */
+export const STANDARD_TIMEOUT = 15 * 1000;
+
+/**
+ * Timeout constant for bigger actions/assertions, set to 30000 milliseconds (30 seconds).
+ */
+export const BIG_TIMEOUT = 30 * 1000;
+
+/**
+ * Maximum timeout constant, set to 60000 milliseconds (1 minute).
+ */
+export const MAX_TIMEOUT = 60 * 1000;
+
+/**
+ * Timeout constants used in the playwright.config.ts file.
+ */
+
+/**
+ * Timeout constant for Playwright's expect function, set to 5000 milliseconds (5 seconds).
+ */
+export const EXPECT_TIMEOUT = 5 * 1000;
+
+/**
+ * Timeout constant for Playwright's action functions, set to 5000 milliseconds (5 seconds).
+ */
+export const ACTION_TIMEOUT = 5 * 1000;
+
+/**
+ * Timeout constant for Playwright's navigation functions, set to 30000 milliseconds (30 seconds).
+ */
+export const NAVIGATION_TIMEOUT = 30 * 1000;
+
+/**
+ * Timeout constant for Playwright's test functions, set to 120000 milliseconds (2 minutes).
+ */
+export const TEST_TIMEOUT = 2 * 60 * 1000;

package/src/vasu-playwright-lib/index.ts

@@ -0,0 +1,5 @@
+export * from './utils';
+export * from './constants';
+export * from './setup';
+export * from './types';
+export { default as CustomLogger } from './setup/custom-logger';

package/src/vasu-playwright-lib/setup/custom-logger.ts

@@ -0,0 +1,75 @@
+/**
+ * custom-logger.ts: This module provides a custom logger for Playwright tests. It implements the Reporter interface from Playwright
+ * and uses the Winston logging library to provide detailed logs for test execution. The logger includes custom colors
+ * for different log levels and can be configured to log to the console or a file.
+ */
+
+import { Reporter, TestCase, TestError, TestResult } from '@playwright/test/reporter';
+import winston from 'winston';
+
+/**
+ * Custom colors for the logger
+ */
+const customColors = {
+  info: 'blue',
+  error: 'red',
+};
+winston.addColors(customColors);
+
+/**
+ * Logger configuration
+ */
+export const logger = winston.createLogger({
+  level: 'info',
+  format: winston.format.combine(
+    winston.format.colorize({ all: true }),
+    winston.format.timestamp(),
+    winston.format.printf(({ timestamp, level, message }) => {
+      return `${timestamp} [${level}]: ${message}`;
+    }),
+  ),
+  transports: [
+    new winston.transports.Console(),
+    // If you want to log to a file uncomment below line
+    // new winston.transports.File({ filename: 'logs/info.log', level: 'info' }),
+  ],
+});
+
+/**
+ * CustomLogger class that implements the Reporter interface from Playwright
+ */
+export default class CustomLogger implements Reporter {
+  /**
+   * Logs the start of a test case
+   * @param {TestCase} test - The test case that is starting
+   */
+  onTestBegin(test: TestCase): void {
+    logger.info(`Test Case Started : ${test.title}`);
+  }
+
+  /**
+   * Logs the end of a test case
+   * @param {TestCase} test - The test case that ended
+   * @param {TestResult} result - The result of the test case
+   */
+  onTestEnd(test: TestCase, result: TestResult): void {
+    if (result.status === 'passed') {
+      logger.info(`\x1b[32mTest Case Passed : ${test.title}\x1b[0m`); // Green color
+    } else if (result.status === 'skipped') {
+      logger.info(`\x1b[33mTest Case Skipped : ${test.title}\x1b[0m`); // Yellow color
+    } else if (result.status === 'failed' && result.error) {
+      // Playwright inbuild reporter logs the error
+      // logger.error(
+      //   `Test Case Failed: ${test.title} Error: ${result.error.message}`,
+      // );
+    }
+  }
+
+  /**
+   * Logs an error
+   * @param {TestError} error - The error
+   */
+  onError(error: TestError): void {
+    logger.error(error.message);
+  }
+}

package/src/vasu-playwright-lib/setup/index.ts

@@ -0,0 +1,2 @@
+export * from './custom-logger';
+export * as CustomLogger from './custom-logger';

package/src/vasu-playwright-lib/types/index.ts

@@ -0,0 +1,2 @@
+// export * from './optional-parameter-types';
+export * as ParameterTypes from './optional-parameter-types';

package/src/vasu-playwright-lib/types/optional-parameter-types.ts

@@ -0,0 +1,66 @@
+/**
+ * Types.ts: This module provides type definitions that are used as optional parameters for utility functions in other modules.
+ * These types are based on the parameters of Playwright's built-in methods and are used to provide type safety and code completion.
+ */
+
+import { Locator, Page } from '@playwright/test';
+
+/**
+ * 1. Navigation Options: These types are used for navigation actions such as going to a URL, reloading a page, or waiting for a certain load state.
+ * They are based on the parameters of Playwright's built-in navigation methods.
+ */
+export type GotoOptions = Parameters<Page['goto']>[1];
+export type NavigationOptions = Parameters<Page['reload']>[0]; // Same for GoBack, GoForward
+export type WaitForLoadStateOptions = Parameters<Page['waitForLoadState']>[0];
+
+/**
+ * 2. Action Options: These types are used for actions such as clicking, filling input fields, typing, etc.
+ * They are based on the parameters of Playwright's built-in action methods.
+ */
+export type VisibilityOption = { onlyVisible?: boolean };
+export type ClickOptions = Parameters<Locator['click']>[0] &
+  VisibilityOption & {
+    loadState?: WaitForLoadStateOptions;
+  };
+export type FillOptions = Parameters<Locator['fill']>[1] & VisibilityOption;
+export type PressSequentiallyOptions = Parameters<Locator['pressSequentially']>[1] & VisibilityOption;
+export type ClearOptions = Parameters<Locator['clear']>[0] & VisibilityOption;
+export type SelectValues = Parameters<Locator['selectOption']>[0] & VisibilityOption;
+export type SelectOptions = Parameters<Locator['selectOption']>[1] & VisibilityOption;
+export type CheckOptions = Parameters<Locator['check']>[0] & VisibilityOption;
+export type HoverOptions = Parameters<Locator['hover']>[0] & VisibilityOption;
+export type UploadValues = Parameters<Locator['setInputFiles']>[0] & VisibilityOption;
+export type UploadOptions = Parameters<Locator['setInputFiles']>[1] & VisibilityOption;
+export type DragOptions = Parameters<Locator['dragTo']>[1] & VisibilityOption;
+export type DoubleClickOptions = Parameters<Locator['dblclick']>[0] & VisibilityOption;
+
+/**
+ * 3. Expect Options: These types are used for assertions, Timeouts, etc in tests.
+ * They are based on the parameters of Playwright's built-in expect methods.
+ */
+export type TimeoutOption = { timeout?: number };
+export type SoftOption = { soft?: boolean };
+export type MessageOrOptions = string | { message?: string };
+export type ExpectOptions = TimeoutOption & SoftOption & MessageOrOptions;
+export type ExpectTextOptions = {
+  ignoreCase?: boolean;
+  useInnerText?: boolean;
+};
+
+export type SwitchPageOptions = {
+  loadState?: 'load' | 'domcontentloaded' | 'networkidle';
+  timeout?: number;
+};
+
+/**
+ * 4. Locator Options: These types are used for locating elements on a page.
+ * They are based on the parameters of Playwright's built-in locator methods.
+ */
+export type LocatorOptions = Parameters<Page['locator']>[1] & VisibilityOption;
+export type GetByTextOptions = Parameters<Locator['getByText']>[1] & VisibilityOption;
+export type GetByRoleTypes = Parameters<Locator['getByRole']>[0] & VisibilityOption;
+export type GetByRoleOptions = Parameters<Locator['getByRole']>[1] & VisibilityOption;
+export type GetByLabelOptions = Parameters<Locator['getByLabel']>[1] & VisibilityOption;
+export type GetByPlaceholderOptions = Parameters<Locator['getByPlaceholder']>[1] & VisibilityOption;
+
+export type FrameOptions = Parameters<Page['frame']>[0];

package/src/vasu-playwright-lib/utils/action-utils.ts

@@ -0,0 +1,343 @@
+/**
+ * action-utils.ts: This module provides a set of utility functions for performing various actions in Playwright tests.
+ * These actions include navigation, interaction with page elements, handling of dialogs, and more.
+ */
+import { Dialog, Locator } from '@playwright/test';
+import { getPage } from './page-utils';
+import {
+  CheckOptions,
+  ClearOptions,
+  ClickOptions,
+  DoubleClickOptions,
+  DragOptions,
+  FillOptions,
+  HoverOptions,
+  PressSequentiallyOptions,
+  SelectOptions,
+  TimeoutOption,
+  UploadOptions,
+  UploadValues,
+  VisibilityOption,
+} from '../types/optional-parameter-types';
+import { STANDARD_TIMEOUT } from '../constants/timeouts';
+import { getLocator } from './locator-utils';
+import { defaultVisibleOnlyOption, getDefaultLoadState } from '../constants/loadstate';
+
+/**
+ * 1. Actions: This section contains functions for interacting with elements on a web page.
+ * These functions include clicking, filling input fields, typing, clearing input fields, checking and unchecking checkboxes, selecting options in dropdowns, and more.
+ */
+
+/**
+ * Clicks on a specified element.
+ * @param {string | Locator} input - The element to click on.
+ * @param {ClickOptions} options - The click options.
+ */
+export async function click(input: string | Locator, options?: ClickOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.click(options);
+}
+
+/**
+ * Clicks on a specified element and waits for navigation.
+ * @param {string | Locator} input - The element to click on.
+ * @param {ClickOptions} options - The click options.
+ */
+export async function clickAndNavigate(input: string | Locator, options?: ClickOptions): Promise<void> {
+  const timeout = options?.timeout || STANDARD_TIMEOUT;
+  await Promise.all([click(input, options), getPage().waitForEvent('framenavigated', { timeout: timeout })]);
+  await getPage().waitForLoadState(options?.loadState || getDefaultLoadState(), {
+    timeout: timeout,
+  });
+}
+
+/**
+ * Fills a specified element with a value.
+ * @param {string | Locator} input - The element to fill.
+ * @param {string} value - The value to fill the element with.
+ * @param {FillOptions} options - The fill options.
+ */
+export async function fill(input: string | Locator, value: string, options?: FillOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.fill(value, options);
+}
+
+/**
+ * Fills a specified element with a value and press Enter.
+ * @param {string | Locator} input - The element to fill.
+ * @param {string} value - The value to fill the element with.
+ * @param {FillOptions} options - The fill options.
+ */
+export async function fillAndEnter(input: string | Locator, value: string, options?: FillOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.fill(value, options);
+  await locator.press('Enter');
+}
+
+/**
+ * Types a value into a specified element, simulating keystrokes character by character.
+ * @param {string | Locator} input - The element into which the value will be typed. This can be either a string representing the selector or a Locator object.
+ * @param {string} value - The string value to be typed into the element, character by character.
+ * @param {PressSequentiallyOptions} [options] - Optional configuration for the typing action.
+ */
+export async function pressSequentially(
+  input: string | Locator,
+  value: string,
+  options?: PressSequentiallyOptions,
+): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.pressSequentially(value, options);
+}
+
+/**
+ * Simulates the action of pressing a key or a combination of keys on the specified element.
+ * This function is useful for scenarios where you need to simulate key presses like 'Enter', 'Tab', etc.
+ * @param {string | Locator} input - The element on which the key press action will be performed. This can be either a string representing the selector or a Locator object.
+ * @param {string} key - The key or combination of keys to be pressed. For example, 'Enter', 'Tab', or 'Control+A'.
+ * @param {PressSequentiallyOptions} [options] - Optional configuration for the key press action. This can include options like delay between key presses.
+ */
+export async function pressKeyboard(
+  input: string | Locator,
+  key: string,
+  options?: PressSequentiallyOptions,
+): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.press(key, options);
+}
+
+/**
+ * Clears the value of a specified element.
+ * @param {string | Locator} input - The element to clear.
+ * @param {ClearOptions} options - The clear options.
+ */
+export async function clear(input: string | Locator, options?: ClearOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.clear(options);
+}
+
+/**
+ * Checks a specified checkbox or radio button.
+ * @param {string | Locator} input - The checkbox or radio button to check.
+ * @param {CheckOptions} options - The check options.
+ */
+export async function check(input: string | Locator, options?: CheckOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.check(options);
+}
+
+/**
+ * Unchecks a specified checkbox or radio button.
+ * @param {string | Locator} input - The checkbox or radio button to uncheck.
+ * @param {CheckOptions} options - The uncheck options.
+ */
+export async function uncheck(input: string | Locator, options?: CheckOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.uncheck(options);
+}
+
+/**
+ * Selects an option in a dropdown by its value.
+ * @param {string | Locator} input - The dropdown to select an option in.
+ * @param {string} value - The value of the option to select.
+ * @param {SelectOptions} options - The select options.
+ */
+export async function selectByValue(input: string | Locator, value: string, options?: SelectOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.selectOption({ value: value }, options);
+}
+
+/**
+ * Selects options in a dropdown by their values (multi select).
+ * @param {string | Locator} input - The dropdown to select options in.
+ * @param {Array<string>} value - The values of the options to select.
+ * @param {SelectOptions} options - The select options.
+ */
+export async function selectByValues(
+  input: string | Locator,
+  value: Array<string>,
+  options?: SelectOptions,
+): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.selectOption(value, options);
+}
+
+/**
+ * Selects an option in a dropdown by its text.
+ * @param {string | Locator} input - The dropdown to select an option in.
+ * @param {string} text - The text of the option to select.
+ * @param {SelectOptions} options - The select options.
+ */
+export async function selectByText(input: string | Locator, text: string, options?: SelectOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.selectOption({ label: text }, options);
+}
+
+/**
+ * Selects an option in a dropdown by its index.
+ * @param {string | Locator} input - The dropdown to select an option in.
+ * @param {number} index - The index of the option to select.
+ * @param {SelectOptions} options - The select options.
+ */
+export async function selectByIndex(input: string | Locator, index: number, options?: SelectOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.selectOption({ index: index }, options);
+}
+
+/**
+ * 2. Alerts: This section contains functions for handling alert dialogs.
+ * These functions include accepting and dismissing alerts, and getting the text of an alert.
+ * Note: These functions currently have some repetition and could be optimized by applying the DRY (Don't Repeat Yourself) principle.
+ */
+
+/**
+ * Accepts an alert dialog.
+ * @param {string | Locator} input - The element to click to trigger the alert.
+ * @param {string} promptText - The text to enter into a prompt dialog.
+ * @returns {Promise<string>} - The message of the dialog.
+ */
+export async function acceptAlert(input: string | Locator, promptText?: string): Promise<string> {
+  const locator = getLocator(input);
+  let dialogMessage = '';
+  getPage().once('dialog', dialog => {
+    dialogMessage = dialog.message();
+    dialog.accept(promptText).catch(e => console.error('Error accepting dialog:', e));
+  });
+  await locator.click();
+  // temporary fix to alerts - Need to be fixed
+  // await getPage().waitForEvent('dialog');
+  return dialogMessage;
+}
+
+/**
+ * Dismisses an alert dialog.
+ * @param {string | Locator} input - The element to click to trigger the alert.
+ * @returns {Promise<string>} - The message of the dialog.
+ */
+export async function dismissAlert(input: string | Locator): Promise<string> {
+  const locator = getLocator(input);
+  let dialogMessage = '';
+  getPage().once('dialog', dialog => {
+    dialogMessage = dialog.message();
+    dialog.dismiss().catch(e => console.error('Error dismissing dialog:', e));
+  });
+  await locator.click({ noWaitAfter: true });
+  // temporary fix for alerts - Need to be fixed
+  // await getPage().waitForEvent('dialog');
+  return dialogMessage;
+}
+
+/**
+ * Gets the text of an alert dialog.
+ * @param {string | Locator} input - The element to click to trigger the alert.
+ * @returns {Promise<string>} - The message of the dialog.
+ */
+export async function getAlertText(input: string | Locator): Promise<string> {
+  const locator = getLocator(input);
+  let dialogMessage = '';
+  const dialogHandler = (dialog: Dialog) => {
+    dialogMessage = dialog.message();
+  };
+  getPage().once('dialog', dialogHandler);
+  await locator.click();
+  await getPage().waitForEvent('dialog');
+  getPage().off('dialog', dialogHandler);
+  return dialogMessage;
+}
+
+/**
+ * Hovers over a specified element.
+ * @param {string | Locator} input - The element to hover over.
+ * @param {HoverOptions} options - The hover options.
+ */
+export async function hover(input: string | Locator, options?: HoverOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.hover(options);
+}
+
+/**
+ * Focuses on a specified element.
+ * @param {string | Locator} input - The element to focus on.
+ * @param {TimeoutOption} options - The timeout options.
+ */
+export async function focus(input: string | Locator, options?: TimeoutOption & VisibilityOption): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.focus(options);
+}
+
+/**
+ * Drags and drops a specified element to a destination.
+ * @param {string | Locator} input - The element to drag.
+ * @param {string | Locator} dest - The destination to drop the element at.
+ * @param {DragOptions} options - The drag options.
+ */
+export async function dragAndDrop(
+  input: string | Locator,
+  dest: string | Locator,
+  options?: DragOptions,
+): Promise<void> {
+  const drag = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  const drop = getLocator(dest, { ...defaultVisibleOnlyOption, ...options });
+  await drag.dragTo(drop, options);
+}
+
+/**
+ * Double clicks on a specified element.
+ * @param {string | Locator} input - The element to double click on.
+ * @param {DoubleClickOptions} options - The double click options.
+ */
+export async function doubleClick(input: string | Locator, options?: DoubleClickOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.dblclick(options);
+}
+
+/**
+ * Downloads a file from a specified element.
+ * @param {string | Locator} input - The element to download the file from.
+ * @param {string} path - The path to save the downloaded file to.
+ */
+export async function downloadFile(input: string | Locator, path: string, options?: ClickOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  const downloadPromise = getPage().waitForEvent('download');
+  await click(locator, options);
+  const download = await downloadPromise;
+  // Wait for the download process to complete
+  console.log(await download.path());
+  // Save downloaded file somewhere
+  await download.saveAs(path);
+}
+
+/**
+ * Uploads files to a specified element.
+ * @param {string | Locator} input - The element to upload files to.
+ * @param {UploadValues} path - The files to upload.
+ * @param {UploadOptions} options - The upload options.
+ */
+export async function uploadFiles(input: string | Locator, path: UploadValues, options?: UploadOptions): Promise<void> {
+  const locator = getLocator(input, { ...defaultVisibleOnlyOption, ...options });
+  await locator.setInputFiles(path, options);
+}
+
+/**
+ * Scrolls a specified element into view.
+ * @param {string | Locator} input - The element to scroll into view.
+ * @param {TimeoutOption} options - The timeout options.
+ */
+export async function scrollLocatorIntoView(input: string | Locator, options?: TimeoutOption): Promise<void> {
+  const locator = getLocator(input);
+  await locator.scrollIntoViewIfNeeded(options);
+}
+
+/**
+ * 3. JS: This section contains functions that use JavaScript to interact with elements on a web page.
+ * These functions include clicking on an element using JavaScript.
+ */
+
+/**
+ * Clicks on a specified element using JavaScript.
+ * @param {string | Locator} input - The element to click on.
+ * @param {TimeoutOption} options - The timeout options.
+ */
+export async function clickByJS(input: string | Locator, options?: TimeoutOption): Promise<void> {
+  const locator = getLocator(input);
+  await locator.evaluate((el: HTMLElement) => el.click(), options);
+}