add support to click specified coordinates relavte to an element (#426)

* add support to click  specified coordinates relavte to an element

* code prettier

README.md

@@ -150,7 +150,7 @@ const chromeless = new Chromeless({
 **Chrome methods**
 - [`goto(url: string, timeout?: number)`](docs/api.md#api-goto)
 - [`setUserAgent(useragent: string)`](docs/api.md#api-setUserAgent)
-- [`click(selector: string)`](docs/api.md#api-click)
+- [`click(selector: string, x?: number, y?: number)`](docs/api.md#api-click)
 - [`wait(timeout: number)`](docs/api.md#api-wait-timeout)
 - [`wait(selector: string)`](docs/api.md#api-wait-selector)
 - [`wait(fn: (...args: any[]) => boolean, ...args: any[])`] - Not implemented yet

docs/api.md

@@ -21,7 +21,7 @@ Chromeless provides TypeScript typings.
 ### Chrome methods
 - [`goto(url: string, timeout?: number)`](#api-goto)
 - [`setUserAgent(useragent: string)`](#api-setuseragent)
-- [`click(selector: string)`](#api-click)
+- [`click(selector: string, x?: number, y?: number)`](#api-click)
 - [`wait(timeout: number)`](#api-wait-timeout)
 - [`wait(selector: string, timeout?: number)`](#api-wait-selector)
 - [`wait(fn: (...args: any[]) => boolean, ...args: any[])`] - Not implemented yet
@@ -108,17 +108,20 @@ await chromeless.setUserAgent('Custom Chromeless UserAgent x.x.x')
 
 <a name="api-click" />
 
-### click(selector: string): Chromeless<T>
+### click(selector: string, x?: number, y?: number): Chromeless<T>
 
 Click on something in the DOM.
 
 __Arguments__
 - `selector` - DOM selector for element to click
+- `x` - Offset from the left of the element, default width/2
+- `y` - Offset from the top of the element, default height/2
 
 __Example__
 
 ```js
 await chromeless.click('#button')
+await chromeless.click('#button', 20, 100)
 ```
 
 ---------------------------------------

src/api.ts

@@ -85,8 +85,8 @@ export default class Chromeless<T extends any> implements Promise<T> {
     return this
   }
 
-  click(selector: string): Chromeless<T> {
-    this.queue.enqueue({ type: 'click', selector })
+  click(selector: string, x?: number, y?: number): Chromeless<T> {
+    this.queue.enqueue({ type: 'click', selector, x, y })
 
     return this
   }

src/chrome/local-runtime.ts

@@ -76,7 +76,7 @@ export default class LocalRuntime {
       case 'setUserAgent':
         return this.setUserAgent(command.useragent)
       case 'click':
-        return this.click(command.selector)
+        return this.click(command.selector, command.x, command.y)
       case 'returnCode':
         return this.returnCode(command.fn, ...command.args)
       case 'returnExists':
@@ -187,7 +187,7 @@ export default class LocalRuntime {
     this.log(`Waited for ${selector}`)
   }
 
-  private async click(selector: string): Promise<void> {
+  private async click(selector: string, x?: number, y?: number): Promise<void> {
     if (this.chromelessOptions.implicitWait) {
       this.log(`click(): Waiting for ${selector}`)
       await waitForNode(
@@ -206,8 +206,8 @@ export default class LocalRuntime {
     if (this.chromelessOptions.scrollBeforeClick) {
       await scrollToElement(this.client, selector)
     }
-    await click(this.client, selector, scale)
-    this.log(`Clicked on ${selector}`)
+    await click(this.client, selector, scale, x, y)
+    this.log(`Clicked on ${selector} at (${x}, ${y})`)
   }
 
   private async returnCode<T>(fn: string, ...args: any[]): Promise<T> {

src/types.ts

@@ -87,6 +87,8 @@ export type Command =
   | {
       type: 'click'
       selector: string
+      x?: number
+      y?: number
     }
   | {
       type: 'returnCode'

src/util.ts

@@ -191,13 +191,20 @@ export async function getClientRect(client, selector): Promise<ClientRect> {
   return JSON.parse(result.result.value) as ClientRect
 }
 
-export async function click(client: Client, selector: string, scale: number) {
+export async function click(
+  client: Client,
+  selector: string,
+  scale: number,
+  x?: number,
+  y?: number,
+) {
   const clientRect = await getClientRect(client, selector)
   const { Input } = client
-
+  if (x === undefined) x = clientRect.width / 2
+  if (y === undefined) y = clientRect.height / 2
   const options = {
-    x: Math.round((clientRect.left + clientRect.width / 2) * scale),
-    y: Math.round((clientRect.top + clientRect.height / 2) * scale),
+    x: Math.round((clientRect.left + x) * scale),
+    y: Math.round((clientRect.top + y) * scale),
     button: 'left',
     clickCount: 1,
   }