From 233eea9db074505d655ba3597e37a398e90f4837 Mon Sep 17 00:00:00 2001 From: Bradley Goodyear Date: Thu, 2 Jul 2020 19:19:14 -0400 Subject: [PATCH 1/2] Add rightclick recording, and click positions - Added the contextmenu capturing - Follows same format as standard clicks, I think RCLICK is a short and sweet name, but open to changing - Enabled capturing of mouse position relative to the click element - https://docs.cypress.io/api/commands/click.html#Arguments --- src/constants/index.ts | 1 + src/content-scripts/eventRecorder.ts | 2 ++ src/helpers/codeGenerator.ts | 10 ++++++++-- src/types/index.d.ts | 1 + 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/constants/index.ts b/src/constants/index.ts index baf8bb0..caa0ae6 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -4,6 +4,7 @@ export enum EventType { DBLCLICK = 'dblclick', KEYDOWN = 'keydown', SUBMIT = 'submit', + RCLICK = 'contextmenu', } export enum ControlAction { diff --git a/src/content-scripts/eventRecorder.ts b/src/content-scripts/eventRecorder.ts index b2639f7..5789297 100644 --- a/src/content-scripts/eventRecorder.ts +++ b/src/content-scripts/eventRecorder.ts @@ -20,11 +20,13 @@ function parseEvent(event: Event): ParsedEvent { else if ((event.target as Element).hasAttribute('data-test')) selector = `[data-test=${(event.target as Element).getAttribute('data-test')}]`; else if ((event.target as Element).hasAttribute('data-testid')) selector = `[data-testid=${(event.target as Element).getAttribute('data-testid')}]`; else selector = finder(event.target as Element); + const mouseEvent = (event as MouseEvent); const parsedEvent: ParsedEvent = { selector, action: event.type, tag: (event.target as Element).tagName, value: (event.target as HTMLInputElement).value, + location: { x: mouseEvent.offsetX, y: mouseEvent.offsetY}, }; if ((event.target as HTMLAnchorElement).hasAttribute('href')) parsedEvent.href = (event.target as HTMLAnchorElement).href; if ((event.target as Element).hasAttribute('id')) parsedEvent.id = (event.target as Element).id; diff --git a/src/helpers/codeGenerator.ts b/src/helpers/codeGenerator.ts index a0afe38..121125b 100644 --- a/src/helpers/codeGenerator.ts +++ b/src/helpers/codeGenerator.ts @@ -13,7 +13,11 @@ import { EventType } from '../constants'; */ function handleClick(event: ParsedEvent): string { - return `cy.get('${event.selector}').click();`; + return `cy.get('${event.selector}').click(${event.location.x}, ${event.location.y});`; +} + +function handleRClick(event: ParsedEvent): string { + return `cy.get('${event.selector}').rightclick(${event.location.x}, ${event.location.y});`; } function handleKeydown(event: ParsedEvent): string | null { @@ -41,7 +45,7 @@ function handleChange(event: ParsedEvent): string { } function handleDoubleclick(event: ParsedEvent): string { - return `cy.get('${event.selector}').dblclick();`; + return `cy.get('${event.selector}').dblclick(${event.location.x}, ${event.location.y});`; } function handleSubmit(event: ParsedEvent): string { @@ -58,6 +62,8 @@ export default { switch (event.action) { case EventType.CLICK: return handleClick(event); + case EventType.RCLICK: + return handleRClick(event); case EventType.KEYDOWN: return handleKeydown(event); case EventType.CHANGE: diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 7bd3dd1..674cd84 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -5,6 +5,7 @@ export interface ParsedEvent { action: string, tag: string, value: string, + location?: { x: any, y: any}, id?: string, key?: string, href?: string, From 823676023101c8db43eab4d6387d0f8e46465df5 Mon Sep 17 00:00:00 2001 From: Bradley Goodyear Date: Thu, 2 Jul 2020 19:22:40 -0400 Subject: [PATCH 2/2] Copy manifest and icons into dist folder - I was running into issues trying to load the unpacked extension because it didn't copy that stuff for me --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 77f5033..d36a1cb 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "npx tsc --noEmit && npx parcel ./src/popup/index.html ./src/background/background.ts ./src/content-scripts/eventRecorder.ts", - "build": "npx tsc --noEmit && npx parcel build ./src/popup/index.html ./src/background/background.ts ./src/content-scripts/eventRecorder.ts", + "build": "npx tsc --noEmit && npx parcel build ./src/popup/index.html ./src/background/background.ts ./src/content-scripts/eventRecorder.ts && cp ./src/manifest.json ./dist/ && cp ./src/assets/images/* ./dist", "test": "jest --verbose", "clean": "rm -rf dist .cache && mkdir dist && cp ./src/manifest.json dist && cp -r ./src/assets/images/. dist", "tsc": "npx tsc --noEmit",