development: browser-based development tool (#155)

bvandercar-vt · web-flow · commit ef4a8f9f7844 · 2025-03-02T19:09:45.000+01:00
* development: browser-based development tool

* whitespace

* defaults

* scroll boxes

* update readme

* fix args
diff --git a/.npmignore b/.npmignore
@@ -2,4 +2,5 @@ node_modules
 .vscode
 .cache
 dist
-__test__
+__test__
+__debug__
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "scripts": {
     "prepare": "husky && yarn lint && yarn build",
     "build": "tsc -p tsconfig.build.json",
+    "debug": "ts-node src/__debug__/browser-debug.ts",
     "lint": "yarn ts-standard --fix",
     "test": "jest"
   },
diff --git a/src/__debug__/browser-debug.ts b/src/__debug__/browser-debug.ts
@@ -0,0 +1,62 @@
+import { type ClickOptions, createCursor } from '../spoof'
+import { join } from 'path'
+import { promises as fs } from 'fs'
+import installMouseHelper from '../mouse-helper'
+import puppeteer from 'puppeteer'
+
+const delay = async (ms: number): Promise<void> => {
+  if (ms < 1) return
+  return await new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+const cursorDefaultOptions = {
+  moveDelay: 100,
+  moveSpeed: 99,
+  hesitate: 100,
+  waitForClick: 10,
+  scrollDelay: 100,
+  scrollSpeed: 40,
+  inViewportMargin: 50
+} as const satisfies ClickOptions
+
+puppeteer.launch({ headless: false }).then(async (browser) => {
+  const page = await browser.newPage()
+
+  await installMouseHelper(page)
+
+  const cursor = createCursor(page, undefined, undefined, {
+    move: cursorDefaultOptions,
+    click: cursorDefaultOptions,
+    moveTo: cursorDefaultOptions
+  })
+
+  const html = await fs.readFile(join(__dirname, 'custom-page.html'), 'utf8')
+
+  await page.goto('data:text/html,' + encodeURIComponent(html), {
+    waitUntil: 'networkidle2'
+  })
+
+  const performActions = async (): Promise<void> => {
+    await cursor.click('#box1')
+
+    await cursor.click('#box2')
+
+    await cursor.click('#box3')
+
+    await cursor.click('#box1')
+  }
+
+  await performActions()
+
+  // allows us to hit "refresh" button to restart the events
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  page.on('load', async () => {
+    await delay(500)
+    await page.evaluate(() => { window.scrollTo(0, 0) })
+    await delay(1000)
+
+    await performActions()
+  })
+}).catch((e) => {
+  console.error(e)
+})
diff --git a/src/__debug__/custom-page.html b/src/__debug__/custom-page.html
@@ -0,0 +1,34 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <style>
+    .box {
+      background: #eee;
+      transition: all 0.4s;
+      width: 50px;
+      height: 50px;
+      position: absolute;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="box1" class="box" style="
+        left: 200;
+        top: 40;
+      ">Box 1</div>
+  <div id="box2" class="box" style="
+      left: 200;
+      top: 3000;
+    ">Box 2</div>
+  <div id="box3" class="box" style="
+      left: 3000;
+      top: 5000;
+    ">Box 3</div>
+</body>
+
+</html>
diff --git a/src/spoof.ts b/src/spoof.ts
@@ -18,7 +18,7 @@ const log = debug('ghost-cursor')
 
 export interface BoxOptions {
   /**
-   * Percentage of padding to be added inside the element.
+   * Percentage of padding to be added inside the element when determining the target point.
    * Example:
    * - `0` = may be anywhere within the element.
    * - `100` = will always be center of element.
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -1,4 +1,8 @@
 {
-    "extends": "./tsconfig",
-    "exclude": ["node_modules", "**/__test__/**/*"]
-  }
+  "extends": "./tsconfig",
+  "exclude": [
+    "node_modules",
+    "**/__test__/**/*",
+    "**/__debug__/**/*"
+  ]
+}
